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

[osterman]

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

• Installation instructions cause failure to build #27
• YAMLExceptions when parsing non-tooltip links #9

[osterman]

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]

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]

@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]

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

[Battleman]

Since release 2.0.0-rc.2, both our in-house documentation and this repo's example stopped building, with this error.

Reverting back to rc.1 fixes the issue.

Steps to reproduce:

1. Clone this very repository
2. Navigate to examples/terminology-example
3. run yarn
4. run yarn build

The build process first starts with a few warnings on the image-size module (but those are here regardless of the version of the plugin).

Then warnings about webpack

<w> [webpack.cache.PackFileCacheStrategy] Skipped not serializable cache item 'Compilation/modules|/Users/my-user/path/to/docusaurus-terminology/examples/terminology-example-baseurl/.yarn/__virtual__/@docusaurus-mdx-loader-virtual-295aaeab56/7/.yarn/berry/cache/@docusaurus-mdx-loader-npm-3.7.0-6f34066efc-10c0.zip/node_modules/@docusaurus/mdx-loader/lib/index.js??ruleSet[1].rules[7].use[0]!/Users/my-user/.yarn/berry/cache/@grnet-webpack-terms-replace-loader-npm-2.0.0-rc.2-37f5032b93-10c0.zip/node_modules/@grnet/webpack-terms-replace-loader/index.js??ruleSet[1].rules[7].use[1]!/Users/my-user/.yarn/berry/cache/@grnet-webpack-terms-replace-loader-npm-2.0.0-rc.2-37f5032b93-10c0.zip/node_modules/@grnet/webpack-terms-replace-loader/index.js??ruleSet[1].rules[7].use[2]!/Users/my-user/path/to/docusaurus-terminology/examples/terminology-example-baseurl/docs/intro.md': No serializer registered for VFileMessage
<w> while serializing webpack/lib/cache/PackFileCacheStrategy.PackContentItems -> webpack/lib/NormalModule -> webpack/lib/ModuleBuildError -> Error -> VFileMessage

And finally the aforementioned error

Error: MDX compilation failed for file "/Users/my-user/path/to/docusaurus-terminology/examples/terminology-example-baseurl/docs/tutorial-extras/translate-your-site.md"
Cause: Could not parse import/exports with acorn
Details:
{
  "cause": {
    "pos": 90,
    "loc": {
      "line": 7,
      "column": 7
    },
    "raisedAt": 25
  },
  "column": 8,
  "message": "Could not parse import/exports with acorn",
  "line": 7,
  "name": "7:8",
  "place": {
    "line": 7,
    "column": 8,
    "offset": 90
  },
  "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"
}

Removing the only link in the page ([http://localhost:3000/fr/](http://localhost:3000/fr/)) fixes the issue for that page, and so does reverting back to rc.1

[siilike]

How to reproduce:

1. install latest Docusaurus
2. apply latest version of plugin
3. build fails with errors, but start works

The issue seems to be that some input files are sometimes processed twice via webpack-terms-replace-loader which results in a duplicate import statement.

● Server █████████████████████████ building (11%) 0/1 entries 969/1065 dependencies 111/453 modules 137 active 
 mdx-loader › webpack-terms-replace-loader › webpack-terms-replace-loader › webpack-terms-loader › docs/terms/active-login.md

Adding a check there resolves the issue:

    if(source.indexOf(importStatement) === -1) {
      source = source.replace(content, importStatement + content);
    }

[greg-szrama]

I'm getting the same issues as the others reported. I've added the plugin to an existing large content repository. Every markdown file in the repository fails with the errors others have listed. I tried rolling back to the prior version but, while the project builds, I do not get the hover behavior. @siilike , did you create a fork to test that change that I could use?

[siilike]

No, but all you have to do is edit https://github.com/grnet/docusaurus-terminology/blob/main/plugins/webpack-terms-replace-loader/index.js as I described.

[transcript-js]

Hi there, same issues here. While I appreciate that there's a quick fix @siilike 👌, I'd love to see that fix implemented for production projects 😬
Any hope for this? I really loved that I finally got this running with Docusaurus 3.7.0 …

[ctomczyk]

I've created a solution that temporarily fixes that issue based on #38 due to the fact that this PR has been awaiting merge for a long time.

Basically, in the postinstall script, a small JavaScript code is executed that applies a patch to node_modules/@grnet/webpack-terms-replace-loader/index.js. I hope this helps.

Repository:

https://github.com/ctomczyk/docusaurus