Uncaught (in promise) SyntaxError: The requested module '/@fs/docs2/node_modules/.pnpm/dayjs@1.11.10/node_modules/dayjs/dayjs.min.js?v=9f3853a2' does not provide an export named 'default' (at mermaid-04fb0060.js?v=9f3853a2:2:8)

aoleou commented 8 months ago

Hi, I just need to use mermaid in vuepress. And I try to simply to add mermaid of vuepress-plugin-md-enhance to https://github.com/vuepress/docs, and unfortunately get error.

detailed proceduces

package.json

add vuepress-plugin-md-enhance and mermaid denpendences

{
  "name": "@vuepress/docs",
  "version": "2.0.0-rc.0",
  "private": true,
  "type": "module",
  "scripts": {
    "docs:build": "vuepress-cli build docs --clean-cache --clean-temp",
    "docs:build-webpack": "DOCS_BUNDLER=webpack pnpm docs:build",
    "docs:clean": "rimraf docs/.vuepress/.temp docs/.vuepress/.cache docs/.vuepress/dist",
    "docs:dev": "vuepress-cli dev docs --clean-cache --clean-temp",
    "docs:dev-webpack": "DOCS_BUNDLER=webpack pnpm docs:dev",
    "docs:serve": "anywhere -s -h localhost -d docs/.vuepress/dist",
    "format": "prettier --write .",
    "lint": "eslint --ext .cjs,.js,.ts,.vue . && prettier --check .",
    "release": "pnpm release:check && pnpm release:bump",
    "release:bump": "bumpp --commit \"build: publish v%s\"",
    "release:check": "pnpm lint && pnpm clean && pnpm build"
  },
  "commitlint": {
    "extends": [
      "@commitlint/config-conventional"
    ]
  },
  "lint-staged": {
    "**/*": "prettier --write --ignore-unknown",
    "*.{cjs,js,ts,vue}": "eslint --fix",
    "package.json": "sort-package-json"
  },
  "prettier": "prettier-config-vuepress",
  "dependencies": {
    "@vuepress/bundler-vite": "2.0.0-rc.0",
    "@vuepress/bundler-webpack": "2.0.0-rc.0",
    "@vuepress/cli": "2.0.0-rc.0",
    "@vuepress/client": "2.0.0-rc.0",
    "@vuepress/core": "2.0.0-rc.0",
    "@vuepress/plugin-back-to-top": "2.0.0-rc.0",
    "@vuepress/plugin-docsearch": "2.0.0-rc.0",
    "@vuepress/plugin-external-link-icon": "2.0.0-rc.0",
    "@vuepress/plugin-google-analytics": "2.0.0-rc.0",
    "@vuepress/plugin-medium-zoom": "2.0.0-rc.0",
    "@vuepress/plugin-nprogress": "2.0.0-rc.0",
    "@vuepress/plugin-pwa-popup": "2.0.0-rc.0",
    "@vuepress/plugin-register-components": "2.0.0-rc.0",
    "@vuepress/plugin-search": "2.0.0-rc.0",
    "@vuepress/plugin-shiki": "2.0.0-rc.0",
    "@vuepress/theme-default": "2.0.0-rc.0",
    "@vuepress/utils": "2.0.0-rc.0",
    "anywhere": "^1.6.0",
    "sass-loader": "^13.3.3",
    "vue": "3.3.13",
    "mermaid": "^10.7.0"
  },
  "devDependencies": {
    "@commitlint/cli": "^18.4.3",
    "@commitlint/config-conventional": "^18.4.3",
    "bumpp": "^9.2.1",
    "eslint": "^8.56.0",
    "eslint-config-vuepress": "^4.10.0",
    "eslint-config-vuepress-typescript": "^4.10.0",
    "husky": "^8.0.3",
    "lint-staged": "^15.2.0",
    "prettier": "^3.1.1",
    "prettier-config-vuepress": "^4.4.0",
    "rimraf": "^5.0.5",
    "sort-package-json": "^2.6.0",
    "tsconfig-vuepress": "^4.5.0",
    "typescript": "^5.3.3",
    "vuepress-plugin-md-enhance": "2.0.0-rc.11"
  },
  "packageManager": "pnpm@8.13.1",
  "engines": {
    "node": ">=18.16.0"
  }
}

