I am stuck in the process of setting up my new React project. I am using webpack, webpack-dev-middleware, express etc to implement custom server. I am getting issue when I import my scss (sass) file.
Following error is thrown on my browser console
Uncaught TypeError: _node_modules_mini_css_extract_plugin_dist_loader_js_node_modules_css_loader_dist_cjs_js_node_modules_postcss_loader_dist_cjs_js_node_modules_sass_loader_dist_cjs_js_ruleSet_1_rules_3_use_4_style_scss__WEBPACK_IMPORTED_MODULE_1__.default is undefined
Also my terminal shows following warning but compiles the project
WARNING in ./src/styles/style.scss 13:15-29
export 'default' (imported as 'content') was not found in '!!../../node_modules/mini-css-extract-plugin/dist/loader.js!../../node_modules/css-loader/dist/cjs.js!../../node_modules/postcss-loader/dist/cjs.js!../../node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[3].use[4]!./style.scss' (possible exports: )
Here are my files:
package.json
{
"name": "XYXYXY",
"version": "0.1.0",
"private": true,
"author": "XYZ",
"license": "Proprietary",
"dependencies": {
"@popperjs/core": "^2.5.3",
"@testing-library/jest-dom": "^5.11.4",
"@testing-library/react": "^11.0.4",
"@testing-library/user-event": "^12.1.7",
"acorn": "^6.4.2",
"axios": "^0.20.0",
"babel-polyfill": "^6.26.0",
"bootstrap": "^4.5.2",
"html2canvas": "^1.0.0-rc.7",
"jquery": "^3.5.1",
"jspdf": "^2.1.1",
"lodash": "^4.17.20",
"moment": "^2.29.1",
"mongoose": "^5.10.9",
"nodemon": "^2.0.4",
"popper.js": "^1.16.1",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-redux": "^7.2.1",
"react-router-dom": "^4.0.4",
"react-tooltip": "^4.2.10",
"redux": "^4.0.5",
"redux-form": "^8.3.6",
"redux-thunk": "^2.3.0",
"typescript": "^4.0.3",
"url-loader": "^1.1.2"
},
"scripts": {
"start": "nodemon server.js",
"clean": "rimraf public",
"build": "NODE_ENV=production npm run clean && webpack --progress"
},
"devDependencies": {
"@babel/core": "^7.11.6",
"@babel/plugin-proposal-class-properties": "^7.10.4",
"@babel/preset-env": "^7.11.5",
"@babel/preset-react": "^7.10.4",
"autoprefixer": "^10.0.1",
"babel-loader": "^8.1.0",
"css-loader": "^4.3.0",
"eslint": "^7.11.0",
"eslint-config-airbnb": "^18.2.0",
"eslint-plugin-import": "^2.22.1",
"eslint-plugin-jsx-a11y": "^6.3.1",
"eslint-plugin-react": "^7.21.4",
"eslint-plugin-react-hooks": "^4.1.2",
"html-webpack-plugin": "^4.5.0",
"mini-css-extract-plugin": "^1.0.0",
"node-sass": "^4.14.1",
"postcss": "^8.1.1",
"postcss-loader": "^4.0.4",
"rimraf": "^3.0.2",
"sass-loader": "^10.0.3",
"style-loader": "^2.0.0",
"webpack": "^5.0.0",
"webpack-cli": "^4.0.0",
"webpack-dev-middleware": "4.0.0-rc.3",
"webpack-dev-server": "^3.11.0"
}
}
webpack.config.js
const webpack = require('webpack');
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const env = process.env.NODE_ENV;
const VENDOR_LIBS = [
'lodash', 'react', 'react-dom', 'react-redux',
'redux', 'axios',
];
module.exports = {
mode: env || 'development',
entry: {
bundle: ['babel-polyfill', './src/index.js'],
vendor: VENDOR_LIBS,
},
output: {
path: path.join(__dirname, 'public'),
publicPath: '/',
filename: '[name].[chunkhash].js',
},
devtool: 'inline-source-map',
devServer: {
historyApiFallback: true,
contentBase: './public',
},
module: {
rules: [
{
use: 'babel-loader',
test: /\.js$/,
exclude: /node_modules/,
},
{
use: ['style-loader', 'css-loader'],
test: /\.css$/,
},
{
test: /\.jsx?$/,
exclude: /node_modules/,
use: [
{
loader: 'babel-loader',
options: {
presets: [
'@babel/env',
'@babel/react',
{ 'plugins': ['@babel/plugin-proposal-class-properties'] },
],
},
},
],
},
{
test: /\.scss$/,
use: [
'style-loader',
MiniCssExtractPlugin.loader,
'css-loader',
'postcss-loader',
{
loader: 'sass-loader',
options: {
implementation: require('node-sass'),
},
},
],
},
{
test: /\.(jpe?g|png|gif|woff|woff2|eot|ttf|svg)(\?[a-z0-9=.]+)?$/,
loader: 'url-loader',
options: {
limit: 100000,
},
},
],
},
plugins: [
new HtmlWebpackPlugin({
template: 'src/index.html',
}),
new MiniCssExtractPlugin({
filename: 'style.[contenthash].css',
}),
new webpack.DefinePlugin({
'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV),
}),
],
};
server.js
const express = require('express');
const path = require('path');
const app = express();
if(process.env.NODE_ENV!== 'production'){
const { default: webpackMiddleware } = require('webpack-dev-middleware');
const webpack = require('webpack');
const webpackConfig = require('./webpack.config.js');
app.use(webpackMiddleware(webpack(webpackConfig)));
}
else{
app.use(express.static('public'));
app.get('*',(req,res)=>{
res.sendFile(path.join(__dirname,'public/index.html'));
});
}
app.listen(process.env.PORT || 3050, () => console.log('Listening'));
I have wasted several hours till now but looks like I am stuck now. Any help is deeply appreciated.
What I have tried till now
- Rebulding & re-installing
node-sasspackage - Updating my dependencies to latest versions
- Looking in github issues on webpack, webpack-dev-middleware etc
- Looking at similar SO issues but not able to find issue exactly like mine
Note: I believe that the issue is due to incompatibility / issues in the set of library which works for saas (scss file). Just see css-loader style-loader postcss-loader sass-loader node-sass. May be there is something I am messing up in config.
