Gatsby: Can't resolve fs with MDX runtime installed

[javialon26]

Description

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

1. create a new site with gatsby new gatsby-site
2. install @mdx-js/runtime npm i @mdx-js/runtime
3. import in any component or page the package import MDX from '@mdx-js/runtime'
4. 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

[laurieontech]

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 your gatsby-node.js file that prevents fs from getting bundled up for the client.

exports.onCreateWebpackConfig = ({ actions }) => {
  actions.setWebpackConfig({
    node: {
      fs: 'empty'
    }

This should be added to the docs as well, so appreciate you bringing it up.

[benemohamed]

@laurieontech thanks a lot

[owenbean400]

@laurieontech I tried the setting fs to empty, however I get another error
TypeError: fs.existsSync is not a function
hasBinary
function hasBinary(binaryPath) {

405 | return fs.existsSync(binaryPath);

[powellian]

One slight update on @laurieontech comment updating the codeblock, which now works for me:

    exports.onCreateWebpackConfig = ({ actions }) => {
      actions.setWebpackConfig({
        node: {
          fs: "empty",
        },
      })
    }

I do now get the project to build locally even though the cli still complains about the 'fs' dep.
Thanks