config.ts

add mermaid configure

    mdEnhancePlugin({
      codetabs: true,
      mermaid: true,
    }),

in bellow

import { createRequire } from 'node:module'
import process from 'node:process'
import { viteBundler } from '@vuepress/bundler-vite'
import { webpackBundler } from '@vuepress/bundler-webpack'
import { defineUserConfig } from '@vuepress/cli'
import { docsearchPlugin } from '@vuepress/plugin-docsearch'
import { googleAnalyticsPlugin } from '@vuepress/plugin-google-analytics'
import { registerComponentsPlugin } from '@vuepress/plugin-register-components'
import { shikiPlugin } from '@vuepress/plugin-shiki'
import { defaultTheme } from '@vuepress/theme-default'
import { getDirname, path } from '@vuepress/utils'
import { mdEnhancePlugin } from "vuepress-plugin-md-enhance";
import {
  head,
  navbarEn,
  navbarZh,
  sidebarEn,
  sidebarZh,
} from './configs/index.js'

const __dirname = getDirname(import.meta.url)
const require = createRequire(import.meta.url)
const isProd = process.env.NODE_ENV === 'production'

export default defineUserConfig({
  // set site base to default value
  base: '/',

  // extra tags in `<head>`
  head,

  // site-level locales config
  locales: {
    '/': {
      lang: 'en-US',
      title: 'VuePress',
      description: 'Vue-powered Static Site Generator',
    },
    '/zh/': {
      lang: 'zh-CN',
      title: 'VuePress',
      description: 'Vue 驱动的静态网站生成器',
    },
  },

  // specify bundler via environment variable
  bundler:
    process.env.DOCS_BUNDLER === 'webpack' ? webpackBundler() : viteBundler(),

  // configure default theme
  theme: defaultTheme({
    logo: '/images/hero.png',
    repo: 'vuepress/docs',
    docsDir: 'docs',

    // theme-level locales config
    locales: {
      /**
       * English locale config
       *
       * As the default locale of @vuepress/theme-default is English,
       * we don't need to set all of the locale fields
       */
      '/': {
        // navbar
        navbar: navbarEn,
        // sidebar
        sidebar: sidebarEn,
        // page meta
        editLinkText: 'Edit this page on GitHub',
      },

      /**
       * Chinese locale config
       */
      '/zh/': {
        // navbar
        navbar: navbarZh,
        selectLanguageName: '简体中文',
        selectLanguageText: '选择语言',
        selectLanguageAriaLabel: '选择语言',
        // sidebar
        sidebar: sidebarZh,
        // page meta
        editLinkText: '在 GitHub 上编辑此页',
        lastUpdatedText: '上次更新',
        contributorsText: '贡献者',
        // custom containers
        tip: '提示',
        warning: '注意',
        danger: '警告',
        // 404 page
        notFound: [
          '这里什么都没有',
          '我们怎么到这来了？',
          '这是一个 404 页面',
          '看起来我们进入了错误的链接',
        ],
        backToHome: '返回首页',
        // a11y
        openInNewWindow: '在新窗口打开',
        toggleColorMode: '切换颜色模式',
        toggleSidebar: '切换侧边栏',
      },
    },

    themePlugins: {
      // only enable git plugin in production mode
      git: isProd,
      // use shiki plugin in production mode instead
      prismjs: !isProd,
    },
  }),

  // configure markdown
  markdown: {
    importCode: {
      handleImportPath: (importPath) => {
        // handle @vuepress packages import path
        if (importPath.startsWith('@vuepress/')) {
          const packageName = importPath.match(/^(@vuepress\/[^/]*)/)![1]
          return importPath
            .replace(
              packageName,
              path.dirname(require.resolve(`${packageName}/package.json`)),
            )
            .replace('/src/', '/lib/')
            .replace(/hotKey\.ts$/, 'hotKey.d.ts')
        }
        return importPath
      },
    },
  },

  // use plugins
  plugins: [
    docsearchPlugin({
      appId: '34YFD9IUQ2',
      apiKey: '9a9058b8655746634e01071411c366b8',
      indexName: 'vuepress',
      searchParameters: {
        facetFilters: ['tags:v2'],
      },
      locales: {
        '/zh/': {
          placeholder: '搜索文档',
          translations: {
            button: {
              buttonText: '搜索文档',
              buttonAriaLabel: '搜索文档',
            },
            modal: {
              searchBox: {
                resetButtonTitle: '清除查询条件',
                resetButtonAriaLabel: '清除查询条件',
                cancelButtonText: '取消',
                cancelButtonAriaLabel: '取消',
              },
              startScreen: {
                recentSearchesTitle: '搜索历史',
                noRecentSearchesText: '没有搜索历史',
                saveRecentSearchButtonTitle: '保存至搜索历史',
                removeRecentSearchButtonTitle: '从搜索历史中移除',
                favoriteSearchesTitle: '收藏',
                removeFavoriteSearchButtonTitle: '从收藏中移除',
              },
              errorScreen: {
                titleText: '无法获取结果',
                helpText: '你可能需要检查你的网络连接',
              },
              footer: {
                selectText: '选择',
                navigateText: '切换',
                closeText: '关闭',
                searchByText: '搜索提供者',
              },
              noResultsScreen: {
                noResultsText: '无法找到相关结果',
                suggestedQueryText: '你可以尝试查询',
                reportMissingResultsText: '你认为该查询应该有结果？',
                reportMissingResultsLinkText: '点击反馈',
              },
            },
          },
        },
      },
    }),
    googleAnalyticsPlugin({
      // we have multiple deployments, which would use different id
      id: process.env.DOCS_GA_ID ?? '',
    }),
    registerComponentsPlugin({
      componentsDir: path.resolve(__dirname, './components'),
    }),
    mdEnhancePlugin({
      codetabs: true,
      mermaid: true,
    }),
    // only enable shiki plugin in production mode
    isProd
      ? shikiPlugin({
        langs: ['bash', 'diff', 'json', 'md', 'ts', 'vue'],
        theme: 'dark-plus',
      })
      : [],
  ],
})

