Uncaught TypeError: WEBPACK_IMPORTED_MODULE_1__.default is undefined (React, SASS,SCSS)

Question

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-sass package
• 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.

Answer 1

If you or somebody else is still struggling with MiniCssExtractPlugin and the 'export default error', here is a possible solution:

{
   loader: MiniCssExtractPlugin.loader,
   options: {
      esModule: false
   }
},

set esModule to false in optins for MinisCssExtractPlugin

Answer 2

In you webpack.config.js

 {
    test: /\.scss$/,
    use: [
      'style-loader',  <-----
      MiniCssExtractPlugin.loader, <------
      'css-loader',
      'postcss-loader',
      {
        loader: 'sass-loader',
        options: {
          implementation: require('node-sass'),
        },
      },
    ],
  },

Choose only one: 'style-loader' or MiniCssExtractPlugin.loader (where i put <---- sign). Remove either 1 will solve it.