Can't resolve fs with MDX runtime installed
See original GitHub issueDescription
When use gatsby with @mdx-js/runtime an error occurs in the bundle:
ERROR #98124 WEBPACK
Generating development JavaScript bundle failed
Can't resolve 'fs' in '/Volumes/Projects/gatsby-site/node_modules/@babel/core/lib/transformation'
If you're trying to use a package make sure that 'fs' is installed. If you're trying to use a local file make sure that the path is correct.
File: node_modules/@babel/core/lib/transformation/normalize-file.js
Steps to reproduce
- create a new site with
gatsby new gatsby-site
- install @mdx-js/runtime
npm i @mdx-js/runtime
- import in any component or page the package
import MDX from '@mdx-js/runtime'
- run
npm start
Expected result
generate the development bundle successfully
Actual result
Error in the bundle:
ERROR #98124 WEBPACK
Generating development JavaScript bundle failed
Can't resolve 'fs' in '/Volumes/Projects/gatsby-site/node_modules/@babel/core/lib/transformation'
If you're trying to use a package make sure that 'fs' is installed. If you're trying to use a local file make sure that the path is correct.
File: node_modules/@babel/core/lib/transformation/normalize-file.js
Environment
System:
OS: macOS 10.15.5
CPU: (4) x64 Intel(R) Core(TM) i5-7360U CPU @ 2.30GHz
Shell: 5.7.1 - /bin/zsh
Binaries:
Node: 10.16.0 - /usr/local/bin/node
Yarn: 1.22.4 - /usr/local/bin/yarn
npm: 6.14.4 - /usr/local/bin/npm
Languages:
Python: 2.7.16 - /usr/bin/python
Browsers:
Chrome: 83.0.4103.97
Safari: 13.1.1
npmPackages:
gatsby: ^2.22.15 => 2.22.15
gatsby-image: ^2.4.5 => 2.4.5
gatsby-plugin-manifest: ^2.4.9 => 2.4.9
gatsby-plugin-offline: ^3.2.7 => 3.2.7
gatsby-plugin-react-helmet: ^3.3.2 => 3.3.2
gatsby-plugin-sharp: ^2.6.9 => 2.6.9
gatsby-source-filesystem: ^2.3.8 => 2.3.8
gatsby-transformer-sharp: ^2.5.3 => 2.5.3
npmGlobalPackages:
gatsby-cli: 2.8.3
Issue Analytics
- State:
- Created 3 years ago
- Reactions:3
- Comments:5 (1 by maintainers)
Top Results From Across the Web
Module not found: Can't resolve 'fs' in Next.js application
I deleted node_modules and package-lock. json and then npm cache clean and npm install...but still the same error appears.
Read more >fs not found react - You.com | The AI Search Engine You Control
Module not found: Error: Can't resolve 'fs' in React. Stackoverflow.com > questions > 70591567. Steps: Install react-app-rewired. Create a file named config- ...
Read more >How To Solve Module Not Found Can't Resolve 'fs' in Next.js
While working on custom sitemap functionality for a Next. js project, I encountered the following error: Module not found: Can't resolve 'fs'. ...
Read more >Remote MDX with Next.js
The MDX runtime ( @mdx-js/runtime ) provides an option to also pass components at render time. Runtime for us means the build part....
Read more >Troubleshooting Common Errors - Gatsby
You may see this error because you're attempting to use fs inside a React component. Additionally, it often shows up when working with...
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
Thanks for opening up the issue @javialon26! What you’re running into can be solved with configuration.
While
fs
is never used in MDX, Babel brings it along anyway. So in this case, you can add code to yourgatsby-node.js
file that preventsfs
from getting bundled up for the client.This should be added to the docs as well, so appreciate you bringing it up.
Where is this file? I don’t see gatsby-node.js anywhere.