add mermaid doc:

...
# Assets

flowchart LR
A[Hard] -->|Text| B(Round)
B --> C{Decision}
C -->|One| D[Result 1]
C -->|Two| E[Result 2]

...

install dependences and start app
```
pnpm install && pnpm run docs:dev
```

and get error like bellow:

error in the web

Uncaught (in promise) SyntaxError: The requested module '/@fs/docs2/node_modules/.pnpm/dayjs@1.11.10/node_modules/dayjs/dayjs.min.js?v=9f3853a2' does not provide an export named 'default' (at mermaid-04fb0060.js?v=9f3853a2:2:8)

and the loading animation is always displayed, and then the content cannot be loaded.

error in the terminal

 WARN  7 deprecated subdependencies found: resolve-url@0.2.1, rollup-plugin-terser@7.0.2, source-map-resolve@0.5.3, source-map-url@0.4.1, sourcemap-codec@1.4.8, urix@0.1.0, webpack-chain@6.5.1
Already up to date
Progress: resolved 1329, reused 1295, downloaded 0, added 0, done
Done in 4.1s

> @vuepress/docs@2.0.0-rc.0 docs:dev /docs2
> vuepress-cli dev docs --clean-cache --clean-temp

warning [@vuepress/plugin-google-analytics] 'id' is required
vuepress-plugin-md-enhance:  × No VuePress package is found.
vuepress-plugin-sass-palette:  × No VuePress package is found.

@Mister-Hope Master Hope plz help.

Mister-Hope commented 8 months ago

Install vuepress

aoleou commented 8 months ago

pnpm install vuepress

