Mdx: @mdx-js/runtime Module not found: Can't resolve '@mdx-js/runtime'

[Dangeranger]

Subject of the issue

When using MDX Runtime with NextJS, and using import MDX from @mdx-js/runtime to use the package the following error is being raised:

NOTE This error occurs after performing a yarn add @mdx-js/runtime and yarn install

Module not found: Can't resolve '@mdx-js/runtime' in '/User/path/to/project/mdx-runtime-error-nextjs/pages

This appears to be related to the upgrade from 1.5.1 to 1.5.2 as this error was not present in prior versions of @mdx-js/runtime, such as 1.5.1.

Version 1.5.2 is present in the web-app that originated this error for us, as shown in the repository below.

Comparison of changes: https://github.com/mdx-js/mdx/compare/v1.5.1...v1.5.2

Your environment

• OS: System Version: macOS 10.14.6 (18G103); Kernel Version: Darwin 18.7.0;
• Packages:

  "dependencies": {
    "@mdx-js/loader": "^1.5.2",
    "@mdx-js/mdx": "^1.5.2",
    "@mdx-js/react": "^1.5.2",
    "@mdx-js/runtime": "^1.5.2",
    "@next/mdx": "^9.0.3",
    "next": "^9.0.3",
    "react": "^16.9.0",
    "react-dom": "^16.9.0",
    "remark-emoji": "^2.0.2",
    "remark-images": "^1.0.0"
  }

• Env:
  
  
  
  1. Node: v13.2.0
  
  
  2. Yarn: 1.19.2
  
  
  3. Chrome: Version 79.0.3945.79 (Official Build) (64-bit)
  
  

Steps to reproduce

Please see the minimum viable error reproduction repository here:

• https://github.com/Dangeranger/mdx-runtime-error-nextjs

Also see this Code Sandbox with a working example of the error:

• https://codesandbox.io/s/github/Dangeranger/mdx-runtime-error-nextjs

Run the steps below to see the error:

1. yarn install
2. yarn dev
3. Visit http:localhost:3000 to view the Index page loading correctly.
4. Visit http:localhost:3000/hello to view the Hello page loading correctly.
5. Visit http:localhost:3000/runtime to view the "Module not found" error.

NOTE: @mdx-js is installed within node_modules and includes the /runtime/dist directory.

Expected behaviour

The @mdx-js/runtime module is imported successfully and available for use as a component for generating dynamic React component output.

Actual behaviour

The runtime raises an error that the module cannot be resolved with the message:

Module not found: Can't resolve '@mdx-js/runtime'

[ChristianMurphy]

@Dangeranger are you still seeing this error?
The error is not appearing on CodeSandbox.

[Dangeranger]

@ChristianMurphy Yes, the error is still present.

You will need to navigate to the https://smks4.sse.codesandbox.io/runtime route to see the error.

The other two routes show the app running as expected with a static .mdx file, and without runtime.

You can follow the steps in the issue description to reproduce.

Run the steps below to see the error:

yarn install
yarn dev
Visit http:localhost:3000 to view the Index page loading correctly.
Visit http:localhost:3000/hello to view the Hello page loading correctly.
Visit http:localhost:3000/runtime to view the "Module not found" error.

Thank you.

[ChristianMurphy]

You will need to navigate to the [...]/runtime route to see the error

Gotcha

This appears to be related to the upgrade from 1.5.1 to 1.5.2 as this error was not present in prior versions of @mdx-js/runtime, such as 1.5.1.

@Dangeranger could you share a working example with 1.5.1?
When I fork the sandbox and set the version to 1.5.1, I see the same issue as 1.5.2
https://codesandbox.io/s/next-mdx-151-6o0be

[Dangeranger]

@ChristianMurphy So I thought that the v1.5.1 to v1.5.2 was the breaking change, but it turns out that I was wrong, as I just confirmed as you did that v1.5.1 also throws the same "Module not found" error.

I am walking back through prior versions to try and find the nearest ancestor which does NOT throw a "Module not found" error, and trying to think if there could be another cause that I haven't thought of.

[Dangeranger]

@ChristianMurphy I just confirmed that using exact dependencies at 1.4.0 for several of the @mdx-js/... dependencies resolves the "Module not found error". See code block below.

Additionally I deleted the .next/* files, node_modules files and yarn.lock to ensure a clean build without any cached artifacts.

The problem therefore exists between v1.4.1 and v1.5.0.

  "dependencies": {
    "@mdx-js/loader": "1.4.0",
    "@mdx-js/mdx": "1.4.0",
    "@mdx-js/react": "1.4.0",
    "@mdx-js/runtime": "1.4.0",
    "@next/mdx": "^9.0.3",
    "next": "^9.0.3",
    "react": "^16.9.0",
    "react-dom": "^16.9.0",
    "remark-emoji": "^2.0.2",
    "remark-images": "^1.0.0"
  }

[Dangeranger]

@ChristianMurphy Ok I've confirmed the minimum change in order to reproduce the error.

These dependencies in the package.lock WILL raise "Module not found" on build and at application runtime.

• NOTE the hard version on @mdx-js/..., these do not use the compatible with ^.

"dependencies": {
    "@mdx-js/loader": "1.5.2",
    "@mdx-js/mdx": "1.5.2",
    "@mdx-js/react": "1.5.2",
    "@mdx-js/runtime": "1.5.2",
    "@next/mdx": "^9.0.3",
    "next": "^9.0.3",
    "react": "^16.9.0",
    "react-dom": "^16.9.0",
    "remark-emoji": "^2.0.2",
    "remark-images": "^1.0.0"
  }

These dependencies in the package.json will NOT raise "Module not found".
The only difference is the change to "@mdx-js/runtime": "1.5.1".

"dependencies": {
    "@mdx-js/loader": "1.5.2",
    "@mdx-js/mdx": "1.5.2",
    "@mdx-js/react": "1.5.2",
    "@mdx-js/runtime": "1.5.1",
    "@next/mdx": "^9.0.3",
    "next": "^9.0.3",
    "react": "^16.9.0",
    "react-dom": "^16.9.0",
    "remark-emoji": "^2.0.2",
    "remark-images": "^1.0.0"
  }

[Dangeranger]

It seems that the reason that switching to v1.5.1 in your CodeSandbox fork https://codesandbox.io/s/next-mdx-151-6o0be didn't fix the problem is because of the module dependency resolution used by Yarn. By using a hard version, and removing the "compatible with" operator ^ from before the version number, it seems that Yarn resolves to using the true v1.5.1 version of the @mdx-js/runtime package instead of a compatible but more recent version.

[Dangeranger]

This still leaves me confused as to what change in the v1.5.1 .. v1.5.2 change set triggers the problem causing the "Module not found" error, but at least we now know where the problem is.

[Dangeranger]

@ChristianMurphy You can see the fixed and working version at the following URLs.

• SandBox: https://codesandbox.io/s/mdx-runtime-nextjs-fixed-x2jiv
• Live: https://x2jiv.sse.codesandbox.io/runtime

[ChristianMurphy]

The key difference between the versions appears to be the package.json
In version 1.5.1 main points to dist/index.js which exists (ref 1, ref 2)
In version 1.5.2 main points to dist/cjs.js which does not exist (ref 1, ref 2)

[JounQin]

Sorry @Dangeranger , it should be fixed in #877, let's wait a new patch version.

[ChristianMurphy]

MDX 1.5.3 has been released, and includes the fix for this, thanks @JounQin!