Mermaid: Webpack require fails

[imrefazekas]

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

[imrefazekas]

If I require the dist min file:

Critical dependencies:
1:437-444 This seems to be a pre-built javascript file. Though this is possible, it's not recommended. Try to require the original source to get better results.
 @ ./~/mermaid/odist/mermaid.min.js 1:437-444

It works that way, but makes impossible for me to access the yy object completely.

[knsv]

In package.json the entry point is pointing to src/mermaid.js

  "main": "src/mermaid.js",

This is the file that should be required. Hope that pointer helps and let me know how it goes.

[imrefazekas]

I required that file directly as well. Result is the same as I wrote above.
Used node 5.4, Webpack 1.12.10

[mingfang]

I'm also having a similar problem using webpack

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

[mingfang]

I have a fork that "mostly" works with webpack
https://github.com/mingfang/mermaid/commit/3e1638d9f49971a107d3dbd084f0c52c6421e65f

The key changes are
-removed proxyquire
-avoid names that conflicted with the official modules such as d3

There are still a few warnings but I was hoping this fork would inspire mermaid to become webpack compatible.

[mingfang]

Is there any progress with this issue?

[frank-xue-porch]

has the same issue, any progress?

[dcsan]

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 [email protected] 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

[alwinn1977]

I have the same problem with webpack 2.0 and don't know how to resolve it

[JrFolk]

@dcsan react-mermaid.js is using "mermaid": "^0.5.1"

The wrapper is... very minimalistic. I suggest using the mermaid version current in npm.

[josx]

It seems to be a dragre-d3 problem - https://github.com/cpettitt/dagre-d3/issues/129
Still not solved.. :(

[Glavin001]

Why is the main in package.json pointing to src/mermaid.js as noted in https://github.com/knsv/mermaid/issues/277#issuecomment-171652293 ?

I have it working so far by:
1) Manually changing main to dist/mermaid.js in node_modules/mermaid/package.json
2) Manually removing all _token_stack: in the broken dist/mermaid.js file. See https://github.com/zaach/jison/issues/351 for details.

I'll see if I can make a Pull Request to fix this soon.

Update: This is the error I am seeing with Webpack using require("mermaid/dist/mermaid.js"):

ERROR in ./~/mermaid/dist/mermaid.js
Module parse failed: /Users/glavin/Development/lixar/rmbut/arrowtrace-ui/node_modules/source-map-loader/index.js!/Users/glavin/Development/lixar/rmbut/arrowtrace-ui/node_modules/mermaid/dist/mermaid.js Invalid labeled declaration (49509:26)
You may need an appropriate loader to handle this file type.
|                 lstack.length = lstack.length - n;
|             }
|             _token_stack: var lex = function lex() {
|                 var token;
|                 token = lexer.lex() || EOF;
 @ ./src/Mermaid.tsx 14:17-51
 @ ./src/App.tsx
 @ ./src/index.tsx
 @ multi react-hot-loader/patch ./src/index.tsx

However, when I clone and build (npm run prepublishOnly) Mermaid repository, the dist/mermaid.js file does NOT contain _token_start:. Maybe a simply re-publish with the latest dependencies would fix it?

[Glavin001]

Ok, so I have it working now.

Step 1: Require from dist not src

We need to fix require first, given the package.json is incorrectly pointing to src/mermaid.js instead of dist/mermaid.js. See https://github.com/knsv/mermaid/blob/master/package.json#L5

| Before | After |
| --- | --- |
| require('mermaid'); | require('mermaid/dist/mermaid.js'); |

Likewise, I have the CSS working with Webpack using require('mermaid/dist/mermaid.css') and css-loader.

Step 2: Workaround for Jison bug

After step 1 I receive an error Invalid labeled declaration about the _token_start: lines.
Unfortunately, a fix has yet to be applied to Jison. See https://github.com/zaach/jison/issues/351 and https://github.com/zaach/jison/pull/352

For now, we can provide a workaround.

Step 2.1: Create fixMermaid script

Create a file named scripts/fixMermaid.js with the following contents:

#!/usr/bin/env node
const { readFileSync, writeFileSync } = require('fs');
const path = require('path')
const mermaidPath = path.resolve(__dirname, '../node_modules/mermaid/dist/mermaid.js');

console.log(`Fixing Mermaid JS file at ${mermaidPath}`);
const contents = readFileSync(mermaidPath, 'utf8');

// Remove _token_stack label manually until fixed in jison:
// https://github.com/zaach/jison/issues/351
// https://github.com/zaach/jison/pull/352
const fixedContents = contents.split('_token_stack:').join('');

writeFileSync(mermaidPath, fixedContents, 'utf8');
console.log('Fixed Mermaid!');

Of course, you do not need to name it fixMermaid.js or place it within a directory named scripts. If you change this structure, please be sure to change the following steps, too.

Step 2.2: Run Mermaid after npm install has completed

Edit your package.json to include the postinstall script:

{
  "scripts": {
    "postinstall": "node scripts/fixMermaid.js"
  }
}

Step 3: Profit!

Now when you run npm install and then webpack, it should all work! 💥

❯ npm install

> postinstall
> node scripts/fixMermaid.js

Fixing Mermaid JS file at ./node_modules/mermaid/dist/mermaid.js
Fixed Mermaid!

[tylerlong]

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.

[tylerlong]

Please also check mermaid-webpack-demo.