fileURLToPath not found in 'url' webpack 5

[nullhook]

im using [email protected] because of hardened requirement of react 18+ on the @latest

now when compiling with webpack 5 i see the following error:

export 'fileURLToPath' (reexported as 'urlToPath') was not found in 'url' (possible exports: Url, format, parse, resolve, resolveObject)
 @ ./node_modules/vfile/lib/index.js 90:0-44 132:15-20 262:8-13 263:13-22
 @ ./node_modules/vfile/index.js 1:0-36 1:0-36
 @ ./node_modules/react-markdown/lib/react-markdown.js 28:0-27 96:19-24
 @ ./node_modules/react-markdown/index.js 8:0-64 8:0-64
 @ ./components/foo/resources/page/components/markdown_renderer/index.tsx 6:0-38 16:28-36

i'm aware that webpack5 does not pollyfill node's core libs automatically.

why is VFile required in react-markdown? i only see a single usage of it. also, can VFile be build for browser environments only? because browser's url and node's url libs have different APIs all together.

[ChristianMurphy]

Welcome @nullhook!
Sorry you ran into a spot of trouble.

vFile provides a browser compatible implementation out of the box https://github.com/vfile/vfile/blob/de87feae24b65cd21975022636b70b0ad7331342/package.json#L36-L50
Something in your webpack configuration it telling webpack you aren't running in a browser, but instead are running in node.

why is VFile required in react-markdown?

Because react-markdown, remark, and unified work on virtual files provided by vfile.
It is used extensively at many levels of the dependency tree.

[nullhook]

since im using an older version of react-markdown i also have a slightly older version of the vfile lib. is the below version also browser compataible?

edit: yes, it seems so: https://github.com/vfile/vfile/blob/5d3c0de9529e4b0dd45cd7c2d9919b95e169eab9/package.json#L38-L41

└─┬ [email protected]
  ├─┬ [email protected]
  │ └── [email protected] deduped
  └── [email protected]

[ChristianMurphy]

It does, but it is still better to upgrade to latest.

[nullhook]

not sure if webpack 5 respects the "browser" field anymore? but the following worked in webpack config

alias: { './minurl.js': path.resolve('./node_modules/vfile/lib/minurl.browser.js'), },

[ChristianMurphy]

I'd recommend upgrading to the latest version of react-markdown to get the latest vfile fixes as well