emersonbottero / vitepress-plugin-mermaid

Add mermaid support for Vitepress
MIT License
87 stars 20 forks source link

The requested module moment does not provide an export named default #33

Closed luckylooke closed 11 months ago

luckylooke commented 1 year ago

Hi, after installation into my project I am getting error in browser console, running vitepress docs:

Uncaught SyntaxError: The requested module '...somepath.../node_modules/moment-mini/moment.min.js?v=fabf3af1' does not provide an export named 'default' (at mermaid.core.mjs?v=fabf3af1:7:8)

I have already tried to setup my tsconfig.json, adding

  "compilerOptions": {
    "module": "es6",
    "esModuleInterop": true,
    "moduleResolution": "node",
    "allowJs": true
  },

but didn't fixed... any idea what to try?

Many thanks πŸ™

luckylooke commented 1 year ago

I have created minimal reproduction here: https://stackblitz.com/edit/github-zbjrsg-zc4yzq?file=package.json thanks πŸ™πŸ˜Š

towerhe commented 1 year ago

@luckylooke try to use "mermaid": "9.1.7" instead of the latest version "9.3.0"

daniilguit commented 1 year ago

@towerhe - this does indeed help, thanx.

emersonbottero commented 1 year ago

It should work in the last version. I can duplicate the issue and asked for help from mermaid developers.

emersonbottero commented 1 year ago

And it only throw erros in dev. So. If you need mind map you can use it in build and it should work.

lukastaegert commented 1 year ago

While not ideal, I managed to work around this issue by adding a vite.config.js with

optimizeDeps: { include: ['moment-mini', '@braintree/sanitize-url'] }

as apparently, the CommonJS detection did not work correctly for those dependencies.

wuleninja commented 1 year ago

Hi! I get the same issue with module dayjs right after the install (done today):

Uncaught SyntaxError: The requested module '/node_modules/dayjs/dayjs.min.js?v=d4754311' does not provide an export named 'default' (at mermaid-ae477ddf.js?v=d4754311:2:8)

Does someone knows a workaround?

wuleninja commented 1 year ago

Ok, setting "mermaid": "9.1.7" did the trick for me

a2k42 commented 1 year ago

Slightly different error in console Uncaught SyntaxError: ambiguous indirect export: default but same solution.

When I check to see the source of the problem it is dayjs in the latest version of mermaid 10.0.2? It was coming from moment-mini when I had an earlier version installed.

emersonbottero commented 1 year ago

the solution above should work for vitepress v10.0.0 as long as your chart don't use dates..

the final solution should wait for the dayjs 2.0 to have an official release.. see https://github.com/mermaid-js/mermaid/pull/4153#issuecomment-1460611561

emersonbottero commented 1 year ago

Another change I made that should fix this.. https://github.com/mermaid-js/mermaid/pull/4285 Need to wait for next release to test it.

paschembri commented 1 year ago

For those wondering how to make it work for a fresh install:

The required changes are:

  1. .vitepress/config.ts
  2. package.json

In .vitepress/config.ts

import { defineConfig } from 'vitepress'
import { withMermaid } from "vitepress-plugin-mermaid";

export default withMermaid(
  defineConfig({
    vite: {
      optimizeDeps: { include: ['@braintree/sanitize-url'] },
      resolve: {
          alias: {
            dayjs: 'dayjs/',
          },
        },
    },
...

In package.json devDependencies make sure to have

    "@mermaid-js/mermaid-mindmap": "^9.3.0",
    "mermaid": "^8.14.0",

With the previous modifications I could have both dev and build targets

dspinov commented 1 year ago

Another change I made that should fix this.. mermaid-js/mermaid#4285 Need to wait for next release to test it.

It still is not working, and I see that PR was reverted by the mermaid team on June 1. At the same time, I see in the last commits that the plugin updated deps on mermaid 10. Any ideas on how to make it work? I don't have charts with dates but I can't build my docs with error: "dayjs/dayjs.min.js?v=8dd7652e' does not provide an export named 'default' "

emersonbottero commented 1 year ago

@dspinov It should be working.. but I just discovered it is not pnpm compatible.. can you check using npm?

dspinov commented 11 months ago

Hi @emersonbottero. You are right. I've tested with npm and all is good. This is interesting. I didn't find any related issues about that. I see that dayjs team has mentioned a solution for the same problem by using esModuleInterop in TS. But I don't have TS on the project. Do you know maybe how to do the same with vitejs only?

emersonbottero commented 11 months ago

I added all necessary settings on the package, you can try pnpm install --shamefully-hoist .

What make it to work was this changes

FliPPeDround commented 11 months ago

I added all necessary settings on the package, you can try pnpm install --shamefully-hoist .

What make it to work was this changes

There is a new issue when using 'pnpm install --shamefully-hoist' with the 'mermaid' module.

The requested module '/node_modules/.pnpm/mermaid@10.5.0/node_modules/mermaid/dist/mermaid.core.mjs?v=6f627caa' does not provide an export named 'ExternalDiagramDefinition'

"mermaid": "10.5.0",
"vitepress": "1.0.0-rc.20",
"vitepress-plugin-mermaid": "2.0.15"

I'm uncertain about the solution to this problem. Could you please provide some suggestions?

thanksπŸ’•