Problem using with webpack

[mingfang]

Not a problem with react-mermaid but actually with mermaid itself.
I was hopefully if anyone knows of a workaround.

[BrendanFDMoore]

Were you getting errors about fs proxyquire and/or module not being found?

My project uses webpack also and I am seeing console errors about those modules. The basic node shapes and layouts are constructed sensibly, but it fails partway through rendering.

[Glavin001]

I am using webpack and experiencing these issues, too.

Has anyone figured this out?

Here are my logs:

WARNING in ./~/mermaid/src/d3.js
5:4-11 Critical dependency: require function is used in a way in which dependencies cannot be statically extracted

WARNING in ./~/mermaid/src/diagrams/flowchart/dagre-d3.js
7:4-11 Critical dependency: require function is used in a way in which dependencies cannot be statically extracted

WARNING in ./~/dagre-d3/lib/graphlib.js
5:4-11 Critical dependency: require function is used in a way in which dependencies cannot be statically extracted

WARNING in ./~/dagre-d3/lib/dagre.js
5:4-11 Critical dependency: require function is used in a way in which dependencies cannot be statically extracted

WARNING in ./~/dagre-d3/lib/lodash.js
5:4-11 Critical dependency: require function is used in a way in which dependencies cannot be statically extracted

ERROR in ./~/mermaid/src/diagrams/example/parser/example.js
Module not found: Error: Can't resolve 'fs' in '/Users/glavin/Development/arrowtrace-ui/node_modules/mermaid/src/diagrams/example/parser'
 @ ./~/mermaid/src/diagrams/example/parser/example.js 624:17-30
 @ ./~/mermaid/src/mermaidAPI.js
 @ ./~/mermaid/src/mermaid.js
 @ ./~/react-mermaid/dist/react-mermaid.js
 @ ./src/App.tsx
 @ ./src/index.tsx
 @ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server react-hot-loader/patch ./src/index.tsx

ERROR in ./~/mermaid/src/diagrams/flowchart/parser/flow.js
Module not found: Error: Can't resolve 'fs' in '/Users/glavin/Development/arrowtrace-ui/node_modules/mermaid/src/diagrams/flowchart/parser'
 @ ./~/mermaid/src/diagrams/flowchart/parser/flow.js 948:17-30
 @ ./~/mermaid/src/mermaidAPI.js
 @ ./~/mermaid/src/mermaid.js
 @ ./~/react-mermaid/dist/react-mermaid.js
 @ ./src/App.tsx
 @ ./src/index.tsx
 @ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server react-hot-loader/patch ./src/index.tsx

ERROR in ./~/mermaid/src/diagrams/flowchart/parser/dot.js
Module not found: Error: Can't resolve 'fs' in '/Users/glavin/Development/arrowtrace-ui/node_modules/mermaid/src/diagrams/flowchart/parser'
 @ ./~/mermaid/src/diagrams/flowchart/parser/dot.js 735:17-30
 @ ./~/mermaid/src/mermaidAPI.js
 @ ./~/mermaid/src/mermaid.js
 @ ./~/react-mermaid/dist/react-mermaid.js
 @ ./src/App.tsx
 @ ./src/index.tsx
 @ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server react-hot-loader/patch ./src/index.tsx

ERROR in ./~/mermaid/src/diagrams/sequenceDiagram/parser/sequenceDiagram.js
Module not found: Error: Can't resolve 'fs' in '/Users/glavin/Development/arrowtrace-ui/node_modules/mermaid/src/diagrams/sequenceDiagram/parser'
 @ ./~/mermaid/src/diagrams/sequenceDiagram/parser/sequenceDiagram.js 758:17-30
 @ ./~/mermaid/src/mermaidAPI.js
 @ ./~/mermaid/src/mermaid.js
 @ ./~/react-mermaid/dist/react-mermaid.js
 @ ./src/App.tsx
 @ ./src/index.tsx
 @ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server react-hot-loader/patch ./src/index.tsx

ERROR in ./~/mermaid/src/diagrams/gantt/parser/gantt.js
Module not found: Error: Can't resolve 'fs' in '/Users/glavin/Development/arrowtrace-ui/node_modules/mermaid/src/diagrams/gantt/parser'
 @ ./~/mermaid/src/diagrams/gantt/parser/gantt.js 650:17-30
 @ ./~/mermaid/src/mermaidAPI.js
 @ ./~/mermaid/src/mermaid.js
 @ ./~/react-mermaid/dist/react-mermaid.js
 @ ./src/App.tsx
 @ ./src/index.tsx
 @ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server react-hot-loader/patch ./src/index.tsx

ERROR in ./~/mermaid/src/diagrams/classDiagram/parser/classDiagram.js
Module not found: Error: Can't resolve 'fs' in '/Users/glavin/Development/arrowtrace-ui/node_modules/mermaid/src/diagrams/classDiagram/parser'
 @ ./~/mermaid/src/diagrams/classDiagram/parser/classDiagram.js 735:17-30
 @ ./~/mermaid/src/mermaidAPI.js
 @ ./~/mermaid/src/mermaid.js
 @ ./~/react-mermaid/dist/react-mermaid.js
 @ ./src/App.tsx
 @ ./src/index.tsx
 @ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server react-hot-loader/patch ./src/index.tsx

[Glavin001]

This issue continues over at mermaid-js/mermaid#277 which then continues to dagrejs/dagre-d3#129 . Looks like no one has solved this for many years...

[Sigfried]

This is frustrating. I'm trying to use react-mermaid with create-react-app. Seems like I'm having the same problem described here.

[tylerlong]

mermaid has no problem with webpack: mermaid-js/mermaid#277 (comment)