Closed imrefazekas closed 7 years ago
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.
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.
I required that file directly as well. Result is the same as I wrote above. Used node 5.4, Webpack 1.12.10
I'm also having a similar problem using webpack
Module not found: Error: Cannot resolve module 'proxyquire' in ./node_modules/mermaid/src/diagrams/sequenceDiagram
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.
Is there any progress with this issue?
has the same issue, any progress?
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 have the same problem with webpack 2.0 and don't know how to resolve it
@dcsan react-mermaid.js is using "mermaid": "^0.5.1"
The wrapper is... very minimalistic. I suggest using the mermaid version current in npm.
It seems to be a dragre-d3 problem - https://github.com/cpettitt/dagre-d3/issues/129 Still not solved.. :(
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?
Ok, so I have it working now.
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.
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.
fixMermaid
scriptCreate 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.
npm install
has completedEdit your package.json
to include the postinstall
script:
{
"scripts": {
"postinstall": "node scripts/fixMermaid.js"
}
}
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!
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.
Please also check mermaid-webpack-demo.
Requiring the package with Webpack fails in my web-project: