[gatsby-plugin-netlify-cms] webpack and global node modules

[karolis-sh]

Description

I'm doing some MDX transformations with standalone babel and if imported modules have any references to node global modules, the webpack transpilation fails on CMS build.

Adding to gastby-node.js the following:

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

Has no effect, as I understand the CMS has separate webpack config, that I can't override.

FYI. With node: { fs: 'empty' }, the import 'babel-plugin-pluck-imports'; does not break normal (non CMS) pages.

Steps to reproduce

In cms initialization file:

import CMS, { init } from 'netlify-cms';
import 'babel-plugin-pluck-imports';

...

Expected result

The CMS should transpile.

Actual result

Webpack transpilation fails with error:

This dependency was not found:

* fs in ./node_modules/convert-source-map/index.js

To install it, you can run: npm install --save fs

Environment

  System:
    OS: macOS 10.14.1
    CPU: (4) x64 Intel(R) Core(TM) i7-7660U CPU @ 2.50GHz
    Shell: 5.3 - /bin/zsh
  Binaries:
    Node: 8.11.1 - ~/.nvm/versions/node/v8.11.1/bin/node
    Yarn: 1.12.3 - /usr/local/bin/yarn
    npm: 5.6.0 - ~/.nvm/versions/node/v8.11.1/bin/npm
  Browsers:
    Chrome: 70.0.3538.110
    Firefox: 62.0.3
    Safari: 12.0.1
  npmPackages:
    gatsby: ^2.0.55 => 2.0.55 
    gatsby-mdx: ^0.2.0 => 0.2.0 
    gatsby-plugin-favicon: ^3.1.4 => 3.1.4 
    gatsby-plugin-netlify-cms: ^3.0.8 => 3.0.8 
    gatsby-plugin-no-sourcemaps: ^2.0.1 => 2.0.1 
    gatsby-plugin-postcss: ^2.0.1 => 2.0.1 
    gatsby-plugin-react-helmet: ^3.0.2 => 3.0.2 
    gatsby-plugin-sitemap: ^2.0.2 => 2.0.2 
    gatsby-source-filesystem: ^2.0.9 => 2.0.9 
    gatsby-transformer-json: ^2.1.6 => 2.1.6 
  npmGlobalPackages:
    gatsby-cli: 2.4.6

[gatsbot]

Hiya!

This issue has gone quiet. Spooky quiet. 👻

We get a lot of issues, so we currently close issues after 30 days of inactivity. It’s been at least 20 days since the last update here.

If we missed this issue or if you want to keep it open, please reply here. You can also add the label "not stale" to keep this issue open!

Thanks for being a part of the Gatsby community! 💪💜

[karolis-sh]

Not stale

[gatsbot]

Hey again!

It’s been 30 days since anything happened on this issue, so our friendly neighborhood robot (that’s me!) is going to close it.

Please keep in mind that I’m only a robot, so if I’ve closed this issue in error, I’m HUMAN_EMOTION_SORRY. Please feel free to reopen this issue or create a new one if you need anything else.

Thanks again for being part of the Gatsby community!

[Knaackee]

@karolis-sh I have the same issue. Does it work for you now?

[karolis-sh]

@Knaackee nope, the issue is still present.

I'm just waiting for mdx runtime update mdx-js/mdx#704 :|

[Knaackee]

Thanks @karolis-sh for pointing out that mdx-js/runtime is the problem.

[hhimanshu]

Are there any workarounds for this issue?

[l3aconator]

@hhimanshu @karolis-sh
You need to set node: { fs: 'empty' } in gatsby-confg.js as you noted. See here:

mdx-js/mdx#913
webpack-contrib/css-loader#447 (comment)

There was a recent version of netlify CMS that allows you to edit the config for the plugin itself. Here was my workaround:

{
      resolve: `gatsby-plugin-netlify-cms`,
      options: {
        modulePath: `${__dirname}/src/cms/cms.js`, // for custom preview in the Netlify CMS
        customizeWebpackConfig: (config) => (config.node.fs = 'empty'),
      },
    }