Use of alias when importing mermaid

src/code-store.js

@@ -1,6 +1,6 @@
 import { writable } from 'svelte/store';
 // import mermaid from '@mermaid-js/mermaid';
-import mermaid from 'mermaid';
+import mermaid from '@mermaid';
 import { Base64 } from 'js-base64'
 import {push, pop, replace} from 'svelte-spa-router'
 

src/components/Config.svelte

@@ -5,7 +5,7 @@ import { onMount } from 'svelte';
 import {push, pop, replace} from 'svelte-spa-router'
 import { Base64 } from 'js-base64'
 // import mermaid from '@mermaid-js/mermaid';
-import mermaid from 'mermaid';
+import mermaid from '@mermaid';
 import Error from './Error.svelte';
 import { initEditor } from './editor-utils';
 

src/components/Editor.svelte

@@ -5,7 +5,7 @@ import { onMount } from 'svelte';
 import {push, pop, replace} from 'svelte-spa-router'
 import { Base64 } from 'js-base64'
 // import mermaid from '@mermaid-js/mermaid';
-import mermaid from 'mermaid';
+import mermaid from '@mermaid';
 import Error from './Error.svelte';
 import { initEditor } from './editor-utils';
 import 'monaco-editor/esm/vs/editor/browser/controller/coreCommands.js';

src/components/View.svelte

@@ -4,7 +4,7 @@ import { codeErrorStore } from '../code-error-store.js';
 import { configErrorStore } from '../config-error-store.js';
 import { onMount } from 'svelte';
 // import mermaid from '@mermaid-js/mermaid';
-import mermaid from 'mermaid';
+import mermaid from '@mermaid';
 
 const detectType = text => {
   text = text.replace(/^\s*%%.*\n/g, '\n');

webpack.config.js

@@ -10,7 +10,8 @@ module.exports = {
 	},
 	resolve: {
 		alias: {
-			svelte: path.resolve('node_modules', 'svelte')
+			svelte: path.resolve('node_modules', 'svelte'),
+			"@mermaid": 'mermaid'
 		},
 		extensions: ['.mjs', '.js', '.svelte'],
 		mainFields: ['svelte', 'browser', 'module', 'main']