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.
{
"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": "[email protected]",
"engines": {
"node": ">=18.16.0"
}
}
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',
})
: [],
],
})
...
# Assets
flowchart LR
A[Hard] -->|Text| B(Round)
B --> C{Decision}
C -->|One| D[Result 1]
C -->|Two| E[Result 2]
...Uncaught (in promise) SyntaxError: The requested module '/@fs/docs2/node_modules/.pnpm/[email protected]/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.
WARN 7 deprecated subdependencies found: [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected]
Already up to date
Progress: resolved 1329, reused 1295, downloaded 0, added 0, done
Done in 4.1s
> @vuepress/[email protected] 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.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent