search

jasonbellamy / react-mermaid

A react component to display mermaid diagrams and flowcharts
MIT License
77 stars 15 forks source link

Problem using with webpack #1

Open mingfang opened 8 years ago

mingfang commented 8 years ago

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

BrendanFDMoore commented 8 years ago

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 commented 7 years ago

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 commented 7 years ago

This issue continues over at https://github.com/knsv/mermaid/issues/277 which then continues to https://github.com/cpettitt/dagre-d3/issues/129 . Looks like no one has solved this for many years...

Sigfried commented 7 years ago

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 commented 7 years ago

mermaid has no problem with webpack: https://github.com/knsv/mermaid/issues/277#issuecomment-306017563