TypeError: compiler.plugin is not a function at ReactLoadablePlugin.apply

Question

I want to implement SSR in ReactJs using React Loadable by Webpack. Below are a few lines from the package.json file:

const { ReactLoadablePlugin } = require('react-loadable/webpack');
plugins:[
    new ReactLoadablePlugin({
        filename: path.resolve(__dirname, 'dist', 'react-loadable.json')
    }),
]

But I am getting below error:

> [webpack-cli] TypeError: compiler.plugin is not a function
at ReactLoadablePlugin.apply

How can I resolve it?

Answer 1

I had the same error but with webpack-shell-plugin dependency in NodeJs using Webpack 5 so my fix was to remove webpack-shell-plugin and add webpack-shell-plugin-next:

npm install --save-dev webpack-shell-plugin-next

webpack.config.js file:

const WebpackShellPluginNext = require('webpack-shell-plugin-next');

module.exports = {
 ...
plugins: [
    new WebpackShellPluginNext({
      onBuildStart:{
        scripts: ['echo "===> Starting packing with WEBPACK 5"'],
        blocking: true,
        parallel: false
      },
      onBuildEnd:{
        scripts: ['npm run yourCommand'],
        blocking: false,
        parallel: true
      }
    })
  ]
}

I hope this fix can help you or can help someone.

Answer 2

The issue is likely that you try to use a Webpack 4 plugin with Webpack 5, just Webpack has uninformative error messages. Try to upgrade the ReactLoadablePlugin.