Build errors trying to import `react-markdown` but works in storybook

Expected Behavior

I am able to install and build react-markdown as part of my app.

Current Behavior

Build fails with error with dependency trying to “require(‘path’)” but works in storybook.

Failure Information (for bugs)

I built a component that utilizes this as part of one of my libraries. I built it in storybook and everything worked well. The error did not surface until adding it to my app.

Steps to Reproduce

git clone https://github.com/countravioli/nx-react-build-error-react-markdown.git npm start

---- previous before I setup a repo ----

I bootstrapped a new nx project and chose react for my initial workspace. I added on dependency npm install react-markdown, imported it, and included it in app.tsx that is created in the workspace.

1. npx create-nx-workspace@latest - choose react. I chose emotion for css.
2. npm install react-markdown
3. edit app.tsx, import ReactMarkdown from 'react-markdown' and add to the renderer <ReactMarkdown source='# hello' />`

If you can provide steps to reproduce from scratch, that would be enormously appreciated (i.e. where the first step is npx create-nx-workspace@latest repro-workspace)

Context

Please provide any relevant information about your setup:

• @nrwl/workspace@9.1.4
• react-markdown@4.3.1

Failure Logs

Entrypoint main = runtime.js runtime.js.map vendor.js vendor.js.map main.js main.js.map
Entrypoint polyfills = runtime.js runtime.js.map polyfills.js polyfills.js.map
chunk {main} main.js, main.js.map (main) 354 KiB ={runtime}= ={vendor}= [initial] [rendered]
chunk {polyfills} polyfills.js, polyfills.js.map (polyfills) 566 KiB ={runtime}= [initial]
chunk {runtime} runtime.js, runtime.js.map (runtime) 0 bytes ={main}= ={polyfills}= ={vendor}= [entry]
chunk {vendor} vendor.js, vendor.js.map (vendor) 1.3 MiB ={main}= ={runtime}= [initial] [rendered] split chunk (cache group: vendor) (name: vendor)

ERROR in /home/ryan/Code/test/foobar/node_modules/replace-ext/index.js
Module not found: Error: Can't resolve 'path' in '/home/ryan/Code/test/foobar/node_modules/replace-ext'

ERROR in /home/ryan/Code/test/foobar/node_modules/vfile/core.js
Module not found: Error: Can't resolve 'path' in '/home/ryan/Code/test/foobar/node_modules/vfile'

Other

Love nx so far, but still very green and not familiar with what’s going on behind the scenes. First ts project as well. Thanks!

[iskilber]

I have the same issue. I managed to find just a workaround only:

const ReactMarkdown = require('react-markdown/umd/react-markdown');

[countravioli]

@FrozenPandaz no problem To reproduce: git clone https://github.com/countravioli/nx-react-build-error-react-markdown.git npm start

To see it working in storybook npm run nx run core:storybook

Anecdotally, I bootstrapped another repo with create-react-app installed react-markdown and it also worked with a vanilla project there.

I tried a variety of things in my tsconfig to get it to work but no avail.