Can't resolve fs / fs in normalize-file.js ? about gatsby-mdx-netlify-cms-starter HOT 9 CLOSED

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

from gatsby-mdx-netlify-cms-starter.

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.

from gatsby-mdx-netlify-cms-starter.

@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.)

from gatsby-mdx-netlify-cms-starter.

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

from gatsby-mdx-netlify-cms-starter.

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

from gatsby-mdx-netlify-cms-starter.

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

from gatsby-mdx-netlify-cms-starter.

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

from gatsby-mdx-netlify-cms-starter.

@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

from gatsby-mdx-netlify-cms-starter.

Interesting. Thanks for the correction!

from gatsby-mdx-netlify-cms-starter.