mermaidjs/mermaid-live-editor

Failed to install mermaid

volkanunsal opened this issue ยท 3 comments

I am getting this error as well on macOS Mojave 10.14.6 (Supplemental Update 2). Cloned from github, yarn install was successful, but yarn dev throws this error:

error An unexpected error occurred: "https://registry.yarnpkg.com/@mermaid-js%2fmermaid: Not found".
๐Ÿšจ /mermaid-live-editor/src/components/Edit.js:5:20: Failed to install @mermaid-js/mermaid.
  3 | import { Route } from 'react-router-dom'
  4 | import { Base64 } from 'js-base64'
> 5 | import mermaid from '@mermaid-js/mermaid'
    |                    ^
  6 | 
  7 | import Error from './Error'
  8 | import Preview from './Preview'

Same for me on ubuntu 18.04 :

yarn run v1.19.1
$ parcel ./index.html -d build

Server running at http://localhost:1234 
๐Ÿšจ  /home/mik/mermaid-live-editor/src/index.js:3:7: Cannot resolve dependency 'mermaid/src/themes/default/index.scss'
  1 | import React from 'react'
  2 | import ReactDOM from 'react-dom'
> 3 | import 'mermaid/src/themes/default/index.scss'
    |       ^
  4 | import 'antd/dist/antd.css'
  5 | import '@fortawesome/fontawesome-free-webfonts/css/fa-brands.css'
  6 | import '@fortawesome/fontawesome-free-webfonts/css/fa-regular.css'
[1/4] Resolving packages...
error An unexpected error occurred: "https://registry.yarnpkg.com/@mermaid-js%2fmermaid: Not found".

mik@mermaid:~/mermaid-live-editor$ node --version
v12.13.0

It looks like @mermaid-js/mermaid doesn't exist right now. I had to run "yard add mermaid" then change all the references to just mermaid instead of @mermaid-js/mermaid. Diff below. Oh, had to comment out the last change too. I'm sure this is not what the maintainers intended, but it got me up and running for now.

diff --git a/src/components/Edit.js b/src/components/Edit.js
index 76977ad..f16ba1a 100644
--- a/src/components/Edit.js
+++ b/src/components/Edit.js
@@ -2,11 +2,11 @@ import React from 'react'
 import { Row, Col, Input, Icon, Tag, Affix, Card, Divider } from 'antd'
 import { Route } from 'react-router-dom'
 import { Base64 } from 'js-base64'
-import mermaid from '@mermaid-js/mermaid'
+import mermaid from 'mermaid'

 import Error from './Error'
 import Preview from './Preview'
-import pkg from '@mermaid-js/mermaid/package.json'
+import pkg from 'mermaid/package.json'
 import { base64ToState } from '../utils'

 const mermaidVersion = pkg.version
diff --git a/src/components/Preview.js b/src/components/Preview.js
index f1f2653..17429d4 100644
--- a/src/components/Preview.js
+++ b/src/components/Preview.js
@@ -3,7 +3,7 @@ import { Divider, Card } from 'antd'
 import { Link } from 'react-router-dom'
 import moment from 'moment'
 import { Base64 } from 'js-base64'
-import mermaid from '@mermaid-js/mermaid'
+import mermaid from 'mermaid'

 class Preview extends React.Component {
   constructor (props) {
diff --git a/src/components/View.js b/src/components/View.js
index 8b48251..48a6e17 100644
--- a/src/components/View.js
+++ b/src/components/View.js
@@ -1,5 +1,5 @@
 import React from 'react'
-import mermaid from '@mermaid-js/mermaid'
+import mermaid from 'mermaid'

 import { base64ToState } from '../utils'

diff --git a/src/index.js b/src/index.js
index ae44be0..073cd41 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,6 +1,6 @@
 import React from 'react'
 import ReactDOM from 'react-dom'
-import 'mermaid/src/themes/default/index.scss'
+// import 'mermaid/src/themes/default/index.scss'
 import 'antd/dist/antd.css'
 import '@fortawesome/fontawesome-free-webfonts/css/fa-brands.css'
 import '@fortawesome/fontawesome-free-webfonts/css/fa-regular.css'