React Markdown V9.0.0: "Cannot find module unist-util-visit-parents/do-not-use-color"

[molamphd]

After updating React Markdown to the latest version (9.0.0) and running unit tests on the components that use the package, I encountered an error (example attached below).

The unit tests check if the component renders without crashing. Interestingly, the components using the package still work fine after making the suggested migration changes. However, the issue with the unit tests on the components using React Markdown failing and throwing an error persists.

Any help would be much appreciated. I have hit a bit of a dead end after trying the usual troubleshooting techniques associated with this type of error.

[wooorm]

Hi! The problem is that your tooling is quite out of date. I think you’re using Jest? Jest has several problems with modern ESM. I recommend using vitest if you want something similar to Jest, or node:test if you want a more minimal less magic setup, that’s what I use everywhere

[ChristianMurphy]

Adding on, moving away from Jest and other tools which do not support ESM would be ideal.
If you need a migration step between your current test tool and a modern one.
You could wrap jest with another tool like vite which does support ESM already, here is blog post with example integration: https://hung.dev/posts/jest-vite

[hkjels]

It also fails if you try to use this library from ClojureScript with shadow-cljs.

[wooorm]

Then report it with those tools. They are buggy.

[ChristianMurphy]

@hkjels https://github.com/thheller/shadow-cljs/blob/master/doc/esm.md, https://tonsky.me/blog/clojurescript-2/, and https://github.com/squint-cljs/cherry may interest you.

[amila-desilva]

I am quite confused how Jest is the root cause of the issue...
My react tests break at import rehypeHighlight from 'rehype-highlight'; with the same error: cannot find unist-util-visit-parents/do-not-use-color. I looked thru the node_modules/unist-util-visit-parents/lib/index.js and line 221 (as shown in the screenshot) does not exist in the module, which is also why when my react tests run, it says it cannot find the module. Can someone help me get clarity around this issue?

[ChristianMurphy]

but unfortunately the above error persists - am I missing something?

I don't know it is possible today in Jest, period.
Jest fundamentally has issues with ESM https://github.com/orgs/remarkjs/discussions/1247#discussioncomment-8084664

You can try the babel plugin, it may or may not fix it.
That is something you need to experiment with yourself.
On thing that catches my eye, it does not follow node resolution rules by default https://babel.dev/docs/babel-plugin-transform-modules-commonjs#options you may need those rules applied to follow the conditional exports correctly.

[ChristianMurphy]

To reiterate @remcohaszing's comment and my own previous one.
The level of effort moving to vite and vitest is probably significantly less than the effort of trying to work around Jest's current limitations.

[studioswong]

Gotcha, thank you @ChristianMurphy and @remcohaszing !

[alankalb]

@studioswong If you are still stuck with using Jest, you can try adding unist-util-visit-parents to moduleNameMapper in your jest config. I have found that jest is unable to find some files within packages like unist-util-visit-parents and vfile.

moduleNameMapper: {
    ...,
    "unist-util-visit-parents/do-not-use-color": "<rootDir>/node_modules/unist-util-visit-parents/lib/color.js",
    "vfile/do-not-use-conditional-minpath": "<rootDir>/node_modules/vfile/lib/minpath.browser.js",
    "vfile/do-not-use-conditional-minproc": "<rootDir>/node_modules/vfile/lib/minproc.browser.js",
    "vfile/do-not-use-conditional-minurl": "<rootDir>/node_modules/vfile/lib/minurl.browser.js",
  },

But like others have said, we should all be switching to vitest to avoid this nonsense.

[Jeff-Tian]

Thank you! @alankalb , I followed your example and fixed my issue here with adding the following to jest.config.js:

moduleNameMapper: {
    // ...
    "unist-util-visit-parents/do-not-use-color":
      "<rootDir>/node_modules/unist-util-visit-parents/lib/color.js",
    "^#minpath$": "<rootDir>/node_modules/vfile/lib/minpath.browser.js",
    "^#minproc$": "<rootDir>/node_modules/vfile/lib/minproc.browser.js",
    "^#minurl$": "<rootDir>/node_modules/vfile/lib/minurl.browser.js",
}