How to import mxgraph into react using vite?

82 Views Asked by At

Before switching to vite, I used CRA and the webpack bundler. Previously, I simply imported the library into the module and everything worked. Now I have no idea how to do this in vite.

as it was in the CRA:

import mx from 'mxgraph';

const { mxClient, mxUtils, mxEvent, mxKeyHandler, mxCodec, mxGraphModel, mxGeometry,
    mxPoint, mxEditor, mxEffects, mxRectangle, mxDefaultKeyHandler,
    mxXmlRequest} = mx();

window.mxEditor = mxEditor;
window.mxKeyHandler = mxKeyHandler;
window.mxDefaultKeyHandler = mxDefaultKeyHandler;
window.mxGraphModel = mxGraphModel;
window.mxGeometry = mxGeometry;
window.mxPoint = mxPoint;
window.mxUtils = mxUtils;
window.mxCodec = mxCodec;
window.mxXmlRequest = mxXmlRequest;

I tried the same thing in vite, but it didn't work. Only connecting directly to html via script works:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite + React</title>
    <script type="text/javascript"> mxBasePath = './node_modules/mxgraph/javascript/src'</script>
    <script type="text/javascript" src="./node_modules/mxgraph/javascript/src/js/mxClient.js"></script>
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="/src/main.jsx"></script>
  </body>
</html>

I want to import the library directly into the jsx module.

0

There are 0 best solutions below