title: Uncaught TypeError: WEBPACK_IMPORTED_MODULE_1__.default is undefined (React, SASS,SCSS)
body: <p>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.</p>
  <p>Following error is thrown on my browser console</p>
  <pre><code>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
  </code></pre>
  <p>Also my terminal shows following warning but compiles the project</p>
  <pre><code>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: )
  </code></pre>
  <p><strong>Here are my files:</strong></p>
  <p><strong>package.json</strong></p>
  <pre><code>{
    &quot;name&quot;: &quot;XYXYXY&quot;,
    &quot;version&quot;: &quot;0.1.0&quot;,
    &quot;private&quot;: true,
    &quot;author&quot;: &quot;XYZ&quot;,
    &quot;license&quot;: &quot;Proprietary&quot;,
    &quot;dependencies&quot;: {
      &quot;@popperjs/core&quot;: &quot;^2.5.3&quot;,
      &quot;@testing-library/jest-dom&quot;: &quot;^5.11.4&quot;,
      &quot;@testing-library/react&quot;: &quot;^11.0.4&quot;,
      &quot;@testing-library/user-event&quot;: &quot;^12.1.7&quot;,
      &quot;acorn&quot;: &quot;^6.4.2&quot;,
      &quot;axios&quot;: &quot;^0.20.0&quot;,
      &quot;babel-polyfill&quot;: &quot;^6.26.0&quot;,
      &quot;bootstrap&quot;: &quot;^4.5.2&quot;,
      &quot;html2canvas&quot;: &quot;^1.0.0-rc.7&quot;,
      &quot;jquery&quot;: &quot;^3.5.1&quot;,
      &quot;jspdf&quot;: &quot;^2.1.1&quot;,
      &quot;lodash&quot;: &quot;^4.17.20&quot;,
      &quot;moment&quot;: &quot;^2.29.1&quot;,
      &quot;mongoose&quot;: &quot;^5.10.9&quot;,
      &quot;nodemon&quot;: &quot;^2.0.4&quot;,
      &quot;popper.js&quot;: &quot;^1.16.1&quot;,
      &quot;react&quot;: &quot;^16.13.1&quot;,
      &quot;react-dom&quot;: &quot;^16.13.1&quot;,
      &quot;react-redux&quot;: &quot;^7.2.1&quot;,
      &quot;react-router-dom&quot;: &quot;^4.0.4&quot;,
      &quot;react-tooltip&quot;: &quot;^4.2.10&quot;,
      &quot;redux&quot;: &quot;^4.0.5&quot;,
      &quot;redux-form&quot;: &quot;^8.3.6&quot;,
      &quot;redux-thunk&quot;: &quot;^2.3.0&quot;,
      &quot;typescript&quot;: &quot;^4.0.3&quot;,
      &quot;url-loader&quot;: &quot;^1.1.2&quot;
    },
    &quot;scripts&quot;: {
      &quot;start&quot;: &quot;nodemon server.js&quot;,
      &quot;clean&quot;: &quot;rimraf public&quot;,
      &quot;build&quot;: &quot;NODE_ENV=production npm run clean &amp;&amp; webpack --progress&quot;
    },
    &quot;devDependencies&quot;: {
      &quot;@babel/core&quot;: &quot;^7.11.6&quot;,
      &quot;@babel/plugin-proposal-class-properties&quot;: &quot;^7.10.4&quot;,
      &quot;@babel/preset-env&quot;: &quot;^7.11.5&quot;,
      &quot;@babel/preset-react&quot;: &quot;^7.10.4&quot;,
      &quot;autoprefixer&quot;: &quot;^10.0.1&quot;,
      &quot;babel-loader&quot;: &quot;^8.1.0&quot;,
      &quot;css-loader&quot;: &quot;^4.3.0&quot;,
      &quot;eslint&quot;: &quot;^7.11.0&quot;,
      &quot;eslint-config-airbnb&quot;: &quot;^18.2.0&quot;,
      &quot;eslint-plugin-import&quot;: &quot;^2.22.1&quot;,
      &quot;eslint-plugin-jsx-a11y&quot;: &quot;^6.3.1&quot;,
      &quot;eslint-plugin-react&quot;: &quot;^7.21.4&quot;,
      &quot;eslint-plugin-react-hooks&quot;: &quot;^4.1.2&quot;,
      &quot;html-webpack-plugin&quot;: &quot;^4.5.0&quot;,
      &quot;mini-css-extract-plugin&quot;: &quot;^1.0.0&quot;,
      &quot;node-sass&quot;: &quot;^4.14.1&quot;,
      &quot;postcss&quot;: &quot;^8.1.1&quot;,
      &quot;postcss-loader&quot;: &quot;^4.0.4&quot;,
      &quot;rimraf&quot;: &quot;^3.0.2&quot;,
      &quot;sass-loader&quot;: &quot;^10.0.3&quot;,
      &quot;style-loader&quot;: &quot;^2.0.0&quot;,
      &quot;webpack&quot;: &quot;^5.0.0&quot;,
      &quot;webpack-cli&quot;: &quot;^4.0.0&quot;,
      &quot;webpack-dev-middleware&quot;: &quot;4.0.0-rc.3&quot;,
      &quot;webpack-dev-server&quot;: &quot;^3.11.0&quot;
    }
  }
  </code></pre>
  <p><strong>webpack.config.js</strong></p>
  <pre><code>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),
      }),
    ],
  };
  </code></pre>
  <p><strong>server.js</strong></p>
  <pre><code>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)=&gt;{
      res.sendFile(path.join(__dirname,'public/index.html'));
    });
  }
  
  app.listen(process.env.PORT || 3050, () =&gt; console.log('Listening'));
  </code></pre>
  <p>I have wasted several hours till now but looks like I am stuck now.
  Any help is deeply appreciated.</p>
  <p><strong>What I have tried till now</strong></p>
  <ul>
  <li>Rebulding &amp; re-installing <code>node-sass</code> package</li>
  <li>Updating my dependencies to latest versions</li>
  <li>Looking in github issues on webpack, webpack-dev-middleware etc</li>
  <li>Looking at similar SO issues but not able to find issue exactly like mine</li>
  </ul>
  <p><strong>Note:</strong> I believe that the issue is due to incompatibility / issues in the set of library which works for saas (scss file). Just see <code>css-loader</code> <code>style-loader</code> <code>postcss-loader</code> <code>sass-loader</code> <code>node-sass</code>. May be there is something I am messing up in config.</p>