Issues using react-diagrams node module

[xiaopow]

I have been trying to install a node module called react-diagrams but I seem to be having issues importing the modules into my React app after installation.

I tried using the node module in a create-react-app and it works without needing extra setup on webpack. Has anyone used this module, or would know what might cause the issues?

For example, when I try importing one of the components from the module, I get the following error.

Failed to compile.

./app/javascript/src/dashboard/flows/show/overview/flowMap.jsx 27:12-24
"export 'CanvasWidget' was not found in '@projectstorm/react-canvas-core'

I also get the following error when importing another component from this module.

Uncaught TypeError: Super expression must either be null or a function: undefined

I assume it could be due to webpacker having some different loader settings that causes this?

If anyone has any slight idea, it would be much appreciated. Thank you.

[jakeNiemiec]

You might need this:

// file: config/webpack/environment.js
environment.loaders.delete('nodeModules')

https://github.com/rails/webpacker/blob/master/docs/v4-upgrade.md#excluding-node_modules-from-being-transpiled-by-babel-loader

[xiaopow]

@jakeNiemiec thank you, that worked!

[danielricecodes]

I just ran into this on a clean install of Rails 6, React-Rails, and Webpacker. I installed React Diagrams and immediately ran into this issue. I ran all the right generators, too.

So perhaps this setting should remain the default for now? It took me HOURS to solve this. Why would I have looked at an "upgrading" tip. I never upgraded.