TypeError: MiniCssExtractPlugin is not a constructor is an error that occurs when using the MiniCssExtractPlugin webpack plugin. This error is typically caused by either an incorrect import statement or not having the plugin installed.
To fix this error, you should first ensure that you have the MiniCssExtractPlugin installed in your project. You can do this by running the following command in your project's root directory:
npm install --save-dev mini-css-extract-plugin
Once the plugin is installed, you can import it in your webpack configuration file and add it to the plugins array:
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = {
// ...
plugins: [
new MiniCssExtractPlugin({
filename: '[name].css',
chunkFilename: '[id].css',
}),
// ...
],
// ...
};
It's also important to note that, as of webpack v4, the extract-text-webpack-plugin is deprecated and MiniCssExtractPlugin is the recommended replacement. If you're using an older version of webpack, you might need to update to the latest version.
Additionally, you need to use the MiniCssExtractPlugin.loader instead of the style-loader in your webpack rules for handling CSS files:
module.exports = {
// ...
module: {
rules: [
{
test: /\.css$/,
use: [
MiniCssExtractPlugin.loader,
'css-loader',
],
},
// ...
],
},
// ...
};
Once you've made these changes, the TypeError: MiniCssExtractPlugin is not a constructor error should be resolved.
Here's a full example of webpack configuration file that uses MiniCssExtractPlugin:
const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = {
entry: './src/index.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js',
},
module: {
rules: [
{
test: /\.css$/,
use: [
MiniCssExtractPlugin.loader,
'css-loader',
],
},
],
},
plugins: [
new MiniCssExtractPlugin({
filename: '[name].css',
chunkFilename: '[id].css',
}),
],
};
In this example, the entry property specifies the entry point for the application, which is src/index.js. The output property specifies the output location and filename for the bundled JavaScript file. The module.rules array is used to configure webpack's module loader, in this case it's configured to handle CSS files. Finally, the plugins array is used to configure webpack's plugins, in this case it's configured to use the Mini MiniCssExtractPlugin` is a webpack plugin that is used to extract CSS from JavaScript files. It works by taking the CSS that is bundled with JavaScript and saving it to a separate file. This helps to improve the performance of your application by separating the CSS and JavaScript files, allowing them to be loaded independently.
One of the benefits of using MiniCssExtractPlugin is that it allows you to use CSS modules in your application. CSS modules are a way to scope CSS styles to specific components, preventing naming conflicts and making it easier to manage your styles.
You can use CSS modules by configuring the css-loader to use the modules option and providing a localIdentName option. The localIdentName option allows you to configure the naming of the generated CSS classes.
module.exports = {
// ...
module: {
rules: [
{
test: /\.css$/,
use: [
MiniCssExtractPlugin.loader,
{
loader: 'css-loader',
options: {
modules: true,
localIdentName: '[name]__[local]___[hash:base64:5]',
},
},
],
},
// ...
],
},
// ...
};
Another benefit of using MiniCssExtractPlugin is that it can be used with code splitting feature of webpack, which allows you to split your application into smaller chunks that can be loaded on demand. This can help to improve the initial load time of your application by only loading the code that is needed.
To use code splitting with MiniCssExtractPlugin, you can use the SplitChunksPlugin along with the MiniCssExtractPlugin. The SplitChunksPlugin will automatically split your code into smaller chunks and the MiniCssExtractPlugin will extract the CSS from each chunk and save it to a separate file.
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const TerserJSPlugin = require('terser-webpack-plugin');
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
module.exports = {
// ...
optimization: {
minimizer: [new TerserJSPlugin({}), new OptimizeCSSAssetsPlugin({})],
splitChunks: {
chunks: 'async',
minSize: 30000,
maxSize: 0,
minChunks: 1,
maxAsyncRequests: 5,
maxInitialRequests: 3,
automaticNameDelimiter: '~',
name: true,
cacheGroups: {
vendors: {
test: /[\\/]node_modules[\\/]/,
priority: -10
},
default: {
minChunks: 2,
priority: -20,
reuseExistingChunk: true
}
}
}
},
plugins: [
new CleanWebpackPlugin(),
new MiniCssExtractPlugin({
filename: '[name].[contenthash].css',
chunkFilename: '[
## Popular questions
1. What causes the "TypeError: MiniCssExtractPlugin is not a constructor" error?
- This error occurs when the `MiniCssExtractPlugin` is not correctly imported or not installed in the project.
2. How do I fix the "TypeError: MiniCssExtractPlugin is not a constructor" error?
- To fix this error, ensure that you have the `MiniCssExtractPlugin` installed in your project by running `npm install --save-dev mini-css-extract-plugin`. Then, import the plugin in your webpack configuration file and add it to the `plugins` array. Also, use the `MiniCssExtractPlugin.loader` instead of the `style-loader` in your webpack rules for handling CSS files.
3. Can I use CSS modules with `MiniCssExtractPlugin`?
- Yes, you can use CSS modules with `MiniCssExtractPlugin`. You can configure the `css-loader` to use the `modules` option and provide a `localIdentName` option to configure the naming of the generated CSS classes.
4. How does code splitting work with `MiniCssExtractPlugin`?
- Code splitting with `MiniCssExtractPlugin` can be achieved by using the `SplitChunksPlugin` along with the `MiniCssExtractPlugin`. The `SplitChunksPlugin` automatically splits your code into smaller chunks and the `MiniCssExtractPlugin` extracts the CSS from each chunk and saves it to a separate file.
5. Is `MiniCssExtractPlugin` only compatible with the latest version of webpack?
- As of webpack v4, the `extract-text-webpack-plugin` is deprecated and `MiniCssExtractPlugin` is the recommended replacement. So, if you're using an older version of webpack, you might need to update to the latest version.
### Tag
Webpack.