output:

 WARN  22 deprecated subdependencies found: @babel/plugin-proposal-class-properties@7.18.6, chokidar@2.1.8, consolidate@0.15.1, docsearch.js@2.6.3, figgy-pudding@3.5.2, fsevents@1.2.13, har-validator@5.1.5, highlight.js@9.18.5, mkdirp@0.3.0, request@2.88.2, resolve-url@0.2.1, rollup-plugin-terser@7.0.2, source-map-resolve@0.5.3, source-map-url@0.4.1, sourcemap-codec@1.4.8, stable@0.1.8, svgo@1.3.2, urix@0.1.0, uuid@3.4.0, vue@2.7.16, webpack-chain@4.12.1, webpack-chain@6.5.1
Packages: +659 -28
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++------------
Progress: resolved 1879, reused 1319, downloaded 509, added 637, done
node_modules/.pnpm/core-js@3.35.1/node_modules/core-js: Running postinstall script, done in 212ms
node_modules/.pnpm/esbuild@0.14.7/node_modules/esbuild: Running postinstall script, done in 246ms
node_modules/.pnpm/vuepress@1.9.10_prettier@3.2.4/node_modules/vuepress: Running postinstall script, done in 158ms

dependencies:
+ vuepress 1.9.10

 WARN  Issues with peer dependencies found
.
├─┬ vuepress-plugin-md-enhance 2.0.0-rc.11
│ ├── ✕ unmet peer vuepress@2.0.0-rc.0: found 1.9.10
│ └─┬ vuepress-plugin-sass-palette 2.0.0-rc.11
│   ├── ✕ unmet peer vuepress@2.0.0-rc.0: found 1.9.10
│   └─┬ vuepress-shared 2.0.0-rc.11
│     └── ✕ unmet peer vuepress@2.0.0-rc.0: found 1.9.10
└─┬ vuepress 1.9.10
  └─┬ @vuepress/core 1.9.10
    └─┬ css-loader 2.1.1
      └── ✕ unmet peer webpack@^4.0.0: found 5.89.0

Done in 35.9s

pnpm install && pnpm run docs:dev

output:

Lockfile is up to date, resolution step is skipped
Already up to date
Done in 2.7s

> @vuepress/docs@2.0.0-rc.0 docs:dev /docs2
> vuepress-cli dev docs --clean-cache --clean-temp

warning [@vuepress/plugin-google-analytics] 'id' is required
√ Cleaning temp - done in 53ms
√ Cleaning cache - done in 7ms
vuepress-plugin-md-enhance:  ‼ Deprecated code-group syntax foundin zh/reference/default-theme/markdown.md, you should use code tabs instead. See https://plugin-md-enhance.vuejs.press/guide/code-tabs.html
vuepress-plugin-md-enhance:  ‼ Deprecated code-group syntax foundin reference/default-theme/markdown.md, you should use code tabs instead. See https://plugin-md-enhance.vuejs.press/guide/code-tabs.html
√ Initializing and preparing data - done in 826ms
Port 8080 is in use, trying another one...

  vite v5.0.12 dev server running at:

  ➜  Local:   http://localhost:8081/
  ➜  Network: http://192.168.0.45:8081/

mermaid content :

and the loading animation is always displayed

Mister-Hope commented 8 months ago

install the same version of vuepress like other vuepress pkgs.

The using of @vuepress/cli is undocument, so this is pretty werid for you to have advanced usage out of docs, while still questioning basics

aoleou commented 8 months ago

Thanks for reply, and sorry to bother you and spend your time.

install the same version of vuepress like other vuepress pkgs.

I do this try, and not succeed. And do so many try to attempts to match versions of various packages, but failed.

The using of @vuepress/cli is undocument, so this is pretty werid for you to have advanced usage out of docs, while still questioning basics

Actully I am not good at frontend, I just use the code I find in the github repo. try it, and test it, maybe succeed or failed. like start the vuepress, now I find at least three way:

vuepress-vite dev docs --clean-cache --clean-temp

