NodeJS webpack configuration error for sass and css - css

Question

I recently updated my NodeJS version to 'v16.13.2' and ever since then my template I built is breaking when trying to bundle the scss and css. Everything else works just fine when building.
I'm aware that node-sass had been deprecated and I should use sass (dart-sass). However, when I run my build I get this error:
Module parse failed: C:\Users\...\src\styles\styles.scss Unexpected token (1:3)
You may need an appropriate loader to handle this file type.
| h1 {
| color: white;
| text-align: center;
# ./src/app.js 25:0-31
# multi (webpack)-dev-server/client?http://localhost:8080 babel-polyfill ./src/app.js
I'm trying to get basic css to work but the loader doesn't seem to recognize the code.
Here is my code
package.json:
"scripts": {
"build:dev": "webpack",
"build:prod": "webpack -p --env production",
"dev-server": "webpack-dev-server",
"test": "cross-env NODE_ENV=test jest --config=jest.config.json",
"start": "node server/server.js",
"heroku-postbuild": "yarn run build:prod"
},
"dependencies": {
"babel-cli": "6.24.1",
"babel-core": "6.25.0",
"babel-loader": "7.1.1",
"babel-plugin-transform-class-properties": "6.24.1",
"babel-plugin-transform-object-rest-spread": "6.23.0",
"babel-polyfill": "6.26.0",
"babel-preset-env": "1.5.2",
"babel-preset-react": "6.24.1",
"css-loader": "^6.5.1",
"express": "4.15.4",
"extract-text-webpack-plugin": "3.0.0",
"firebase": "^8.9.1",
"history": "4.10.1",
"moment": "2.18.1",
"normalize.css": "7.0.0",
"numeral": "2.0.6",
"react": "^16.14.0",
"react-addons-shallow-compare": "15.6.0",
"react-dates": "12.7.0",
"react-dom": "^16.14.0",
"react-modal": "2.2.2",
"react-redux": "5.0.5",
"react-router-dom": "4.1.2",
"redux": "3.7.2",
"redux-mock-store": "1.2.3",
"redux-thunk": "2.2.0",
"sass": "^1.49.7",
"sass-loader": "7.3.1",
"style-loader": "0.18.2",
"uuid": "3.1.0",
"validator": "8.0.0",
"webpack": "3.1.0"
},
"devDependencies": {
"cross-env": "5.0.5",
"dotenv": "^14.2.0",
"enzyme": "^3.11.0",
"enzyme-adapter-react-16": "^1.15.6",
"enzyme-to-json": "^3.6.1",
"jest": "20.0.4",
"raf": "^3.4.1",
"react-test-renderer": "^16.14.0",
"webpack-dev-server": "2.5.1"
}
webpack.cnfig.js:
return{
entry: ['babel-polyfill','./src/app.js'],
output: {
path: path.join(__dirname, 'public', 'dist'),
filename: 'bundle.js'
},
module: {
rules: [{
loader: 'babel-loader',
test: /\.js$/,
exclude: /node_modules/
},
{
test: /\.s?css$/,
use: CSSExtract.extract({
use: [
{
loader: 'css-loader',
options:{
sourceMap: true
}
},
{
loader: 'sass-loader',
options:{
sourceMap: true
}
}
]
})
}
]
},
EDIT: So after much research, I have also figured out that 'extract-text-webpack-plugin' is also deprecated and the documentation suggests that I use 'mini-css-extract-plugin'. So, I read the documentation for that and applied it but still nothing is working. I just want my webpack to bundle my .js and .css in separate files . Right now all of it is being pushed into 'bundle.js' and it does not render any css.
EDIT 2: Here is my new webpack.config.js and it is working as I wanted:
webpack.config.js:
webpack.config.js:
const path = require('path');
const webpack = require('webpack');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
process.env.NODE_ENV = process.env.NODE_ENV || 'development'
if(process.env.NODE_ENV === 'test'){
require('dotenv').config({ path: '.env.test'})
}else if(process.env.NODE_ENV === 'development'){
require('dotenv').config({ path: '.env.development'})
}
module.exports = (env) => {
const isProd = env === 'production'
return{
entry: ['babel-polyfill','./src/app.js'],
output: {
path: path.join(__dirname, 'public', 'dist'),
filename: 'bundle.js'
},
module: {
rules: [{
loader: 'babel-loader',
test: /\.js$/,
exclude: /node_modules/
},
{
test: /\.(css)$/,
use: [MiniCssExtractPlugin.loader, 'css-loader']
},
{
test: /\.(s[ca]ss)$/,
use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader']
}
]
},
plugins:[
new MiniCssExtractPlugin({
filename:'styles.css'
}),
new webpack.DefinePlugin({
'process.env.FIREBASE_API_KEY': JSON.stringify(process.env.FIREBASE_API_KEY),
'process.env.FIREBASE_AUTH_DOMAIN': JSON.stringify(process.env.FIREBASE_AUTH_DOMAIN),
'process.env.FIREBASE_DATABASE_URL': JSON.stringify(process.env.FIREBASE_DATABASE_URL),
'process.env.FIREBASE_PROJECT_ID': JSON.stringify(process.env.FIREBASE_PROJECT_ID),
'process.env.FIREBASE_STORAGE_BUCKET': JSON.stringify(process.env.FIREBASE_STORAGE_BUCKET),
'process.env.FIREBASE_MESSAGE_SENDER_ID': JSON.stringify(process.env.FIREBASE_MESSAGE_SENDER_ID),
'process.env.FIREBASE_APP_ID': JSON.stringify(process.env.FIREBASE_APP_ID)
})
],
devtool: isProd ? 'source-map' :'inline-source-map',
devServer: {
contentBase: path.join(__dirname, 'public'),
historyApiFallback: true,
publicPath: '/dist'
}
}
}

Answer 1

Alright I finally have an answer for all of this. So I essentially had to update a lot of my webpack due to deprecated modules. I ended up using 'mini-css-extract-plugin' and found out how to set it up. If anyone is working on a project using Nodejs version 16 and up, try this for the webpack and see if it works. I'll post my results in the initial question.