Unable to add markdown links, "Could not parse import/exports with acorn"

osterman commented 4 months ago

I want to make our term pages richer with explanations and links to other terms and pages on our site, or external links. When I use markdown links with this terminology plugin enabled, I get the error:

"Could not parse import/exports with acorn"

Workarounds

Using raw HTML <a/> tags
Using MDX <Link/> tags

Expectation

Docusarus should not crash if using markdown [...](...) links. in the content section.
Would prefer markdown links to work

What I've tried

I've tried both .md and .mdx term pages, with the same outcome.

Error

I get the following error.

Error: MDX compilation failed for file "/Users/erik/Dev/cloudposse/tools/atmos/website/docs/reference/glossary/stage.md"
Cause: Could not parse import/exports with acorn
Details:
{
  "cause": {
    "pos": 196,
    "loc": {
      "line": 10,
      "column": 8
    },
    "raisedAt": 66
  },
  "column": 9,
  "message": "Could not parse import/exports with acorn",
  "line": 10,
  "name": "10:9",
  "place": {
    "line": 10,
    "column": 9,
    "offset": 196
  },
  "reason": "Could not parse import/exports with acorn",
  "ruleId": "acorn",
  "source": "micromark-extension-mdxjs-esm",
  "url": "https://github.com/micromark/micromark-extension-mdxjs-esm#could-not-parse-importexports-with-acorn"
}

Relates to

27
9

osterman commented 4 months ago

I feel like #9 may address the problem I am facing, but either I didn't understand the proposed solution or using the proposed solution in #9 did not work for me. It still crashes.

VasiaKoum commented 4 months ago

Hello @osterman,

We tried to reproduce this issue but encountered no problems while using Markdown links, <a> tags, or the <Link> component from Docusaurus. You can review this example in CodeSandbox (in docs/intro page) we created to demonstrate the various ways to write a link in Docusaurus Markdown.

In issue #9, it was mentioned that the metadata header is necessary for the plugin to display the info in the tooltip. You can utilize an empty metadata header if you prefer not to include anything in the header.

If the issue persists, it would be helpful if you could provide more information such as the project's package.json, the operating system, the Node.js version, any custom configurations you might have, and the Markdown file causing the issue.

osterman commented 4 months ago

@VasiaKoum I appreciate the response! I hope to get back to this in a week or two. Phenomenal reproduce example using codesandbox.io. I'll have to borrow that.

Rinse12 commented 1 month ago

We're encountering the same issue with our repo, one thing to mention is that we're getting a lot of warning from npm when we install this package.

npm WARN ERESOLVE overriding peer dependency
npm WARN While resolving: postel@0.1.5
npm WARN Found: react@18.3.1
npm WARN node_modules/react
npm WARN   react@"^18.0.0" from the root project
npm WARN   33 more (@docsearch/react, @docusaurus/core, ...)
npm WARN Could not resolve dependency:
npm WARN peer react@"^16.13.1" from postel@0.1.5
npm WARN node_modules/@grnet/docusaurus-term-preview/node_modules/postel
npm WARN   postel@"0.1.5" from @grnet/docusaurus-term-preview@2.0.0-rc.1
npm WARN   node_modules/@grnet/docusaurus-term-preview
npm WARN 
npm WARN Conflicting peer dependency: react@16.14.0
npm WARN node_modules/react
npm WARN   peer react@"^16.13.1" from postel@0.1.5
npm WARN   node_modules/@grnet/docusaurus-term-preview/node_modules/postel
npm WARN     postel@"0.1.5" from @grnet/docusaurus-term-preview@2.0.0-rc.1
npm WARN     node_modules/@grnet/docusaurus-term-preview
npm WARN ERESOLVE overriding peer dependency
npm WARN While resolving: postel@0.1.5
npm WARN Found: react-dom@18.3.1
npm WARN node_modules/react-dom
npm WARN   react-dom@"^18.0.0" from the root project
npm WARN   25 more (@docsearch/react, @docusaurus/core, ...)
npm WARN 
npm WARN Could not resolve dependency:
npm WARN peer react-dom@"^16.13.1" from postel@0.1.5
npm WARN node_modules/@grnet/docusaurus-term-preview/node_modules/postel
npm WARN   postel@"0.1.5" from @grnet/docusaurus-term-preview@2.0.0-rc.1
npm WARN   node_modules/@grnet/docusaurus-term-preview
npm WARN 
npm WARN Conflicting peer dependency: react-dom@16.14.0
npm WARN node_modules/react-dom
npm WARN   peer react-dom@"^16.13.1" from postel@0.1.5
npm WARN   node_modules/@grnet/docusaurus-term-preview/node_modules/postel
npm WARN     postel@"0.1.5" from @grnet/docusaurus-term-preview@2.0.0-rc.1
npm WARN     node_modules/@grnet/docusaurus-term-preview

To replicate this:

git clone https://github.com/plebbit/plebbit-docs
cd plebbit-docs
git checkout terminology-bug
npm i
npx docusaurus start

grnet / docusaurus-terminology