npm install still not possible

[tobiastimm]

In mxGraph 3.9.8 it is still not possible to install it via npm install.

The file "main": "./javascript/dist/build.js", described in package.json doesn't exist in the uploaded npm package.

WIth that issue an import is impossible within the browser

import {
  mxGraph,
  mxUtils,
  mxStencilRegistry,
  mxConstants,
  mxStencil,
  mxGraphModel,
} from 'mxgraph';

throws an error that mxgraph is undefined

[Thj007]

hi, are you use the a command "npm install mxgraph" to install mxgraph ?

[tobiastimm]

@Thj007 yes

[Thj007]

Can I see your code which you loaded the mxgraph and use it ? I found the doc of use module loaded.
this is the something words

of use module loaded

and the this is my code, but it always throw error -- "can't resolve mxgraph XXXX"

Did I do something wrong ?

[Thj007]

I should add, my project use the react

[tobiastimm]

@Thj007 if i understand you correctly, that is the reason why I have opened this issue. The published npm package of mxgraph is not working. Thats why you get this error.

[Thj007]

ok

[mamhaidly]

I am getting the same problem, any solutions or not yet?

[epicfaace]

Try

import {
  mxGraph,
  mxUtils,
  mxStencilRegistry,
  mxConstants,
  mxStencil,
  mxGraphModel,
} from 'mxgraph/javascript/mxClient';

[BillionChen]

try this
webpack.base.config.js

module.exports = {
  module:{
    rules:[{

        test: resolve('node_modules/mxgraph/javascript/mxClient.js'),
        loader: 'exports-loader?' + [
          'mxClient',
          // editor
          'mxEditor', 'mxDefaultToolbar', 'mxDefaultPopupMenu', 'mxDefaultKeyHandler',
          // handler
          'mxCellHighlight', 'mxCellMarker', 'mxCellTracker', 'mxConnectionHandler', 'mxConstraintHandler', 'mxEdgeHandler', 'mxEdgeSegmentHandler', 'mxElbowEdgeHandler', 'mxGraphHandler', 'mxHandle', 'mxKeyHandler', 'mxPanningHandler', 'mxPopupMenuHandler', 'mxRubberband', 'mxSelectionCellsHandler', 'mxTooltipHandler', 'mxVertexHandler',

          // io
          'mxCodec', 'mxCodecRegistry',

          // layout
          'mxCircleLayout', 'mxCompactTreeLayout', 'mxCompositeLayout', 'mxEdgeLabelLayout', 'mxFastOrganicLayout', 'mxGraphLayout', 'mxParallelEdgeLayout', 'mxPartitionLayout', 'mxRadialTreeLayout', 'mxStackLayout',
          'mxHierarchicalLayout', 'mxSwimlaneLayout',
          'mxGraphAbstractHierarchyCell', 'mxGraphHierarchyEdge', 'mxGraphHierarchyModel', 'mxGraphHierarchyNode', 'mxSwimlaneModel',
          'mxCoordinateAssignment', 'mxHierarchicalLayoutStage', 'mxMedianHybridCrossingReduction', 'mxMinimumCycleRemover', 'mxSwimlaneOrdering',

          // model
          'mxCell', 'mxCellPath', 'mxGeometry', 'mxGraphModel',


          // shapes
          'mxActor', 'mxArrow', 'mxArrowConnector', 'mxCloud', 'mxConnector', 'mxCylinder', 'mxDoubleEllipse', 'mxEllipse', 'mxHexagon', 'mxImageShape',
          'mxLabel', 'mxLine', 'mxMarker', 'mxPolyline', 'mxRectangleShape', 'mxRhombus', 'mxShape', 'mxStencil', 'mxStencilRegistry', 'mxSwimlane', 'mxText', 'mxTriangle',

          // util
          'mxAbstractCanvas2D', 'mxAnimation', 'mxAutoSaveManager', 'mxClipboard', 'mxConstants', 'mxDictionary', 'mxDivResizer', 'mxDragSource', 'mxEffects', 'mxEvent', 'mxEventObject', 'mxEventSource', 'mxForm', 'mxGuide', 'mxImage', 'mxImageBundle', 'mxImageExport', 'mxLog', 'mxMorphing', 'mxMouseEvent', 'mxObjectIdentity', 'mxPanningManager', 'mxPoint', 'mxPopupMenu', 'mxRectangle', 'mxResources', 'mxSvgCanvas2D', 'mxToolbar', 'mxUndoableEdit', 'mxUndoManager', 'mxUrlConverter', 'mxUtils', 'mxVmlCanvas2D', 'mxWindow', 'mxXmlCanvas2D', 'mxXmlRequest',

          // view
          'mxCellEditor', 'mxCellOverlay', 'mxCellRenderer', 'mxCellState', 'mxCellStatePreview', 'mxConnectionConstraint', 'mxEdgeStyle', 'mxGraph', 'mxGraphSelectionModel', 'mxGraphView', 'mxLayoutManager', 'mxMultiplicity', 'mxOutline', 'mxPerimeter', 'mxPrintPreview', 'mxStyleRegistry', 'mxStylesheet', 'mxSwimlaneManager', 'mxTemporaryCellStates'
        ].join(','),
    }]
  }
}

components

import {
  mxGraph,
  mxUtils,
  mxStencilRegistry,
  mxConstants,
  mxStencil,
  mxGraphModel,
} from 'mxgraph/javascript/mxClient';

[johnwheeler]

Seems like the way to handle is now

import mxGraphFactory from 'mxgraph';
const { mxClient, mxGraphModel, mxGraph } = new mxGraphFactory();

...

[tsi]

Thanks @johnwheeler that helped.
I also needed to load common.css
The full snippet is:

import "mxgraph/javascript/src/css/common.css";

import mxGraphFactory from "mxgraph";
const {
  mxGraph,
  mxRubberband,
  mxConstants,
  mxPerimeter,
  mxClient,
  mxUtils,
  mxHierarchicalLayout
} = new mxGraphFactory();