vuepress-cli dev docs --clean-cache --clean-temp

vuepress dev docs

and I do not exactly know what is difference of that and makes me feel very confused. There are still many things that confuse me about the frontend...

Back to the problem

this is the reproduction code https://github.com/aoleou/docs2/blob/main/package.json I currently use. And the demand is use mermaid in the docs. So if it's convenient for you, please show me the code how to do it or tell me how to correct it. Thank you so much.

Mister-Hope commented 8 months ago

replace vuepress(-cli) dev and vuepress(-cli) build with vuepress-vite dev/build in commands
add @vuepress/bundler-vite@next in your project
remove @vuperss/(core|cli|client|shared)
Try examing your plugins, if you do not import them in config file, then remove them.
correct all exsisting @vuepreess/xxx to vuepress/xxx
Upgrade all deps to greatest version

aoleou commented 8 months ago

感谢大佬回复

replace vuepress(-cli) dev and vuepress(-cli) build with vuepress-vite dev/build in commands add @vuepress/bundler-vite@next in your project remove @vuperss/(core|cli|client|shared) Try examing your plugins, if you do not import them in config file, then remove them. correct all exsisting @vuepreess/xxx to vuepress/xxx Upgrade all deps to greatest version

我觉得, 这个可能不是报错的根本原因, 而且greatest version无法实操,就是因为不知道greatest version, 所以才这么痛苦的折腾着. 然后, 我发现即使是 https://github.com/vuepress-theme-hope/vuepress-theme-hope/tree/main/demo/md-enhance 官方项目的demo mv md-enhance /test 就是把md-enhance文件夹移动到项目之外文件夹 /test , 然后把

"vuepress-plugin-md-enhance": "workspace:*" 换成

"vuepress-plugin-md-enhance": "2.0.0-rc.11",

且package.json 的 devDependencies "@vue/repl": "3.4.0", "@vuepress/bundler-vite": "2.0.0-rc.2", "@vuepress/bundler-webpack": "2.0.0-rc.2", "@vuepress/theme-default": "2.0.0-rc.1", "chart.js": "4.4.1", "echarts": "5.4.3", "echarts-wordcloud": "2.1.0", "katex": "0.16.9", "kotlin-playground": "1.30.0", "markmap-lib": "0.15.8", "markmap-toolbar": "0.15.8", "markmap-view": "0.15.8", "mathjax-full": "3.2.2", "mermaid": "10.7.0", "reveal.js": "5.0.4", "sandpack-vue3": "3.1.11", "sass-loader": "14.0.0", "vue": "3.4.15", "vuepress": "2.0.0-rc.2", 的各个依赖的版本号都是固定的, 接着, 我认真看了md-enhance demo 也没有依赖父文件夹的代码, 运行这个demo, 会报错, 这样不算bug吗? 为什么会出现这样让人纠结的报错呢? 应该是有某些包引用了同一个包的不同版本号了吧, 大佬

Mister-Hope commented 8 months ago

我理解:demo目前在库里是正常的，只是你单提出来不正常是吧？

aoleou commented 8 months ago

我理解:demo目前在库里是正常的，只是你单提出来不正常是吧？

是的, 大佬。这个issue讨论的就是这个奇怪的问题。目前看, 这个包dayjs 显示不正常

aoleou commented 8 months ago

大佬, 请问一下, 我说的issue, 项目组有计划解决一下么

Mister-Hope commented 8 months ago

Emm, nope, I believe these could be workaround if you are using pnpm:

install dayjs in your deps
add it to vite optimized deps via addViteOptimizeDepsInclude (see https://shared.vuejs.press/node/bundler.html#vite-related)

If you are using npm, or yarn with hosting, just do step 2 above

Mister-Hope commented 8 months ago

It's hard to fix a non-direct deps issue: mermaid -> dayjs

aoleou commented 8 months ago

没事了, 多谢大佬热情地回复和处理。感谢写了这个非常棒的项目

vuepress-theme-hope / md-enhance-docs