Typeerror: compiler.plugin is not a function [SOLVED]

TypeError: compiler.plugin is not a function is a common error that can occur in JavaScript when using webpack, a popular module bundler for JavaScript applications.

In this article, we will discuss the possible causes of this Typeerror, and provide solutions to resolve the error in your JavaScript application.

So first let’s discuss what this Typeerror means.

What does Typeerror: compiler.plugin is not a function mean?

This error message Typeerror: compiler.plugin is not a function typically means that you are trying to call the plugin method on an object that is not a function.

In JavaScript, plugins can be used in many different contexts such as in Webpack or Babel. When using a plugin, it is common to call the plugin method on an object that represents the plugin. However, if this object is not actually a function, you will receive the Typeerror error.

Now let’s talk about the causes of this Typeerror.

Causes of Typeerror: compiler.plugin is not a function

TypeError: compiler.plugin is not a function is a common error that occurs when working with webpack. This error occurs when you try to access the plugin method on the webpack compiler object, but it is not a function.

Here’s an example scenario where this error could occur in a webpack configuration file:

const webpack = require('webpack');
const MyPlugin = require('./my-plugin');

module.exports = {
  plugins: [
    new webpack.optimize.UglifyJsPlugin(),
    MyPlugin()
  ]
}

In this example, we are trying to add an instance of the custom “MyPlugin” plugin to the webpack configuration, but we forgot to include the “new” keyword before calling the plugin constructor.

This will cause the “MyPlugin” function to be called immediately, and if it does not return a function that can be used as a plugin, we will get the “compiler.plugin is not a function” error.

Output

Typeerror: compiler.plugin is not a function

Here are some different causes of the “TypeError: compiler.plugin is not a function” error in webpack along with example code:

1. A mismatch between webpack and plugin versions:

This error can occur when there is a mismatch between the version of webpack and the plugin being used.

For example, if a plugin is designed to work with webpack version 3.x but is being used with webpack version 4.x, it may result in this error.

2. Missing or incorrectly configured plugin:

This error can occur if a plugin is not properly installed or configured.

For example, if a required option is missing or has an invalid value, it may result in this error.

Example:

const webpack = require('webpack');
const MyPlugin = require('my-webpack-plugin');

module.exports = {
  plugins: [
    new webpack.optimize.UglifyJsPlugin(),
    new MyPlugin({
      option1: 'value1'
    })
  ]
};

3. Using a plugin that is not compatible with webpack:

This error can occur if a plugin is not compatible with the version of webpack being used.

For example, if a plugin is designed to work with webpack version 3.x but is being used with webpack version 4.x, it may result in this error.

Example:

const webpack = require('webpack');
const MyPlugin = require('my-webpack-plugin-2');

module.exports = {
  plugins: [
    new webpack.optimize.UglifyJsPlugin(),
    new MyPlugin()
  ]
};

Now let’s solve this typeerrorr.

How to solve Typeerror: compiler.plugin is not a function?

To fix Typeerror: compiler.plugin is not a function error, we should make sure that we are correctly instantiating any custom plugins that we want to use in our webpack configuration.

In the example above, we can fix the error by changing the code to:

const webpack = require('webpack');
const MyPlugin = require('./my-plugin');

module.exports = {
  plugins: [
    new webpack.optimize.UglifyJsPlugin(),
    new MyPlugin()
  ]
}

Here, we added the “new” keyword to correctly instantiate the “MyPlugin” object before passing it to the plugins array in our webpack configuration. By making this change, we can avoid the “compiler.plugin is not a function” error and ensure that our custom plugin is correctly registered with webpack

Here are the other possible solutions to fix Typeerror: compiler.plugin is not a function:

Solution 1: Update webpack and plugins:

You can try updating webpack and plugins to the latest version. This can be done using the following command:

npm update

Solution 2: Check plugin configuration:

Check the plugin configuration to make sure that it is correct. You can refer to the plugin documentation to make sure that all required options are included and have valid values.

For Example:

const webpack = require('webpack');
const MyPlugin = require('my-webpack-plugin');

module.exports = {
  plugins: [
    new webpack.optimize.UglifyJsPlugin(),
    new MyPlugin({
      option1: 'value1',
      option2: 'value2'
    })
  ]
};

Solution 3: Check webpack configuration:

Check the webpack configuration file to make sure that all required plugins are properly configured and installed.

For Example:

const webpack = require('webpack');
const MyPlugin = require('my-webpack-plugin');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: __dirname + '/dist'
  },
  plugins: [
    new webpack.optimize.UglifyJsPlugin(),
    new MyPlugin({
      option1: 'value1',
      option2: 'value2'
    })
  ]
};

Solution 4: Downgrade webpack version:

If none of the above solutions work, try downgrading the webpack version to the one that is compatible with the plugin you are using.

Just like the example stated below:

const webpack = require('webpack');
const MyPlugin = require('my-webpack-plugin');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: __dirname + '/dist'
  },
  plugins: [
    new webpack.optimize.UglifyJsPlugin(),
    new MyPlugin({
      option1: 'value1',
      option2: 'value2'
    })
  ],
  resolve: {
    alias: {
      'webpack': '[email protected]'
    }
  }
};

Solution 5: Use alternative plugin:

If none of the above solutions work, try using an alternative plugin that is compatible with your version of webpack.

Here’s the example code:

const webpack = require('webpack');
const MyPlugin = require('my-webpack-plugin-2');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: __dirname + '/dist'
  },
  plugins: [
    new webpack.optimize.UglifyJsPlugin(),
    new MyPlugin({
      option1: 'value1',
      option2: 'value2'
    })
  ]
};

Solution 6: Check for syntax errors:

Check for any syntax errors in your webpack configuration file. This error message can sometimes be caused by a syntax error that occurs earlier in the configuration file.

Hopefully, one of these solutions will help you to resolve the “TypeError: compiler.plugin is not a function” error.

Conclusion

In conclusion, this article Typeerror: compiler.plugin is not a function typically means that you are trying to call the plugin method on an object that is not a function.

By following the given solution, surely you can fix the error quickly and proceed to your coding project again.

If you have any questions or suggestions, please leave a comment below. For more attributeerror tutorials in Python, visit our website.

John Paul Blauro

Programmer & Technical Writer at PIES IT Solution

John Paul Blauro is a programmer and writer at PIES IT Solution, author of 55 Python error-fix tutorials at itsourcecode.com. Specializes in Python TypeError debugging (str/int type errors, unsupported operand types, iterable-related issues) and AttributeError debugging (NoneType, dict/list/series object attribute errors) for developers and BSIT students.

Expertise: Python · Python TypeError · Python AttributeError · Type Debugging · Error Handling  · View all posts by John Paul Blauro →