sjwall / mdx-mermaid Goto Github PK
View Code? Open in Web Editor NEWPlug and play Mermaid in MDX
License: MIT License
Plug and play Mermaid in MDX
License: MIT License
Describe the bug
As of version 1.3.2 mdx-mermaid
appears to show the import tag when using NextJS. This error does not occur on mdx-mermaid version 1.2.3.
To Reproduce
// next.config.js
import nextMDX from '@next/mdx'
import remarkMermaid from 'mdx-mermaid'
const withMDX = nextMDX({
extension: /\.mdx?$/,
options: {
remarkPlugins: [remarkMermaid],
rehypePlugins: [],
},
})
export default withMDX({
pageExtensions: ['ts', 'tsx', 'js', 'jsx', 'md', 'mdx'],
})
// example.mdx
# Test header
Expected behavior
MDX import is not shown at top of screen.
Tool chain used:
NextJS 12
Describe the bug
As of unist-util-visit
version 3.0.0, ESM must be used.
When using mdx-mermaid
version 1.1.1 (the current latest release) with unist-util-visit
version 4.1.0 (the current latest release), the build fails with ERR_REQUIRE_ESM
To Reproduce
Set up a simple docusaurus project with mdx-mermaid, then run docusaurus build
Expected behavior
Build should succeed.
Screenshots
n/a
Stack trace
Error [ERR_REQUIRE_ESM]: require() of ES Module /home/candrews/projects/docs/node_modules/unist-util-visit/index.js from /home/candrews/projects/docs/node_modules/mdx-mermaid/lib/mdxast-mermaid.js not supported.
Instead change the require of index.js in /home/candrews/projects/docs/node_modules/mdx-mermaid/lib/mdxast-mermaid.js to a dynamic import() which is available in all CommonJS modules.
at Object.<anonymous> (/home/candrews/projects/docs/node_modules/mdx-mermaid/lib/mdxast-mermaid.js:20:44)
at Object.<anonymous> (/home/candrews/projects/docs/docusaurus.config.js:81:15)
at module.exports (/home/candrews/projects/docs/node_modules/import-fresh/index.js:32:59)
at loadConfig (/home/candrews/projects/docs/node_modules/@docusaurus/core/lib/server/config.js:17:53)
at loadSiteConfig (/home/candrews/projects/docs/node_modules/@docusaurus/core/lib/server/index.js:33:51)
at loadContext (/home/candrews/projects/docs/node_modules/@docusaurus/core/lib/server/index.js:43:69)
at build (/home/candrews/projects/docs/node_modules/@docusaurus/core/lib/commands/build.js:48:52)
at Command.<anonymous> (/home/candrews/projects/docs/node_modules/@docusaurus/core/bin/docusaurus.js:54:5)
at Command.listener [as _actionHandler] (/home/candrews/projects/docs/node_modules/@docusaurus/core/node_modules/commander/index.js:413:31)
at Command._parseCommand (/home/candrews/projects/docs/node_modules/@docusaurus/core/node_modules/commander/index.js:914:14)
at Command._dispatchSubcommand (/home/candrews/projects/docs/node_modules/@docusaurus/core/node_modules/commander/index.js:865:18)
at Command._parseCommand (/home/candrews/projects/docs/node_modules/@docusaurus/core/node_modules/commander/index.js:882:12)
at Command.parse (/home/candrews/projects/docs/node_modules/@docusaurus/core/node_modules/commander/index.js:717:10)
at run (/home/candrews/projects/docs/node_modules/@docusaurus/core/bin/docusaurus.js:244:7)
at Object.<anonymous> (/home/candrews/projects/docs/node_modules/@docusaurus/core/bin/docusaurus.js:251:1)
Tool chain used:
npm 8.0.0, node v16.11.1
Additional context
Describe the bug
Running
npx create-docusaurus@latest test-code classic --typescript
# or
npx create-docusaurus@latest test-code classic
Creates a website, that has another config strcture, than in examples. While look similar, seems there is no "remarkPlugins" in JS definition. As there is no createConfig() and other changes.
Experiments with importing mdxMermaid and adding to remarkPlugins got errors like:
config
presets: [
[
'classic',
/** @type {import('@docusaurus/preset-classic').Options} */
({
docs: {
remarkPlugins: [mdxMermaid.default],
errors:
> docusaurus start
[INFO] Starting the development server...
[ERROR] ValidationError: "beforeDefaultRemarkPlugins[0]" must not be a sparse array item
[INFO] Docusaurus version: 2.1.0
Node version: v16.17.1
I also tried to npm instlal mdx-markdown@^2.0.0. but it was not found in npm.
related to #64
Version
1.3.2
Describe the bug
The issue started as "dark theme does not work".
To Reproduce
Expected behavior
Uses dark theme.
Actual behavior
Uses light theme.
Additional context
I debugged it a bit and it seems that configSrc
there is always undefined
:
Line 43 in 5b22959
This does not seem correct, so in microsoft/griffel#217 I monkey patched it and then it worked, but this does not seem like a proper solution.
Please let me know if it's a setup problem, but in sandbox (https://stackblitz.com/edit/github-pwuwsv-hvqsdq) I have a config exactly like in docs.
Describe the bug
Itβs not possible to use mdx-mermaid in NextJS. Error is:
error - Error [ERR_REQUIRE_ESM]: Must use import to load ES Module: /home/max/test/test/node_modules/d3/src/index.js
require() of ES modules is not supported.
require() of /home/max/test/test/node_modules/d3/src/index.js from /home/max/test/test/node_modules/mermaid/dist/mermaid.core.js is an ES module file as it is a .js file whose nearest parent package.json contains "type": "module" which defines all .js files in that package scope as ES modules.
Instead rename index.js to end in .cjs, change the requiring code to use import(), or remove "type": "module" from /home/max/test/test/node_modules/d3/package.json.
at new NodeError (internal/errors.js:322:7)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:1102:13)
at Module.load (internal/modules/cjs/loader.js:950:32)
at Function.Module._load (internal/modules/cjs/loader.js:790:12)
at Module.require (internal/modules/cjs/loader.js:974:19)
at require (internal/modules/cjs/helpers.js:101:18)
at Object.d3 (/home/max/test/test/node_modules/mermaid/dist/mermaid.core.js:36138:18)
at __webpack_require__ (/home/max/test/test/node_modules/mermaid/dist/mermaid.core.js:36381:41)
at Object../src/mermaidAPI.js (/home/max/test/test/node_modules/mermaid/dist/mermaid.core.js:31599:60)
at __webpack_require__ (/home/max/test/test/node_modules/mermaid/dist/mermaid.core.js:36381:41) {
code: 'ERR_REQUIRE_ESM',
page: '/'
}
To Reproduce
Steps to reproduce the behaviour including how the file is processed:
npx create-next-app@latest
npm i mdx-mermaid mermaid
import { Mermaid } from 'mdx-mermaid/Mermaid';
<Mermaid chart={`graph TD;
A-->B;
A-->C;
B-->D;
C-->D;
`} />
Expected behavior
Loading normally and showing graph.
Stack trace
error - Error [ERR_REQUIRE_ESM]: Must use import to load ES Module: /home/max/test/test/node_modules/d3/src/index.js
require() of ES modules is not supported.
require() of /home/max/test/test/node_modules/d3/src/index.js from /home/max/test/test/node_modules/mermaid/dist/mermaid.core.js is an ES module file as it is a .js file whose nearest parent package.json contains "type": "module" which defines all .js files in that package scope as ES modules.
Instead rename index.js to end in .cjs, change the requiring code to use import(), or remove "type": "module" from /home/max/test/test/node_modules/d3/package.json.
at new NodeError (internal/errors.js:322:7)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:1102:13)
at Module.load (internal/modules/cjs/loader.js:950:32)
at Function.Module._load (internal/modules/cjs/loader.js:790:12)
at Module.require (internal/modules/cjs/loader.js:974:19)
at require (internal/modules/cjs/helpers.js:101:18)
at Object.d3 (/home/max/test/test/node_modules/mermaid/dist/mermaid.core.js:36138:18)
at __webpack_require__ (/home/max/test/test/node_modules/mermaid/dist/mermaid.core.js:36381:41)
at Object../src/mermaidAPI.js (/home/max/test/test/node_modules/mermaid/dist/mermaid.core.js:31599:60)
at __webpack_require__ (/home/max/test/test/node_modules/mermaid/dist/mermaid.core.js:36381:41) {
code: 'ERR_REQUIRE_ESM',
page: '/'
}
Tool chain used:
NexJS latest, see steps to reproduce
Hi, I saw the following error message while using vite
to build a React app that imports the [email protected]
package:
$ npm run build
> myapp@0.0.0 build
> tsc && vite build
src/components/Diagram.tsx:3:25 - error TS7016: Could not find a declaration file for module 'mdx-mermaid/lib/Mermaid'. '/Users/me/myapp/node_modules/mdx-mermaid/lib/Mermaid.mjs' implicitly has an 'any' type.
There are types at '/Users/me/myapp/node_modules/mdx-mermaid/lib/Mermaid.d.ts', but this result could not be resolved when respecting package.json "exports". The 'mdx-mermaid' library may need to update its package.json or typings.
3 import { Mermaid } from "mdx-mermaid/lib/Mermaid";
~~~~~~~~~~~~~~~~~~~~~~~~~
Found 1 error in src/components/Diagram.tsx:3
Other information about my environment:
$ vite --version
vite/4.5.0 darwin-arm64 node-v20.8.1
$ node --version
v20.8.1
$ npm --version
10.1.0
$ tsc --version
Version 5.2.2
As a workaround, I used patch-package to patch the package locally.
Here's a diff showing the patch:
diff --git a/node_modules/mdx-mermaid/package.json b/node_modules/mdx-mermaid/package.json
index 5168c23..2d1b998 100644
--- a/node_modules/mdx-mermaid/package.json
+++ b/node_modules/mdx-mermaid/package.json
@@ -7,15 +7,18 @@
"exports": {
".": {
"require": "./lib/mdxast-mermaid.cjs",
- "import": "./lib/mdxast-mermaid.mjs"
+ "import": "./lib/mdxast-mermaid.mjs",
+ "types": "./lib/mdxast-mermaid.d.ts"
},
"./Mermaid": {
"require": "./lib/Mermaid.cjs",
- "import": "./lib/Mermaid.mjs"
+ "import": "./lib/Mermaid.mjs",
+ "types": "./lib/Mermaid.d.ts"
},
"./lib/Mermaid": {
"require": "./lib/Mermaid.cjs",
- "import": "./lib/Mermaid.mjs"
+ "import": "./lib/Mermaid.mjs",
+ "types": "./lib/Mermaid.d.ts"
}
},
"author": "Sam Wall ([email protected])",
I don't have any experience creating TypeScript or JavaScript packages. I wanted to pass along this information in case the maintainers and other people found it useful.
Here's a link to the GitHub Issue that led me to this workaround: microsoft/TypeScript#52363
This issue body was partially generated by patch-package.
Describe the bug
A clear and concise description of what the bug is.
To Reproduce
Steps to reproduce the behaviour including how the markdown file is processed:
This is my docusaurus.config.js. Notice that I
presets: [
[
"@docusaurus/preset-classic",
{
docs: {
remarkPlugins: [
[require("mdx-mermaid"), { mermaid: { theme: "dark", themeVariables: { fontFamily: '"Arial"' } } }],
],
I have a diagram like so:
```mermaid
graph TD;
A-->B;
A-->C;
B-->D;
C-->D;
```
Everything is fine.
Notice that the fontFamily is still the default:
Expected behavior
A clear and concise description of what you expected to happen.
The font family should be "Arial"
as defined the the docusaurus.config.js
Screenshots
If applicable, add screenshots to help explain your problem.
See above
Stack trace
If applicable, add the stack trace for the exception thrown to help trace your problem.
There is no exception
Tool chain used:
What tool chain is used.
Hi! π
Firstly, thanks for your work on this project! π
When I run cra project with this plugin, it told me that can't resolve mdx-mermaid/Mermaid
.
As I noticed that the exports feature in package.json is currently not supported
Here is the diff that solved my problem:
diff --git a/node_modules/mdx-mermaid/lib/mdxast-mermaid.js b/node_modules/mdx-mermaid/lib/mdxast-mermaid.js
index dbc38e4..e9872d4 100644
--- a/node_modules/mdx-mermaid/lib/mdxast-mermaid.js
+++ b/node_modules/mdx-mermaid/lib/mdxast-mermaid.js
@@ -33,7 +33,7 @@ function plugin(config) {
// See if there is already an import for the Mermaid component
let importFound = false;
unist_util_visit_1.default(ast, { type: 'import' }, (node) => {
- if (/\s*import\s*{\s*Mermaid\s*}\s*from\s*'mdx-mermaid\/Mermaid'\s*;?\s*/.test(node.value)) {
+ if (/\s*import\s*{\s*Mermaid\s*}\s*from\s*'mdx-mermaid\/lib\/Mermaid'\s*;?\s*/.test(node.value)) {
importFound = true;
return unist_util_visit_1.default.EXIT;
}
@@ -42,7 +42,7 @@ function plugin(config) {
if (!importFound) {
ast.children.splice(0, 0, {
type: 'import',
- value: 'import { Mermaid } from \'mdx-mermaid/Mermaid\';'
+ value: 'import { Mermaid } from \'mdx-mermaid/lib/Mermaid\';'
});
}
}
This issue body was partially generated by patch-package.
Hello @sjwall, thanks for your work !
Describe the bug
I want to use mdx-mermaid with @mdx-js/mdx but there is no svg output.
To Reproduce
git clone https://github.com/johackim/test-mdx-mermaid
cd test-mdx-mermaid
yarn
npm run build
node ./dist/esm/index.mjs
// index.js
import fs from 'fs';
import { runSync, compile } from '@mdx-js/mdx';
import * as runtime from 'react/jsx-runtime';
import { renderToStaticMarkup } from 'react-dom/server';
(async () => {
const mdxMermaid = await import('mdx-mermaid');
const markdown = fs.readFileSync('./example.md', 'utf-8');
const code = String(await compile(markdown, {
outputFormat: 'function-body',
remarkPlugins: [mdxMermaid.default],
}));
const { default: Content } = runSync(code, runtime);
const html = renderToStaticMarkup(Content());
console.log(html);
})();
Actual output :
import { Mermaid } from 'mdx-mermaid/lib/Mermaid';
<h2>Framework AARRR</h2>
<Mermaid config={{}} chart={`graph LR; Acquisition-->Activation-->RΓ©tention-->Recommandation-->Revenu`} />
Expected behavior
I want to get a svg directly :
<h2>Framework AARRR</h2>
<svg foo="bar"></svg>
How to do it ?
Describe the bug
The diagrams do not match the theme when it's toggles with docusaurus
To Reproduce
Steps to reproduce the behavior including how the markdown file is processed:
Expected behavior
I would expect the diagrams theme to match the toggled theme.
Describe the bug
When using mermaid diagrams inside tabs, only the initially shown tab renders the mermaid diagram, on the other tabs, the diagram is not shown. The result is the same for the compiled page and for the page running with the dev-server.
To Reproduce
Insert the following code to a mdx page in docusaurus (V2.1.0):
import Tabs from '@theme/Tabs';
import TabItem from '@theme/TabItem';
<Tabs>
<TabItem value="tab-a">
The following mermaid diagram is shown:
```mermaid
graph LR
a ---> c(10)
b ---> c(10)
```
</TabItem>
<TabItem value="tab-b">
This mermaid diagram is not displayed:
```mermaid
graph LR
d ---> z(42)
e ---> z(42)
```
</TabItem>
</Tabs>
Expected behavior
Mermaid diagrams are rendered correctly on each tab
Screenshots
Tool chain used:
Azure Devops (ADO) wiki supports mermaid but with syntax to identify the block using ::: instead of βββ.
I canβt find a way to make this replacement when the system is compiling the site.
I would ask if there is the possibility to add support also to this block description.
This is the description of ADO Wiki usage of mermaid: Link
Describe the bug
If you defined themeVariables
to customize colors, fonts, etc., the customizations are only applied to the first diagram in the Markdown document. The second diagram is rendered with the default theme.
To Reproduce
remarkPlugins: [
[
require("mdx-mermaid"),
{
mermaid: {
theme: "base",
themeVariables: {
primaryColor: "lime",
},
},
},
],
],
```mermaid
graph TD;
A-->B;
A-->C;
B-->D;
C-->D;
```
```mermaid
graph TD;
A-->B;
A-->C;
B-->D;
C-->D;
```
yarn start
Expected behavior
All diagrams should share the same theme configuration.
Stack trace
N/A
Tool chain used:
Docusaurus 2.0.0-beta.9, mdx-mermaid 1.2.1
Additional context
When experimenting with different colors, you have to CTRL-C to break yarn start
and then run it again to see the changes.
Hi,
could anyone explain the difference of
remarkPlugins: [mdxMermaid.default],
and
remarkPlugins: [mdxMermaid],
?
merci
Describe the bug
the module can't resolve
versions
"dependencies": {
"@docusaurus/core": "2.0.0-beta.4",
"@docusaurus/preset-classic": "2.0.0-beta.4",
"@mdx-js/react": "^1.6.21",
"@svgr/webpack": "^5.5.0",
"clsx": "^1.1.1",
"file-loader": "^6.2.0",
"hast-util-is-element": "1.1.0",
"mdx-mermaid": "^1.0.0",
"prism-react-renderer": "^1.2.1",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"rehype-katex": "4",
"remark-math": "3",
"url-loader": "^4.1.1"
},
Expected behavior
A clear and concise description of what you expected to happen.
Screenshots
If applicable, add screenshots to help explain your problem.
Module not found: Error: Can't resolve 'mermaid' in '/Users/apple/repo/dosasm/node_modules/mdx-mermaid/lib'
Did you mean './mermaid'?
Requests that should resolve in the current directory need to start with './'.
Requests that start with a name are treated as module requests and resolve within module directories (/Users/apple/repo/dosasm/node_modules/@docusaurus/core/node_modules, node_modules, /Users/apple/repo/dosasm/node_modules).
If changing the source code is not an option there is also a resolve options called 'preferRelative' which tries to resolve these kind of requests in the current directory too.
my config
presets: [
[
'@docusaurus/preset-classic',
{
docs: {
path:'docs',
sidebarPath: require.resolve('./sidebars.js'),
remarkPlugins: [mermaid,math],
rehypePlugins: [katex],
// Please change this to your repo.
editUrl:
'https://github.com/dosasm/dosasm/edit/master/website/',
},
blog: {
showReadingTime: true,
// Please change this to your repo.
editUrl:
'https://github.com/dosasm/dosasm/edit/master/website/blog/',
},
theme: {
customCss: require.resolve('./src/css/custom.css'),
},
},
],
],
Additional context
Add any other context about the problem here.
Describe the solution you'd like
I am the maintainer of remark-mermaidjs
and I recently stumbled upon this project. remark-mermaidjs
already has several advantages over mdx-mermaid
:
I propose to work together on remark-mermaidjs
instead of competing.
remark-mermaidjs
doesnβt support a React component to render mermaid diagrams. That can still be developed separately.
Describe alternatives you've considered
remark-mermaidjs
as an alternative in the readme.Additional context
N/A
Describe the bug
Running in the repo itself, I made a example.md file that looked like:
## Framework AARRR
Some content
\`\`\`mermaid
graph TD;
A-->B;
A-->C;
B-->D;
C-->D;
\`\`\`
And some more:
\`\`\`mermaid
graph TD;
A-->B;
A-->C;
B-->D;
C-->D;
\`\`\`
(minus the escaped back-ticks).
This output the following view:
Note the missing and some more
node and the contents of the mermaid output.
Like 9.0.1 or even 8.14.0.
Describe the bug
A clear and concise description of what the bug is.
docusaurus production build failing with mermaid
To Reproduce
Steps to reproduce the behaviour including how the markdown file is processed:
remarkPlugins: [require('mdx-mermaid')],
to config for @docusaurus/plugin-content-docs
Expected behavior
A clear and concise description of what you expected to happen.
Diagram should be rendered.
Screenshots
If applicable, add screenshots to help explain your problem.
Stack trace
If applicable, add the stack trace for the exception thrown to help trace your problem.
Docusaurus Node/SSR could not render static page with path "/docs/" because of following error:
ReferenceError: window is not defined
at Object.61590 (main:79056:4)
at __webpack_require__ (main:163201:42)
at Object.43510 (main:79026:35)
at __webpack_require__ (main:163201:42)
at Module.54105 (main:17695:81)
at __webpack_require__ (main:163201:42)
at main:25925:56175
Pro tip: It looks like you are using code that should run on the client-side only.
To get around it, try using <BrowserOnly> (https://docusaurus.io/docs/docusaurus-core/#browseronly) or ExecutionEnvironment (https://docusaurus.io/docs/docusaurus-core/#executionenvironment).
It might also require to wrap your client code in useEffect hook and/or import a third-party library dynamically (if any).
Docusaurus Node/SSR could not render static page with path "/README" because of following error:
Error: Minified React error #130; visit https://reactjs.org/docs/error-decoder.html?invariant=130&args[]=undefined&args[]= for the full message or use the non-minified dev environment for full errors and additional helpful warnings.
at a.b.render (main:118082:32)
at a.b.read (main:118078:83)
at Object.exports.renderToString (main:118089:138)
at doRender (main:26122:356)
at async serverEntry_render (main:26121:294)
Error: Server-side rendering fails due to the error above.
Error: Server-side rendering fails due to the error above.
Unable to build website for locale "en".
β Client βββββββββββββββββββββββββ cache (99%) shutdown IdleFileCachePlugin
serialize pack
β Server βββββββββββββββββββββββββ cache (99%) shutdown IdleFileCachePlugin
serialize pack
Error: Failed to compile with errors.
at node_modules/@docusaurus/core/lib/webpack/utils.js:203:24
at node_modules/webpack/lib/MultiCompiler.js:554:14
at processQueueWorker (node_modules/webpack/lib/MultiCompiler.js:491:6)
at processTicksAndRejections (internal/process/task_queues.js:75:11)
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
error Command failed.
Exit code: 1
Tool chain used:
What tool chain is used.
yarn, docusaurus, docusaurus/plugin-content-docs
Additional context
Add any other context about the problem here.
Describe the bug
I cannot setup the mdx-mermaid plugin in my Docusaurus website.
To Reproduce
npx create-docusaurus@latest my-website classic --typescript
npm install mdx-mermaid mermaid
docusaurus.config.js
file, in the config object, add the plugin:const config = {
...
plugins: ['mdx-mermaid']
}
npm start
Stack trace
npm WARN config global `--global`, `--local` are deprecated. Use `--location=global` instead.
> [email protected] start
> docusaurus start
[INFO] Starting the development server...
[ERROR] Error [ERR_REQUIRE_ESM]: require() of ES Module C:\PROJETOS\TesteDocusaurus\my-website\node_modules\mdx-mermaid\lib\mdxast-mermaid.js from C:\PROJETOS\TesteDocusaurus\my-website\node_modules\@docusaurus\core\lib\server\plugins\configs.js not supported.
Instead change the require of mdxast-mermaid.js in C:\PROJETOS\TesteDocusaurus\my-website\node_modules\@docusaurus\core\lib\server\plugins\configs.js to a dynamic import() which is available in all CommonJS modules.
at module.exports (C:\PROJETOS\TesteDocusaurus\my-website\node_modules\import-fresh\index.js:32:59)
at normalizePluginConfig (C:\PROJETOS\TesteDocusaurus\my-website\node_modules\@docusaurus\core\lib\server\plugins\configs.js:20:57)
at C:\PROJETOS\TesteDocusaurus\my-website\node_modules\@docusaurus\core\lib\server\plugins\configs.js:99:60
at Array.map (<anonymous>)
at loadPluginConfigs (C:\PROJETOS\TesteDocusaurus\my-website\node_modules\@docusaurus\core\lib\server\plugins\configs.js:99:38)
at async initPlugins (C:\PROJETOS\TesteDocusaurus\my-website\node_modules\@docusaurus\core\lib\server\plugins\init.js:42:27)
at async loadPlugins (C:\PROJETOS\TesteDocusaurus\my-website\node_modules\@docusaurus\core\lib\server\plugins\index.js:26:21)
at async load (C:\PROJETOS\TesteDocusaurus\my-website\node_modules\@docusaurus\core\lib\server\index.js:76:58)
at async Command.start (C:\PROJETOS\TesteDocusaurus\my-website\node_modules\@docusaurus\core\lib\commands\start.js:42:19)
[INFO] Docusaurus version: 2.0.1
Node version: v16.16.0
Additional context
I tried to follow the tutorial, but an error shows up regarding "remarkPlugins" not being a valid field.
Describe the solution you'd like
Support mdx 3 please :-)
Additional context
I was planning to use mermaid within Astro but got this error instead:
[@mdx-js/rollup] Cannot read properties of undefined (reading 'call')
file: /home/millette/wip/mermaid-mdx/src/pages/page-2.mdx:undefined:undefined
Stack trace:
at Object.transform (file:///home/millette/wip/mermaid-mdx/node_modules/.pnpm/@[email protected][email protected]_@[email protected][email protected]_/node_modules/@astrojs/mdx/dist/vite-plugin-mdx.js:54:15)
at file:///home/millette/wip/mermaid-mdx/node_modules/.pnpm/[email protected]/node_modules/rollup/dist/es/shared/node-entry.js:19774:40
Describe the solution you'd like
Would it be possible to have the opportunity to pass in mermaid options via this plugin? E.g.
mermaid.initialize({
startOnLoad: true,
securityLevel: 'loose' // <-- Example of additional stuff I think would be nice...
})
Describe alternatives you've considered
Considered to try using the solution from here directly instead (but the plugin looks cleaner).
Additional context
Thanks for the plugin!
I use Next.js, chakra-ui, next-mdx-remote to build my blog.
import React from "react";
import {Mermaid} from 'mdx-mermaid/lib/Mermaid'
const MDXComponents = {
mermaid: Mermaid,
};
export default MDXComponents;
import { serialize } from "next-mdx-remote/serialize";
import remarkMath from "remark-math";
import rehypeKatex from "rehype-katex";
import remarkParse from "remark-parse";
import remarkGfm from "remark-gfm";
import remarkToc from "remark-toc";
import mdxMermaid from 'mdx-mermaid';
const serializePost = async (
content: string,
): Promise<MDXRemoteSerializeResult> => {
return await serialize(content, {
mdxOptions: {
remarkPlugins: [
remarkParse,
remarkGfm,
remarkMath,
remarkToc,
mdxMermaid,
],
rehypePlugins: [rehypeKatex],
},
});
};
export default serializePost;
```mermaid
graph TD;
A-->B;
A-->C;
B-->D;
C-->D;
Unhandled Runtime Error
Error: Text content does not match server-rendered HTML.
Warning: Text content did not match. Server: "" Client: "graph TD;
A-->B;
A-->C;
B-->D;
C-->D;"
See more info here: https://nextjs.org/docs/messages/react-hydration-error
How can I resolve it?
Describe the bug
Type checking error - latest versions of docusaurus
To Reproduce
Steps to reproduce the behaviour including how the markdown file is processed:
Expected behavior
No errors
Stack trace
Conversion of type '{ docs: { remarkPlugins: typeof import("d:/Jonathan/Documents/Repositories/devspace/Videndum/projects/Eventiva/node_modules/mdx-mermaid/index")[]; sidebarPath: string; editUrl: string; }; blog: { ...; }; theme: { ...; }; }' to type 'Options' may be a mistake because neither type sufficiently overlaps with the other. If this was intentional, convert the expression to 'unknown' first.
Types of property 'docs' are incompatible.
Type '{ remarkPlugins: typeof import("d:/Jonathan/Documents/Repositories/devspace/Videndum/projects/Eventiva/node_modules/mdx-mermaid/index")[]; sidebarPath: string; editUrl: string; }' is not comparable to type 'false | Partial<PluginOptions>'.
Type '{ remarkPlugins: typeof import("d:/Jonathan/Documents/Repositories/devspace/Videndum/projects/Eventiva/node_modules/mdx-mermaid/index")[]; sidebarPath: string; editUrl: string; }' is not comparable to type 'Partial<PluginOptions>'.
Types of property 'remarkPlugins' are incompatible.
Type 'typeof import("d:/Jonathan/Documents/Repositories/devspace/Videndum/projects/Eventiva/node_modules/mdx-mermaid/index")[]' is not comparable to type 'RemarkOrRehypePlugin[]'.
Type 'typeof import("d:/Jonathan/Documents/Repositories/devspace/Videndum/projects/Eventiva/node_modules/mdx-mermaid/index")' is not comparable to type 'RemarkOrRehypePlugin'.
Type 'typeof import("d:/Jonathan/Documents/Repositories/devspace/Videndum/projects/Eventiva/node_modules/mdx-mermaid/index")' is not comparable to type '[Function, Record<string, unknown>]'.ts(2352)
/** @type {import('@docusaurus/types').Config} */
const config = {
presets: [
'@docusaurus/preset-classic',
/** @type {import('@docusaurus/preset-classic').Options} */
({
docs: {
remarkPlugins: [require('mdx-mermaid')],
sidebarPath: require.resolve('./sidebars.js'),
},
}),
],
],
};
Well it was working fine when i was working with the website 2-3 days ago, but when i was tryna start working again today and started the website on development mode, it was not compiling for some reason and I don't understand why??
Compiled with problems:X
ERROR in ./docs/defender/configuration.mdx
Module build failed (from ./node_modules/@docusaurus/mdx-loader/lib/index.js):
SyntaxError: C:\Users\Felix\Desktop\melon_docs\docs\defender\configuration.mdx: Identifier 'Mermaid' has already been declared. (2:9)
1 | import { Mermaid } from 'mdx-mermaid/lib/Mermaid';
> 2 | import { Mermaid } from "mdx-mermaid/Mermaid";
| ^
at instantiate (C:\Users\Felix\Desktop\melon_docs\node_modules\@babel\parser\lib\index.js:72:32)
at constructor (C:\Users\Felix\Desktop\melon_docs\node_modules\@babel\parser\lib\index.js:358:12)
at Object.raise (C:\Users\Felix\Desktop\melon_docs\node_modules\@babel\parser\lib\index.js:3334:19)
at ScopeHandler.checkRedeclarationInScope (C:\Users\Felix\Desktop\melon_docs\node_modules\@babel\parser\lib\index.js:3518:19)
at ScopeHandler.declareName (C:\Users\Felix\Desktop\melon_docs\node_modules\@babel\parser\lib\index.js:3484:12)
at Object.declareNameFromIdentifier (C:\Users\Felix\Desktop\melon_docs\node_modules\@babel\parser\lib\index.js:12057:16)
at Object.checkIdentifier (C:\Users\Felix\Desktop\melon_docs\node_modules\@babel\parser\lib\index.js:12052:12)
at Object.checkLVal (C:\Users\Felix\Desktop\melon_docs\node_modules\@babel\parser\lib\index.js:11978:12)
at Object.finishImportSpecifier (C:\Users\Felix\Desktop\melon_docs\node_modules\@babel\parser\lib\index.js:16182:10)
at Object.parseImportSpecifier (C:\Users\Felix\Desktop\melon_docs\node_modules\@babel\parser\lib\index.js:16363:17)
at Object.parseNamedImportSpecifiers (C:\Users\Felix\Desktop\melon_docs\node_modules\@babel\parser\lib\index.js:16336:36)
at Object.parseImport (C:\Users\Felix\Desktop\melon_docs\node_modules\@babel\parser\lib\index.js:16146:39)
at Object.parseStatementContent (C:\Users\Felix\Desktop\melon_docs\node_modules\@babel\parser\lib\index.js:14638:27)
at Object.parseStatement (C:\Users\Felix\Desktop\melon_docs\node_modules\@babel\parser\lib\index.js:14528:17)
at Object.parseBlockOrModuleBlockBody (C:\Users\Felix\Desktop\melon_docs\node_modules\@babel\parser\lib\index.js:15167:25)
at Object.parseBlockBody (C:\Users\Felix\Desktop\melon_docs\node_modules\@babel\parser\lib\index.js:15158:10)
ERROR in ./docs/defender/introduction.mdx
Module build failed (from ./node_modules/@docusaurus/mdx-loader/lib/index.js):
SyntaxError: C:\Users\Felix\Desktop\melon_docs\docs\defender\introduction.mdx: Identifier 'Mermaid' has already been declared. (4:9)
2 | import Tabs from '@theme/Tabs';
3 | import TabItem from '@theme/TabItem';
> 4 | import { Mermaid } from "mdx-mermaid/Mermaid";
| ^
5 | import nse from '../../static/img/docs/scam-example.png';
6 | import atm from '../../static/img/docs/auto.png'
7 | import mtm from '../../static/img/docs/manual.png'
at instantiate (C:\Users\Felix\Desktop\melon_docs\node_modules\@babel\parser\lib\index.js:72:32)
at constructor (C:\Users\Felix\Desktop\melon_docs\node_modules\@babel\parser\lib\index.js:358:12)
at Object.raise (C:\Users\Felix\Desktop\melon_docs\node_modules\@babel\parser\lib\index.js:3334:19)
at ScopeHandler.checkRedeclarationInScope (C:\Users\Felix\Desktop\melon_docs\node_modules\@babel\parser\lib\index.js:3518:19)
at ScopeHandler.declareName (C:\Users\Felix\Desktop\melon_docs\node_modules\@babel\parser\lib\index.js:3484:12)
at Object.declareNameFromIdentifier (C:\Users\Felix\Desktop\melon_docs\node_modules\@babel\parser\lib\index.js:12057:16)
at Object.checkIdentifier (C:\Users\Felix\Desktop\melon_docs\node_modules\@babel\parser\lib\index.js:12052:12)
at Object.checkLVal (C:\Users\Felix\Desktop\melon_docs\node_modules\@babel\parser\lib\index.js:11978:12)
at Object.finishImportSpecifier (C:\Users\Felix\Desktop\melon_docs\node_modules\@babel\parser\lib\index.js:16182:10)
at Object.parseImportSpecifier (C:\Users\Felix\Desktop\melon_docs\node_modules\@babel\parser\lib\index.js:16363:17)
at Object.parseNamedImportSpecifiers (C:\Users\Felix\Desktop\melon_docs\node_modules\@babel\parser\lib\index.js:16336:36)
at Object.parseImport (C:\Users\Felix\Desktop\melon_docs\node_modules\@babel\parser\lib\index.js:16146:39)
at Object.parseStatementContent (C:\Users\Felix\Desktop\melon_docs\node_modules\@babel\parser\lib\index.js:14638:27)
at Object.parseStatement (C:\Users\Felix\Desktop\melon_docs\node_modules\@babel\parser\lib\index.js:14528:17)
at Object.parseBlockOrModuleBlockBody (C:\Users\Felix\Desktop\melon_docs\node_modules\@babel\parser\lib\index.js:15167:25)
at Object.parseBlockBody (C:\Users\Felix\Desktop\melon_docs\node_modules\@babel\parser\lib\index.js:15158:10)
ERROR in ./docs/defender/warden/overview.mdx
Module build failed (from ./node_modules/@docusaurus/mdx-loader/lib/index.js):
Error: Markdown link URL is mandatory in "docs/defender/warden/overview.mdx" file (title: conditions, line: 31).
at processLinkNode (C:\Users\Felix\Desktop\melon_docs\node_modules\@docusaurus\mdx-loader\lib\remark\transformLinks\index.js:72:15)
at C:\Users\Felix\Desktop\melon_docs\node_modules\@docusaurus\mdx-loader\lib\remark\transformLinks\index.js:94:27
at overload (C:\Users\Felix\Desktop\melon_docs\node_modules\unist-util-visit\index.js:27:12)
at visit (C:\Users\Felix\Desktop\melon_docs\node_modules\unist-util-visit-parents\index.js:56:27)
at visit (C:\Users\Felix\Desktop\melon_docs\node_modules\unist-util-visit-parents\index.js:67:75)
at visit (C:\Users\Felix\Desktop\melon_docs\node_modules\unist-util-visit-parents\index.js:67:75)
at visit (C:\Users\Felix\Desktop\melon_docs\node_modules\unist-util-visit-parents\index.js:67:75)
at visit (C:\Users\Felix\Desktop\melon_docs\node_modules\unist-util-visit-parents\index.js:67:75)
at visitParents (C:\Users\Felix\Desktop\melon_docs\node_modules\unist-util-visit-parents\index.js:29:26)
at visit (C:\Users\Felix\Desktop\melon_docs\node_modules\unist-util-visit\index.js:22:3)
at C:\Users\Felix\Desktop\melon_docs\node_modules\@docusaurus\mdx-loader\lib\remark\transformLinks\index.js:93:40
at wrapped (C:\Users\Felix\Desktop\melon_docs\node_modules\trough\wrap.js:25:19)
at next (C:\Users\Felix\Desktop\melon_docs\node_modules\trough\index.js:57:24)
at done (C:\Users\Felix\Desktop\melon_docs\node_modules\trough\wrap.js:55:16)
at then (C:\Users\Felix\Desktop\melon_docs\node_modules\trough\wrap.js:62:5)
SyntaxError: C:\Users\Felix\Desktop\melon_docs\docs\defender\configuration.mdx: Identifier 'Mermaid' has already been declared. (2:9)
1 | import { Mermaid } from 'mdx-mermaid/lib/Mermaid';
> 2 | import { Mermaid } from "mdx-mermaid/Mermaid";
| ^
SyntaxError: C:\Users\Felix\Desktop\melon_docs\docs\defender\introduction.mdx: Identifier 'Mermaid' has already been declared. (4:9)
2 | import Tabs from '@theme/Tabs';
3 | import TabItem from '@theme/TabItem';
> 4 | import { Mermaid } from "mdx-mermaid/Mermaid";
| ^
5 | import nse from '../../static/img/docs/scam-example.png';
6 | import atm from '../../static/img/docs/auto.png'
7 | import mtm from '../../static/img/docs/manual.png'
Error: Markdown link URL is mandatory in "docs/defender/warden/overview.mdx" file (title: conditions, line: 31).
client (webpack 5.70.0) compiled with 3 errors
Hi, in package.json, you're saying mermaid needs to be lower than 8.12. Is there a reason for that?
The reason I'd like to avoid mermaid 8.11.X is that it brings @percy/migrate
as a regular dependency, which in turn depends on colors
at version 1.4.2.
With 8.12 that dependency was moved to devDependencies
: mermaid-js/mermaid#2260
If you need help with this, I'd be happy to assist.
Hello @sjwall π
Describe the bug
Since yesterday, I have this error:
file:///home/johackim/Dev/test/node_modules/mdx-mermaid/lib/mdxast-mermaid.mjs:94
return tree.children[0].children;
^
TypeError: Cannot read properties of undefined (reading 'children')
at outputSVG (file:///home/johackim/Dev/test/node_modules/mdx-mermaid/lib/mdxast-mermaid.mjs:94:29)
at async transformer (file:///home/johackim/Dev/test/node_modules/mdx-mermaid/lib/mdxast-mermaid.mjs:122:32)
Node.js v18.16.0
To Reproduce
Steps to reproduce the behaviour including how the markdown file is processed:
// test.mjs
import * as runtime from 'react/jsx-runtime';
import { runSync, compile } from '@mdx-js/mdx';
import { renderToStaticMarkup } from 'react-dom/server';
const markdown = `
## Hello world
\`\`\`mermaid
graph LR;
Acquisition-->Activation-->RΓ©tention-->Recommandation-->Revenu
\`\`\`
`;
const code = String(await compile(markdown, {
outputFormat: 'function-body',
remarkPlugins: [
[(await import('mdx-mermaid')).default, { output: 'svg' }],
],
}));
const { default: Content } = runSync(code, runtime);
const html = renderToStaticMarkup(Content());
console.log(html);
Additional context
Here my package.json :
{
"devDependencies": {
"@mdx-js/mdx": "2.1.0",
"mdx-mermaid": "^2.0.0-rc7",
"react": "^18.2.0",
"react-dom": "^18.2.0"
}
}
A declarative, efficient, and flexible JavaScript library for building user interfaces.
π Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. πππ
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google β€οΈ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.