Installing mermaid on svelte

Question

I'm trying to install Mermaid with Svelte to make graphs. So I did the following:

npm install mermaid

Then I get the following:

npm WARN svelte-app@1.0.0 No repository field.
npm WARN svelte-app@1.0.0 No license field.

+ mermaid@8.5.2
updated 1 package and audited 142 packages in 5.939s

And then when I try to run my server, I get:

bundles src/main.js → public/build/bundle.js...
[!] Error: Could not resolve './Mermaid.svelte' from src/pages/Statistics.svelte
Error: Could not resolve './Mermaid.svelte' from src/pages/Statistics.svelte
    at error (/Users/evgeniyanagornaya/projects/anyhow/node_modules/rollup/dist/shared/node-entry.js:5400:30)
    at ModuleLoader.handleResolveId (/Users/evgeniyanagornaya/projects/anyhow/node_modules/rollup/dist/shared/node-entry.js:12410:24)
    at ModuleLoader.<anonymous> (/Users/evgeniyanagornaya/projects/anyhow/node_modules/rollup/dist/shared/node-entry.js:12298:30)
    at Generator.next (<anonymous>)
    at fulfilled (/Users/evgeniyanagornaya/projects/anyhow/node_modules/rollup/dist/shared/node-entry.js:38:28)

Can anybody please tell me what is going on and how I can fix this? Thank you!

your error indicates there is no such file as `./Mermaid.svelte` — Stephane Vanraes, Jul 10 '20 at 09:00

score 3 · Accepted Answer · answered Jul 11 '20 at 08:44

As Stephane said, it looks like you are trying to import a file called Mermaid.svelte which cannot be found. It doesn't look like an installation issue. I have tried mermaid out for myself and it seems to work without issue. Both with parcel and rollup. You can actually use the mermaid examples with minimal changes. However, I'd suggest binding to specific nodes:

<script>
    import mermaid from 'mermaid';
    import { onMount } from 'svelte';

    let graph = null;
    let gantt = null;

    mermaid.initialize({
        startOnLoad: false,

        theme: 'forest',
        gantt: { axisFormatter: [
            ['%Y-%m-%d', (d) => {
                return d.getDay() === 1
            }]
        ] }
    });

    onMount(() => {
        mermaid.init([ graph, gantt ]);
    });
</script>

<main>
    <pre bind:this={graph}>
graph LR
A-->B
    </pre>
    <pre bind:this={gantt}>
gantt
title A Gantt Diagram
dateFormat  YYYY-MM-DD
section Section
A task           :a1, 2014-01-01, 30d
Another task     :after a1  , 20d
section Another
Task in sec      :2014-01-12  , 12d
another task      : 24d
    </pre>
</main>

Unfortunately, this doesn't work in the REPL because it has trouble importing the d3 dependency.

Installing mermaid on svelte

1 Answers1