Gatsby: [modifyWebpackConfig] / Webpack ProvidePlugin: Class constructor ProvidePlugin cannot be invoked without 'new'

[iv-mexx]

Gatsby Version: 1.1.6
Node.js Version: v8.2.1
OS Version: macOS Sierra 10.12.6

---

I'm trying to use the Webpack Provide Plugin and follow the Example of the Gatsby Glamor Plugin.

Right now, I'm just trying to add the ProvidePlugin with no content at all, so this is the content of my gatsby-node.js:

const webpack = require(`webpack`)

exports.modifyWebpackConfig = ({ config, stage }) => {
  config.plugin('Test', webpack.ProvidePlugin, [{

  }])
  return config
}

Unfortunately, this does not work:

error Class constructor ProvidePlugin cannot be invoked without 'new'


  TypeError: Class constructor ProvidePlugin cannot be invoked without 'new'

  - plugin.js:8 F
    [project]/[webpack-configurator]/lib/resolve/plugin.js:8:33

  - plugin.js:13
    [project]/[webpack-configurator]/lib/resolve/plugin.js:13:16

  - plugin.js:14 module.exports
    [project]/[webpack-configurator]/lib/resolve/plugin.js:14:8

  - index.js:180 Config.resolve
    [project]/[webpack-configurator]/index.js:180:22

  - webpack-modify-validate.js:67 _callee$
    [project]/[gatsby]/dist/utils/webpack-modify-validate.js:67:70

[zshannon]

Did anyone figure this out?

[pizzarob]

Any updates on this - can't use the Glamor Plugin

[KyleAMathews]

The glamor plugin is used on a number of sites e.g. gatsby js.org. Could you share a site reproducing your problem with the glamor plugin?

[jayalfredprufrock]

I hit this issue when trying to add another plugin, svg-sprite-loader. I was able to work around it by passing a function that returns an instance of the plugin instead of the plugin constructor. See https://github.com/lewie9021/webpack-configurator/issues/15

Seeing as the glamor plugin works for most people, your issue might be a different one, but the above fix worked in my case.

[Connorelsea]

On version 1.9.101 of Gatsby.

Removing line 6 makes the error go away.

[Connorelsea]

After some more investigation, I found out the problem had to do with using an older version of yarn. This was, for some reason, causing me to get a different version of webpack than my coworker, which led to me getting an error. To fix I ran:

• npm -g uninstall yarn
• brew install yarn
• rm -rf node_modules/ _(In your project)_
• yarn
• yarn develop

Then it ran correctly (with no other changes)

I am on macOS High Sierra. After the changes, the webpack version in the project's node_modules is 1.15.0. Before this change the webpack in the project's node_modules was higher, 2.9 something

[marcobiedermann]

@jayalfredprufrock
I've read you managed to get svg-sprite-loader to work with Gatsby.
Do you have any demo project or reference, how to do this?

I've modified the default Gatsby webpack config as shown in the documentation.

gatsby-node.js

const SpriteLoaderPlugin = require('svg-sprite-loader/plugin');

exports.modifyWebpackConfig = ({ config, stage }, options) => {
  config.loader('url-loader', {
    test: /\.(jpg|jpeg|png|gif|mp4|webm|wav|mp3|m4a|aac|oga)(\?.*)?$/,
    loader: 'url',
    query: {
      limit: 10000,
      name: 'static/[name].[hash:8].[ext]',
    },
  });

  switch (stage) {
    case 'develop': {
      config.loader('svg-sprite', {
        test: /\.svg$/,
        loader: 'svg-sprite-loader',
      });

      return config;
    }

    case 'build': {
      config.loader('svg-sprite', {
        loader: 'svg-sprite-loader',
        test: /\.svg$/,
        query: {
          extract: true,
        },
      });

      config.plugin('svg-sprite', () => new SpriteLoaderPlugin());

      return config;
    }

    default: {
      return config;
    }
  }
};

In production / build I would like to extract the file via plugin. I've used an anonymous arrow function which returns a new instance of the plugin as you suggested.
Unfortunately this returns the following error:

error Building static HTML for pages failed

See our docs page on debugging HTML builds for help https://goo.gl/yL9lND

  136 |   tr: createDOMFactory('tr'),
  137 |   track: createDOMFactory('track'),
> 138 |   u: createDOMFactory('u'),
      | ^
  139 |   ul: createDOMFactory('ul'),
  140 |   'var': createDOMFactory('var'),
  141 |   video: createDOMFactory('video'),


  WebpackError:

  - ReactDOMFactories.js:138 Parser.pp$4.raise
    ~/react/lib/ReactDOMFactories.js:138:1

  - ReactBaseClasses.js:71 Parser.pp.unexpected
    ~/react/lib/ReactBaseClasses.js:71:1

  - traverseAllChildren.js:21 Parser.pp$3.parseExprAtom
    ~/react/lib/traverseAllChildren.js:21:1


  - ReactElement.js:287 Parser.pp$3.parseMaybeUnary
    ~/react/lib/ReactElement.js:287:1

  - ReactElement.js:232 Parser.pp$3.parseExprOps
    ~/react/lib/ReactElement.js:232:1

  - ReactElement.js:215 Parser.pp$3.parseMaybeConditional
    ~/react/lib/ReactElement.js:215:1

  - ReactElement.js:192 Parser.pp$3.parseMaybeAssign
    ~/react/lib/ReactElement.js:192:1

  - ReactElement.js:168 Parser.pp$3.parseExpression
    ~/react/lib/ReactElement.js:168:1

  - ReactNoopUpdateQueue.js:9 Parser.pp$1.parseStatement
    ~/react/lib/ReactNoopUpdateQueue.js:9:1

  - ReactBaseClasses.js:106 Parser.pp$1.parseTopLevel
    ~/react/lib/ReactBaseClasses.js:106:8

  - index.js:80 Parser.parse
    ~/object-assign/index.js:80:1

  - factory.js:126 Object.parse
    ~/create-react-class/factory.js:126:1

  - emptyFunction.js:20 Parser.parse
    ~/fbjs/lib/emptyFunction.js:20:1

  - static-entry.js:27 NormalModule.<anonymous>
    .cache/static-entry.js:27:1

In development everything works fine. I also debugged my query / options ans these seam to work. The only missing part is adding the plugin.
Do you have any advice?

[LoicUV]

Hey @marcobiedermann, have you managed to get svg-sprite-loader working with gatsby ?

Edit : Looks like I found your plugin on npm, and it works 👌

[KyleAMathews]

Due to the high volume of issues, we're closing out older ones without recent activity. Please open a new issue if you need help!