mermaid: Webpack require fails

Requiring the package with Webpack fails in my web-project:

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

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

WARNING in ./~/mermaid/src/diagrams/flowchart/parser/dot.jison
Module parse failed: /Ruse/Nodrium/n-landing/node_modules/mermaid/src/diagrams/flowchart/parser/dot.jison Line 4: Unexpected token %
You may need an appropriate loader to handle this file type.
| 
| /* lexical grammar */
| %lex
| 
| %%
 @ ./~/mermaid/src/diagrams/flowchart ^\.\/.*$

WARNING in ./~/mermaid/src/diagrams/flowchart/parser/flow.jison
Module parse failed: /Ruse/Nodrium/n-landing/node_modules/mermaid/src/diagrams/flowchart/parser/flow.jison Line 8: Unexpected token %
You may need an appropriate loader to handle this file type.
| 
| /* lexical grammar */
| %lex
| %x string
| 
 @ ./~/mermaid/src/diagrams/flowchart ^\.\/.*$

WARNING in ./~/mermaid/src/diagrams/classDiagram/parser/classDiagram.jison
Module parse failed: /Ruse/Nodrium/n-landing/node_modules/mermaid/src/diagrams/classDiagram/parser/classDiagram.jison Line 8: Unexpected token %
You may need an appropriate loader to handle this file type.
| 
| /* lexical grammar */
| %lex
| %x string struct
| 
 @ ./~/mermaid/src ^\.\/.*$

