Can't resolve fs / fs in normalize-file.js ?

[jesterbeaver]

This is such a cool project! But I can't get it to work. Cloned it once via gatsby cli & then tried a second time via git clone + repo link. Apart from lots of warnings during yarn, gatsby develop gives me:

 ERROR  Failed to compile with 2 errors                                                                                                                             5:06:13 PM
⠀
This dependency was not found:
⠀
* fs in ./node_modules/@mdx-js/mdx/node_modules/@babel/core/lib/transformation/normalize-file.js, ./node_modules/remark-mdx/node_modules/@babel/core/lib/transformation/normal
ize-file.js
⠀
To install it, you can run: npm install --save fs

 ERROR #98123  WEBPACK

Generating development JavaScript bundle failed

Can't resolve 'fs' in '/Users/jester/projects/test_projects/gatsby-mdx-netlify-starter/node_modules/@mdx-js/mdx/node_modules/@babel/core/lib/transformation'

File: node_modules/@mdx-js/mdx/node_modules/@babel/core/lib/transformation/normalize-file.js


 ERROR #98123  WEBPACK

Generating development JavaScript bundle failed

Can't resolve 'fs' in '/Users/jester/projects/test_projects/gatsby-mdx-netlify-starter/node_modules/remark-mdx/node_modules/@babel/core/lib/transformation'

File: node_modules/remark-mdx/node_modules/@babel/core/lib/transformation/normalize-file.js

failed Building development bundle - 54.046s

Tried fixing it by yarn add fs, but didn't work. I'm not sure what to do. Any ideas?

[leafac]

Same issue here. Did you close the issue because you solved it? How? Could this be a solution?

[mysterybear]

Tried adding

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

No joy, any luck you guys @leafac @jesterbeaver or any advice from @renvrant ? Could we re-open this otherwise?

Cheers

[mlynam]

You need to modify your netlify config.

    {
      resolve: "gatsby-plugin-netlify-cms",
      options: {
        modulePath: `${__dirname}/src/cms/cms.js`,
        customizeWebpackConfig: config => {
          config.node = {
            ...config.node,
            fs: "empty",
            child_process: "empty",
            module: "empty",
          };
        },
      },
    },

You should probably include this as the last plugin listed in gatsby-config.js

[mysterybear]

Thanks for the quick response @mlynam !

This seems resolved with your addition plus the similar code for gatsby-node.js

Submitted PR #8 feel free to merge or close if I'm missing some valid reason this wasn't in the repo before @renvrant

[mlynam]

@mysterybear you shouldn't need it in the root node config unless there is another unmentioned dependency running around.

[leafac]

@mysterybear: The progress I made on the issue is that I think I now understand why it occurs in the first place. In this starter there’s code like this that requires MDX. This code is being interpreted as if it were running on the browser. Of course, this is Gatsby we’re talking about, and Gatsby precompiles stuff during build time to generate a static site. But still, the code behaves as if it were interpreted in the browser. The problem is that MDX seems to use fs, child_process, and other things that you only find in Node.js, not on the browser.

The solution seems to be to tell webpack (which Gatsby is using under the hood) to provide an empty implementation of those libraries, only to get MDX going. (This isn’t just an issue with MDX; it also applies to other libraries that may be using things from Node.js.)

[mlynam]

I can shed more light on the problem. Gatsby has 2 major build steps.

Step 1 runs entirely in node and is responsible for validating schema, running queries, loading data, performing SSR to generate the static elements and so on.

During step 2, Gatsby builds the site with a browser config because it expects there may be some elements that are intended to run in the browser (like dynamically loaded data at runtime, or maybe a netlify admin application!). This 2nd stage is what dies if you included a gatsby symbol inside some component that gatsby doesn't handle during Stage 1. In the case of this starter, any component you expose to your CMS like previews, mdx shortcodes and editors will complain if you don't stub those node modules inside your netlify plugin config.

[mysterybear]

@mysterybear you shouldn't need it in the root node config unless there is another unmentioned dependency running around.

Seems to be. If I remove it from gatsby-node.js, I get the same problem:

failed Building production JavaScript and CSS bundles - 116.667s
 ERROR #98123  WEBPACK

Generating JavaScript bundles failed

Can't resolve 'fs' in 'node_modules/@mdx-js/mdx/node_modules/@babel/core/lib/transformation'

File: node_modules/@mdx-js/mdx/node_modules/@babel/core/lib/transformation/normalize-file.js

[mlynam]

Interesting. Thanks for the correction!