reactjs - mini-css-extract plugin with postcss throws this.getOptions is not a function
问题描述
I'm trying to set up a tailwind css for my personal project. It's a react SSR application. I'm having an issue with postcss setup under the webpack configuration. It throws the same error on every *.css file (even on the empty ones).
It looks like it can't resolve the configuration file or default options? Tried different configurations, but no effect. Initially, I thought that it could be something with my css files, but they all valid and compile if I remove postcss plugin
webpack config
const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const ESLintPlugin = require('eslint-webpack-plugin');
const paths = require('./paths');
module.exports = {
entry: {
index: path.resolve(paths.projectSrc, 'index.js'),
},
resolve: {
alias: {
'@src': paths.projectSrc,
},
},
module: {
rules: [
{
test: /.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
},
},
{
test: /\.html$/,
use: [
{
loader: 'html-loader',
options: { minimize: true },
},
],
exclude: /node_modules/,
},
{
exclude: /node_modules/,
test: /\.css$/,
use: [
{
loader: MiniCssExtractPlugin.loader,
options: {
publicPath: path.resolve(__dirname, './client-build/css/'),
},
},
{
loader: 'css-loader',
options: { importLoaders: 1 },
},
{
loader: 'postcss-loader',
options: {
postcssOptions: {
config: path.resolve(__dirname, 'postcss.config.js'),
},
},
},
],
},
{
test: /\.(woff2?|ttf|otf|eot|png|jpg|svg|gif)$/,
exclude: /node_modules/,
loader: 'file-loader',
options: {
name: './assets/[name].[ext]',
},
},
],
},
plugins: [
new ESLintPlugin(),
new HtmlWebpackPlugin({
template: path.resolve(paths.public, 'index.html'),
filename: 'index.html',
}),
new MiniCssExtractPlugin({
filename: '[name].bundle.css',
chunkFilename: '[id].css',
}),
new CopyWebpackPlugin({
patterns: [{ from: path.resolve(paths.public, 'assets'), to: 'assets' }],
}),
],
devtool: 'inline-source-map',
};
postcss.config.js
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
};
console output
解决方案
This is caused by a breaking change in v5.0.0 of postcss-loader
where support for version 4 of webpack
was dropped.
README which states:
Changelog
All notable changes to this project will be documented in this file. See standard-version for commit guidelines.
5.0.0 (2021-02-02)
⚠ BREAKING CHANGES
- minimum supported
webpack
version is5
How to fix it
You will need to downgrade postcss-loader
to v4.2.
Side Note for Angular Projects
In case this helps other readers: You may not just see this in React projects. I found this issue after upgrading an Angular 8 project to Angular 11.
While I can't help with React projects, this Angular hint may also be of use anyways.
If you are on an Angular project and you've already tried to fix this issue by upgrading to v5 of webpack
and then ran into dependency issues with libraries using v4 of webpack
- You will want to follow these steps.
- Downgrade
postcss-loader
to v4.2 as mentioned above. - Remove
webpack
v5 frompackage.json
. - Delete
package.lock.json
. - Delete
node_modules
directory. - Run
npm install
. - Run
ng serve
orng build
. - Tell the boss you fixed it.
After this, you should be good to go with tailwindcss and Angular.
推荐阅读
- ansible - 错误!意外的参数类型在起作用:
- reactjs - 使用反应路由器渲染了错误的组件
- flutter - 如何将流构建器的自动设置状态与我的手动设置状态分开?
- azure - 是否可以使用 NAT 有效地将静态 IP 地址分配给 Azure Web 应用程序?
- flutter - Flutter——关于架构、提供者和从服务器获取数据的问题
- python-3.x - 无法将我的 .py 文件转换为 WORKING .exe 文件
- javascript - 需要一些帮助来翻译 JSON 文件中的 get 值
- python - 为什么在 python 类中使用变量时会出现类型错误?
- rust - ink3的正确使用方法是什么?self.env().block_timestamp() | 测试错误::'未初始化的执行上下文:UninitializedBlocks'
- flutter - 在firestore中颤动搜索两个项目