javascript - Webpack configuration in Gatsby, naming conventions

Question

I'm using Gatsby in one of my projects, and due to its configs, in the server side, Node doesn't have the window loader. All that being said I found the guides in Gatsby docs for a previous package on how to avoid having these errors:

exports.onCreateWebpackConfig = ({ stage, loaders, actions }) => {
  if (stage === 'build-html' || stage === 'develop-html') {
    actions.setWebpackConfig({
      module: {
        rules: [
          {
            test: /enter-package-name/,
            use: loaders.null(),
          },
        ],
      },
    });
  }
};

Recently I've encountered the same error, and in part fault due to my lack of knowledge of Webpack and its naming conventions that are used, I couldn't use the same configuration for this package:

rules: [
    {
       test: /@brainhubeu/react-carousel/
    }
]

I believe the slashes are used to locate the package, and due to the naming of my package having one in between the two words, its throwing an error due to not expecting something after the middle slash.

Any ideas on how I would do this either regex wise or Webpack. Materials and docs about said issue are welcomed.

P.S - Apologies if this question might be very basic, but I couldn't find the proper documentation on my own.

标签： javascriptnode.jswebpackgatsby

Answer 1

You hit the nail. As you guess, test is a regular expression (hence the slashes, /) and it tests a folder location inside node_modules. In your case, you may need to scape the middle slash with something like:

exports.onCreateWebpackConfig = ({ stage, loaders, actions }) => {
  if (stage === 'build-html' || stage === 'develop-html') {
    actions.setWebpackConfig({
      module: {
        rules: [
          {
            test: /@brainhubeu\/react-carousel/,
            use: loaders.null(),
          },
        ],
      },
    });
  }
};