Webpack - loader for mxClient, can't load all related objects cleanly in export

Question

The current loader I have is :

{
    test: path.join(__dirname, '../libs/mxClient/js/mxClient.js'),
    loaders: [
        'exports?mxClient,mxGraph,mxGraphModel'
    ]
}

I seem to have to export each object that exists in mxClient in order to be able to use it in my application when i use:

var mxClientTest = require('mxClient');

Another question is that it seems that when i try to use import for my module, nothing gets loaded, but when i assign it to a variable and use require, i do get the exports that I specified in my loader, anyone would know why?

score 3 · Answer 1 · answered Oct 31 '18 at 16:48

I've been able to import it through webpack. You have to add the following code in the webpack configuration under module => rules

module: {
   rules: [
       ...

       {
         test: require.resolve('mxgraph/javascript/mxClient'),
         use: 'exports-loader?' +
      'mxClient,mxLog,mxObjectIdentity,mxDictionary,mxResources,mxEffects,mxUtils,mxConstants,mxEvent,mxClipboard,mxUrlConverter,mxVmlCanvas2D,mxStencilRegistry,' +
      'mxMarker,mxHierarchicalEdgeStyle,mxCellPath,mxPerimeter,mxEdgeStyle,mxStyleRegistry,mxCodecRegistry,mxGenericChangeCodec,mxStylesheetCodec,mxDefaultToolbarCodec,' +
      'mxGraph,mxRubberband,mxHierarchicalLayout,mxFastOrganicLayout,mxGraphModel,mxPanningHandler,mxKeyHandler,mxParallelEdgeLayout,mxLayoutManager,mxCompactTreeLayout,' +
      'mxPrintPreview,mxToolbar,mxOutline,mxCellTracker,mxCellOverlay,mxImage,mxLoadResources,mxPopupMenu,mxCylinder,mxRectangle,mxCellRenderer,mxVertexHandler,mxPoint,' +
      'mxHandle,mxRhombus, mxActor,mxArrow,mxArrowConnector,mxCloud,mxConnector,mxConnector,mxEllipse,mxHexagon,mxImageShape,mxLabel,mxLine,mxPolyline,mxMarker,mxRectangleShape,' +
      'mxShape,mxStencil,mxStencilRegistry,mxSwimlane,mxText,mxTriangle,mxAutoSaveManager,mxDivResizer,mxForm,mxGuide,mxImageBundle,mxImageExport,mxLog,mxMorphing,mxMouseEvent,' +
      'mxPanningManager,mxSvgCanvas2D,mxUndoableEdit,mxUndoManager,mxUrlConverter,mxWindow,mxXmlCanvas2D,mxXmlRequest,mxCellEditor,mxCellState,mxCellStatePreview,mxConnectionConstraint,' +
      'mxGraphSelectionModel,mxGraphView,mxMultiplicity,mxSwimlaneManager,mxTemporaryCellStates,mxGeometry,mxStackLayout,mxRadialTreeLayout,mxPartitionLayout,mxGraphLayout,' +
      'mxEdgeLabelLayout,mxCompositeLayout,mxCircleLayout,mxSwimlaneOrdering,mxMinimumCycleRemover,mxMedianHybridCrossingReduction,mxHierarchicalLayoutStage,mxCoordinateAssignment,' +
      'mxSwimlaneLayout,mxObjectCodec,mxGenericChangeCodec,mxTooltipHandler,mxSelectionCellsHandler,mxPopupMenuHandler,mxGraphHandler,mxElbowEdgeHandler,mxEdgeHandler,' +
      'mxConstraintHandler,mxConnectionHandler,mxCellMarker,mxCellHighlight,mxDefaultPopupMenu,mxDefaultKeyHandler,mxCodec,mxGraphHierarchyModel,mxGraphAbstractHierarchyCell,' +
      'mxGraphHierarchyEdge,mxGraphHierarchyNode,mxSwimlaneModel,mxEdgeSegmentHandler'
       }
        ]
}

then you import the vars in your code like this:

import {
   mxClient,
   mxUtils,
   mxConstants,
   ...
       } from 'mxgraph/javascript/mxClient'

Hope this helps :)

I don't know, f this is the best solution, but it helped me a lot to integrate mxgraph in reactjs. Thank you!!!!! — MarryS, Feb 07 '19 at 12:37

score 0 · Answer 2 · answered Apr 12 '18 at 13:33

I've been able to use import instead of require when I use the following setup.

I use the export loader like so:

{ test: /mxClient\.js$/, loader: 'exports-loader?mxClient,mxGraph, mxGraphModel' }

And then when I import:

import { mxGraph } from 'mxgraph/javascript/mxClient';

or:

import { mxGraph, mxClient, mxGraphModel } from 'mxgraph/javascript/mxClient';

Webpack - loader for mxClient, can't load all related objects cleanly in export

2 Answers2