WARNING in ./~/mermaid/src/diagrams/gantt/gant.css
Module parse failed: /Ruse/Nodrium/n-landing/node_modules/mermaid/src/diagrams/gantt/gant.css Line 2: Unexpected token *
You may need an appropriate loader to handle this file type.
| 
| * {
|     margin: 0;
|     padding: 0;
 @ ./~/mermaid/src ^\.\/.*$

WARNING in ./~/mermaid/src/diagrams/example/parser/example.jison
Module parse failed: /Ruse/Nodrium/n-landing/node_modules/mermaid/src/diagrams/example/parser/example.jison Line 6: Unexpected token %
You may need an appropriate loader to handle this file type.
|  *  MIT license.
|  */
| %lex
| 
| %options case-insensitive
 @ ./~/mermaid/src ^\.\/.*$

WARNING in ./~/mermaid/src/diagrams/gantt/parser/gantt.jison
Module parse failed: /Ruse/Nodrium/n-landing/node_modules/mermaid/src/diagrams/gantt/parser/gantt.jison Line 6: Unexpected token %
You may need an appropriate loader to handle this file type.
|  *  MIT license.
|  */
| %lex
| 
| %options case-insensitive
 @ ./~/mermaid/src ^\.\/.*$

WARNING in ./~/mermaid/src/diagrams/sequenceDiagram/parser/sequenceDiagram.jison
Module parse failed: /Ruse/Nodrium/n-landing/node_modules/mermaid/src/diagrams/sequenceDiagram/parser/sequenceDiagram.jison Line 11: Unexpected token %
You may need an appropriate loader to handle this file type.
|  *  Simplified BSD license.
|  */
| %lex
| 
| %options case-insensitive
 @ ./~/mermaid/src ^\.\/.*$

WARNING in ./~/mermaid/src/less/default/flow.less
Module parse failed: /Ruse/Nodrium/n-landing/node_modules/mermaid/src/less/default/flow.less Line 1: Unexpected token .
You may need an appropriate loader to handle this file type.
| .mermaid .label { color:#333}
| 
| .node rect,
 @ ./~/mermaid/src ^\.\/.*$

WARNING in ./~/mermaid/src/less/default/mermaid.less
Module parse failed: /Ruse/Nodrium/n-landing/node_modules/mermaid/src/less/default/mermaid.less Line 1: Unexpected token ILLEGAL
You may need an appropriate loader to handle this file type.
| @import "variables";
| @import "flow";
| @import "sequenceDiagram";
 @ ./~/mermaid/src ^\.\/.*$

WARNING in ./~/mermaid/src/less/default/gantt.less
Module parse failed: /Ruse/Nodrium/n-landing/node_modules/mermaid/src/less/default/gantt.less Line 2: Unexpected token .
You may need an appropriate loader to handle this file type.
| /** Section styling */
| .section {
|   stroke:none;
|   opacity:0.2;
 @ ./~/mermaid/src ^\.\/.*$

WARNING in ./~/mermaid/src/less/default/variables.less
Module parse failed: /Ruse/Nodrium/n-landing/node_modules/mermaid/src/less/default/variables.less Line 1: Unexpected token ILLEGAL
You may need an appropriate loader to handle this file type.
| @mainBkg: #ECECFF;
| @secondBkg: #ffffde;
| @lineColor: #333333;
 @ ./~/mermaid/src ^\.\/.*$

WARNING in ./~/mermaid/src/less/default/sequenceDiagram.less
Module parse failed: /Ruse/Nodrium/n-landing/node_modules/mermaid/src/less/default/sequenceDiagram.less Line 3: Unexpected token .
You may need an appropriate loader to handle this file type.
| 
| 
| .actor {
|   stroke: @actorBorder;
|   fill: @actorBkg;
 @ ./~/mermaid/src ^\.\/.*$

WARNING in ./~/mermaid/src/less/forest/classDiagram.less
Module parse failed: /Ruse/Nodrium/n-landing/node_modules/mermaid/src/less/forest/classDiagram.less Line 1: Unexpected identifier
You may need an appropriate loader to handle this file type.
| g.classGroup text {
|   fill:@nodeBorder;
|   stroke:none;
 @ ./~/mermaid/src ^\.\/.*$

WARNING in ./~/mermaid/src/less/forest/gantt.less
Module parse failed: /Ruse/Nodrium/n-landing/node_modules/mermaid/src/less/forest/gantt.less Line 2: Unexpected token .
You may need an appropriate loader to handle this file type.
| /** Section styling */
| .section {
|   stroke:none;
|   opacity:0.2;
 @ ./~/mermaid/src ^\.\/.*$

WARNING in ./~/mermaid/src/less/forest/mermaid.less
Module parse failed: /Ruse/Nodrium/n-landing/node_modules/mermaid/src/less/forest/mermaid.less Line 1: Unexpected token ILLEGAL
You may need an appropriate loader to handle this file type.
| @import "variables";
| @import "flow";
| @import "sequenceDiagram";
 @ ./~/mermaid/src ^\.\/.*$

WARNING in ./~/mermaid/src/less/forest/flow.less
Module parse failed: /Ruse/Nodrium/n-landing/node_modules/mermaid/src/less/forest/flow.less Line 1: Unexpected token .
You may need an appropriate loader to handle this file type.
| .mermaid .label { 
|   font-family: 'trebuchet ms', verdana, arial;
| color:#333
 @ ./~/mermaid/src ^\.\/.*$

WARNING in ./~/mermaid/src/less/forest/variables.less
Module parse failed: /Ruse/Nodrium/n-landing/node_modules/mermaid/src/less/forest/variables.less Line 1: Unexpected token ILLEGAL
You may need an appropriate loader to handle this file type.
| @mainBkg: #cde498;
| @secondBkg: #cdffb2;
| @lineColor: #1a3318;
 @ ./~/mermaid/src ^\.\/.*$

WARNING in ./~/mermaid/src/less/forest/sequenceDiagram.less
Module parse failed: /Ruse/Nodrium/n-landing/node_modules/mermaid/src/less/forest/sequenceDiagram.less Line 3: Unexpected token .
You may need an appropriate loader to handle this file type.
| 
| 
| .actor {
|   stroke: @actorBorder;
|   fill: @actorBkg;
 @ ./~/mermaid/src ^\.\/.*$

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

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

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

ERROR in ./~/mermaid/src/diagrams/sequenceDiagram/sequenceDiagram.spec.js
Module not found: Error: Cannot resolve module 'proxyquire' in /Ruse/Nodrium/n-landing/node_modules/mermaid/src/diagrams/sequenceDiagram
 @ ./~/mermaid/src/diagrams/sequenceDiagram/sequenceDiagram.spec.js 1:17-38

About this issue

  • Original URL
  • State: closed
  • Created 8 years ago
  • Reactions: 1
  • Comments: 15

Most upvoted comments

so apparently this is fixed in webpack 2.0, but now i get a different error:

npm install webpack@beta


[~/dev/rikai/boted/editor]$ webpack                                                                                  
ts-loader: Using typescript@1.8.10 and /Users/dc/dev/rikai/boted/editor/client/tsconfig.json
Hash: 1be1a3b1eb2fdd341e37
Version: webpack 2.1.0-beta.21
Time: 9059ms
                      Asset     Size  Chunks             Chunk Names
    ./public/dist/bundle.js  4.34 MB       0  [emitted]  main
./public/dist/bundle.js.map   5.3 MB       0  [emitted]  main
    + 667 hidden modules

WARNING in ./~/mermaid/src/d3.js
5:4 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 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 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 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 Critical dependency: require function is used in a way in which dependencies cannot be statically extracted

ERROR in ./~/mermaid/package.json
Module parse failed: /Users/dc/dev/rikai/boted/editor/node_modules/mermaid/package.json Unexpected token (2:9)
You may need an appropriate loader to handle this file type.
| {
|   "_args": [
|     [
|       {
 @ ./~/mermaid/src/mermaid.js 134:15-41
 @ ./~/react-mermaid/dist/react-mermaid.js
 @ ./client/src/components/StoryFlow.tsx
 @ ./client/src/components/TopicsPage.tsx
 @ ./client/src/App.tsx
 @ ./client/src/index.tsx

ERROR in ./~/mermaid/src/diagrams/example/parser/example.js
Module not found: Error: Can't resolve 'fs' in '/Users/dc/dev/rikai/boted/editor/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
 @ ./client/src/components/StoryFlow.tsx
 @ ./client/src/components/TopicsPage.tsx
 @ ./client/src/App.tsx
 @ ./client/src/index.tsx

ERROR in ./~/mermaid/src/diagrams/flowchart/parser/flow.js
Module not found: Error: Can't resolve 'fs' in '/Users/dc/dev/rikai/boted/editor/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
 @ ./client/src/components/StoryFlow.tsx
 @ ./client/src/components/TopicsPage.tsx
 @ ./client/src/App.tsx
 @ ./client/src/index.tsx

ERROR in ./~/mermaid/src/diagrams/flowchart/parser/dot.js
Module not found: Error: Can't resolve 'fs' in '/Users/dc/dev/rikai/boted/editor/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
 @ ./client/src/components/StoryFlow.tsx
 @ ./client/src/components/TopicsPage.tsx
 @ ./client/src/App.tsx
 @ ./client/src/index.tsx

ERROR in ./~/mermaid/src/diagrams/sequenceDiagram/parser/sequenceDiagram.js
Module not found: Error: Can't resolve 'fs' in '/Users/dc/dev/rikai/boted/editor/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
 @ ./client/src/components/StoryFlow.tsx
 @ ./client/src/components/TopicsPage.tsx
 @ ./client/src/App.tsx
 @ ./client/src/index.tsx

ERROR in ./~/mermaid/src/diagrams/gantt/parser/gantt.js
Module not found: Error: Can't resolve 'fs' in '/Users/dc/dev/rikai/boted/editor/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
 @ ./client/src/components/StoryFlow.tsx
 @ ./client/src/components/TopicsPage.tsx
 @ ./client/src/App.tsx
 @ ./client/src/index.tsx

ERROR in ./~/mermaid/src/diagrams/classDiagram/parser/classDiagram.js
Module not found: Error: Can't resolve 'fs' in '/Users/dc/dev/rikai/boted/editor/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
 @ ./client/src/components/StoryFlow.tsx
 @ ./client/src/components/TopicsPage.tsx
 @ ./client/src/App.tsx
 @ ./client/src/index.tsx

I’m also having a similar problem using webpack

Module not found: Error: Cannot resolve module 'proxyquire' in ./node_modules/mermaid/src/diagrams/sequenceDiagram

Problem resolved and this is an official fix: https://github.com/knsv/mermaid/issues/361#issuecomment-306017512

In short: latest version of mermaid has no problem with webpack.