Not working with Vite build

[skornel02]

I have started experimenting with using Vite instead of react-scripts. When trying to rewrite one of my applications I noticed that react-diagrams works perfectly in development mode, but when it comes time for production build it stops working.

For reproduction I have created this repository: https://github.com/skornel02/vite-react-diagrams-issue

Expectation:

I can use both the development and production mode of Vite to serve my project. (vite and vite build && vite preview)

Happens:

Development mode works perfectly. Production mode fails with the following issue (blank screen, error in Javascript console):

Uncaught TypeError: Cannot read property 'Polygon' of undefined
    at Rectangle.js:8
    at u (vendor.227e0528.js:1)
    at Point.js:66

Investigation:

I am not experienced with bundlers but it seems to be an issue with it. After applying #406 as a temporary fix a new issue comes up where ModelGeometryInterface.js throws an exception that exports is undefined. Commenting this line out makes the issue go away and now react-diagrams works.

[zackshen]

+1

[Manuelbaun]

+1

[malavshah-9]

@skornel02 Can you describe here, how you resolved this issues? I didn't get last 2 lines in your comment.

Thanks in advance

[flieks]

I am having a similar issue with Vite and react-diagrams when trying to preview after build. Development works fine.

Uncaught TypeError: Class extends value undefined is not a constructor or null at Rectangle.js:6

[malavshah9]

@dylanvorster any thoughts on this issue?

[malavshah9]

I have fixed this issue by having proper production build using webpack and having vite for development build.

[zackshen]

thx

[flieks]

Maybe there is some rollup config possible in Vite.config.js ? Everything on here is possible but i don't know what to look for.

I tried

 build: {
    outDir: 'build',
    rollupOptions: {
      external: [
        '@projectstorm/react-canvas-core', 
        '@projectstorm/react-diagrams',
        '@projectstorm/geometry'
      ]
    }
}

But then i would get another error: Uncaught TypeError: Failed to resolve module specifier "@projectstorm/react-canvas-core". Relative references must start with either "/", "./", or "../".

[CamilleHbp]

Is there any update on this ? :)

[ryzencool]

I also encountered this problem, is there any update on this?

[malavshah9]

@ryzencool @CamilleHbp I have replaced vite with webpack until i find the proper solution. That is what you can do for now.

[actus-wirtenberger]

Maybe there is some rollup config possible in Vite.config.js ? Everything on here is possible but i don't know what to look for.

I tried

 build: {
    outDir: 'build',
    rollupOptions: {
      external: [
        '@projectstorm/react-canvas-core', 
        '@projectstorm/react-diagrams',
        '@projectstorm/geometry'
      ]
    }
}

But then i would get another error: Uncaught TypeError: Failed to resolve module specifier "@projectstorm/react-canvas-core". Relative references must start with either "/", "./", or "../".

This worked for me.

To get rid of the error Uncaught TypeError: Failed to resolve module specifier "@projectstorm/react-canvas-core". Relative references must start with either "/", "./", or "../"., I had to specify the path instead of referencing the library name in my import statement, e.g. import foo from '../../node_modules/@projectstorm/react-canvas-core'.

[choweiyuan]

Maybe there is some rollup config possible in Vite.config.js ? Everything on here is possible but i don't know what to look for.

I tried

 build: {
    outDir: 'build',
    rollupOptions: {
      external: [
        '@projectstorm/react-canvas-core', 
        '@projectstorm/react-diagrams',
        '@projectstorm/geometry'
      ]
    }
}

But then i would get another error: Uncaught TypeError: Failed to resolve module specifier "@projectstorm/react-canvas-core". Relative references must start with either "/", "./", or "../".

  build: {
    outDir: 'build',
    rollupOptions: {
      external: [
        '@projectstorm/react-diagrams',
        '@projectstorm/react-canvas-core',
        '@projectstorm/react-diagrams-core',
        '@projectstorm/react-diagrams-default'
      ],
    }
  }

Got it working with something similar (see above snippet) on Vite 4.3.8, react-diagrams 7.0.2.

Some of the errors I've encountered are as follows:

[vite]: Rollup failed to resolve import "@emotion/react"

Then I added the following to rollUpOptions.external (just trial and error)

        '@projectstorm/react-diagrams',
        '@projectstorm/react-diagrams-core',
        '@projectstorm/react-diagrams-default'

Then, I get this new error

[vite]: Rollup failed to resolve import "@projectstorm/react-canvas-core" from After adding react-canvas-core to rollUpOptions.external, then it worked fine

What puzzles me is why do I need to include this block to get this working with Vite, other libraries that I am using don't require this custom change.

[choweiyuan]

Following my post from May 2023, I realise that config does not actually work with vite build (same error as https://github.com/projectstorm/react-diagrams/issues/842#issuecomment-959398797)

This is my new vite config that would make vite build work

build: {
    minify: true,
    outDir: 'build',
    rollupOptions: {
      output: {
        manualChunks: {
          projectstorm: ["@projectstorm/react-diagrams"]
        }
      }
    }
  }