Webpack require fails #277

imrefazekas · 2016-01-12T13:37:14Z

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 · 2016-01-12T13:50:17Z

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 · 2016-01-14T14:05:14Z

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 · 2016-01-14T14:10:07Z

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

mingfang · 2016-01-26T07:46:01Z

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 · 2016-01-31T03:32:28Z

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 · 2016-05-03T14:47:12Z

Is there any progress with this issue?

frank-xue-porch · 2016-06-07T18:50:16Z

has the same issue, any progress?

dcsan · 2016-08-30T23:03:50Z

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

alwinn1977 · 2016-10-21T08:13:31Z

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

JrFolk · 2017-01-18T14:49:24Z

@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 · 2017-02-24T15:38:19Z

It seems to be a dragre-d3 problem - dagrejs/dagre-d3#129
Still not solved.. :(

Glavin001 · 2017-05-29T23:36:02Z

Why is the main in package.json pointing to src/mermaid.js as noted in #277 (comment) ?

I have it working so far by:

Manually changing main to dist/mermaid.js in node_modules/mermaid/package.json
Manually removing all _token_stack: in the broken dist/mermaid.js file. See Problem bundling compiled grammars with rollup zaach/jison#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 · 2017-05-30T00:46:01Z

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 zaach/jison#351 and zaach/jison#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 · 2017-06-04T04:29:24Z

Problem resolved and this is an official fix: #361 (comment)

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

tylerlong · 2017-06-04T07:02:03Z

Please also check mermaid-webpack-demo.

Glavin001 mentioned this issue May 29, 2017

Problem using with webpack jasonbellamy/react-mermaid#1

Open

Glavin001 mentioned this issue May 30, 2017

Problem bundling compiled grammars with rollup zaach/jison#351

Open

tylerlong closed this as completed Jun 4, 2017

acnebs mentioned this issue Jun 11, 2020

Issues with running under Webpack skanaar/nomnoml#127

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Webpack require fails #277

Webpack require fails #277

imrefazekas commented Jan 12, 2016

imrefazekas commented Jan 12, 2016

knsv commented Jan 14, 2016

imrefazekas commented Jan 14, 2016

mingfang commented Jan 26, 2016

mingfang commented Jan 31, 2016

mingfang commented May 3, 2016

frank-xue-porch commented Jun 7, 2016

dcsan commented Aug 30, 2016

alwinn1977 commented Oct 21, 2016

JrFolk commented Jan 18, 2017

josx commented Feb 24, 2017

Glavin001 commented May 29, 2017 •

edited

Loading

Glavin001 commented May 30, 2017 •

edited

Loading

tylerlong commented Jun 4, 2017

tylerlong commented Jun 4, 2017

Webpack require fails #277

Webpack require fails #277

Comments

imrefazekas commented Jan 12, 2016

imrefazekas commented Jan 12, 2016

knsv commented Jan 14, 2016

imrefazekas commented Jan 14, 2016

mingfang commented Jan 26, 2016

mingfang commented Jan 31, 2016

mingfang commented May 3, 2016

frank-xue-porch commented Jun 7, 2016

dcsan commented Aug 30, 2016

alwinn1977 commented Oct 21, 2016

JrFolk commented Jan 18, 2017

josx commented Feb 24, 2017

Glavin001 commented May 29, 2017 • edited Loading

Glavin001 commented May 30, 2017 • edited Loading

Step 1: Require from dist not src

Step 2: Workaround for Jison bug

Step 2.1: Create fixMermaid script

Step 2.2: Run Mermaid after npm install has completed

Step 3: Profit!

tylerlong commented Jun 4, 2017

tylerlong commented Jun 4, 2017

Glavin001 commented May 29, 2017 •

edited

Loading

Glavin001 commented May 30, 2017 •

edited

Loading

Step 1: Require from `dist` not `src`

Step 2.1: Create `fixMermaid` script

Step 2.2: Run Mermaid after `npm install` has completed