Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Webpack require fails #277

Closed
imrefazekas opened this issue Jan 12, 2016 · 15 comments
Closed

Webpack require fails #277

imrefazekas opened this issue Jan 12, 2016 · 15 comments

Comments

@imrefazekas
Copy link

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
Copy link
Author

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
Copy link
Collaborator

knsv commented Jan 14, 2016

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
Copy link
Author

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

@mingfang
Copy link

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
Copy link

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
Copy link

mingfang commented May 3, 2016

Is there any progress with this issue?

@frank-xue-porch
Copy link

has the same issue, any progress?

@dcsan
Copy link

dcsan commented Aug 30, 2016

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
Copy link

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

@JrFolk
Copy link

JrFolk commented Jan 18, 2017

@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
Copy link

josx commented Feb 24, 2017

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

@Glavin001
Copy link

Glavin001 commented May 29, 2017

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

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 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
Copy link

Glavin001 commented May 30, 2017

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
Copy link
Collaborator

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

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

@tylerlong
Copy link
Collaborator

Please also check mermaid-webpack-demo.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

10 participants