Why can't I import primereact styles to webpack 4 react boilerplate? - webpack-4

Question

I am getting this error when I run the app:
ERROR in ./node_modules/primereact/resources/themes/saga-blue/theme.css (./node_modules/css-loader!./node_modules/style-loader!./node_modules/css-loader!./node_modules/primereact/resources/themes/saga-blue/theme.css)
Module build failed (from ./node_modules/css-loader/index.js):
Unknown word (2:1)
1 |
> 2 | var content = require("!!../../../../css-loader/index.js!./theme.css");
| ^
3 |
4 | if(typeof content === 'string') content = [[module.id, content, '']];
5 |
# ./node_modules/primereact/resources/themes/saga-blue/theme.css 2:14-136 21:1-42:3 22:19-141
# ./src/index.js
I have not modified any of the common, dev and prod webpacks. I've read the other 2 questions posted around this but none of the answers worked.
I'll post the webpack configurations for your convenience.
Common:
const path = require('path');
const HtmlWebPackPlugin = require('html-webpack-plugin');
module.exports = {
entry: {
main: path.resolve(__dirname, "../src", "index.js"),
},
output: {
filename: '[name].[hash].js',
path: path.resolve(__dirname, '../dist'),
publicPath: "/"
},
devServer: {
port: 3042,
historyApiFallback: true,
overlay: true,
open: true,
},
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: [/node_modules/],
use: [{ loader: "babel-loader" }]
},
{
test: /.*\.(gif|png|jp(e*)g|svg)$/i,
use: [
{
loader: "url-loader",
options: {
limit: 21000,
name: "images/[name]_[hash:7].[ext]"
}
}
]
},
// Vendor CSS loader
// This is necessary to pack third party libraries like antd
{
test: /\.css$/,
include: path.resolve(__dirname, '../node_modules'),
use: [
'style-loader',
'css-loader'
],
},
]
},
plugins: [
new HtmlWebPackPlugin({
template: path.resolve(__dirname, '../public', 'index.html'),
}),
],
resolve: {
extensions: ['.js', '.jsx']
},
}
Dev:
const merge = require('webpack-merge');
const common = require('./webpack.common.js');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const mapStyle = process.env.MAP_STYLE === 'true';
module.exports = merge (common, {
mode: 'development',
devtool: 'inline-source-map',
devServer: {
port: 3042,
historyApiFallback: true,
overlay: true,
open: true,
stats: 'errors-only'
},
module: {
rules: [
{
test: /\.css$/,
use: [
{ loader: "style-loader" },
{ loader: mapStyle ? "css-loader?sourceMap" : "css-loader" }
]
},
{
test: /\.s(a|c)ss$/,
use: [
{ loader: "style-loader" },
{ loader: "css-loader" },
{ loader: "sass-loader" }
]
},
]
},
plugins: [
new MiniCssExtractPlugin({
filename: "[name].css",
}),
],
});
Prod:
const merge = require('webpack-merge');
const common = require('./webpack.common.js');
const path = require('path');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const OptimizeCssAssetsPlugin = require("optimize-css-assets-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const ManifestPlugin = require('webpack-manifest-plugin');
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
const enableBundleAnalyzer = process.env.ENABLE_ANALYZER === 'true';
module.exports = merge(common, {
mode: 'production',
devtool: 'source-map',
module: {
rules: [
{
test: /\.css$/,
use: [
{ loader: MiniCssExtractPlugin.loader },
{ loader: "css-loader" }
]
},
{
test: /\.s(a|c)ss$/,
use: [
{ loader: MiniCssExtractPlugin.loader },
{ loader: "css-loader" },
{ loader: "sass-loader" }
]
},
]
},
optimization: {
splitChunks: {
chunks: 'all',
},
runtimeChunk: false,
},
plugins: [
new CleanWebpackPlugin([path.resolve(__dirname, '../dist')], {
root: process.cwd(),
verbose: true,
dry: false
}),
new OptimizeCssAssetsPlugin(),
new MiniCssExtractPlugin({
filename: "[name].[hash:8].css",
chunkFilename: "[id].[hash:8].css"
}),
new ManifestPlugin(),
new BundleAnalyzerPlugin({
analyzerMode: enableBundleAnalyzer === true ? 'static' : 'disabled',
openAnalyzer: true,
}),
],
});
And here is where I import them:
import React from 'react';
import ReactDOM from 'react-dom';
import {Provider} from 'react-redux';
import App from './components/App';
import store from './app/store';
import './assets/styles/style.sass';
import './assets/styles/style.css';
import './index.scss';
import 'primereact/resources/primereact.min.css';
import 'primeicons/primeicons.css';
import 'primeflex/primeflex.css';
import 'primereact/resources/themes/saga-blue/theme.css';
import '/src/assets/styles/customTheme.scss';
ReactDOM.render(
<React.StrictMode>
<Provider store={store}>
<App />
</Provider>
</React.StrictMode>,
document.getElementById('root')
);
// Check if hot reloading is enable. If it is, changes won't reload the page.
// This is related to webpack-dev-server and works on development only.
if (module.hot) {
module.hot.accept();
}
One of the questions answered this by saying that i needed the url-loader but, as you can see, the boilerplate contains that aswell.
I hope I gave you enough information. Thank you in advance.

Answer 1

I think I've found my answer. I needed to exclude node_modules from the css loader rules from both the dev and prod configurations since the common configuration was handling that. The error was thrown because there were 2 conflicting css loaders.