Webpack SCSS Update Uncaught TypeError

Question

I have react, webpack project. When I update my scss file, Webpack compiler fails and throws following error:

Uncaught TypeError: Super expression must either be null or a function, not undefined at _inherits (mylibrary-2.2.1.js?4b97a9abb4c0baa4939f:sourcemap:39228)

Screen shot of the error

If I restart the webpack dev server, the error disappears. And whenever I update a .scss file, same error again.

That error started to after I install react-toolbox v2.0.0.0-beta.12 . I know that error might be because of the beta package. But react-toolbox contributors said that the error is on the webpack config.

Note that the error has started after I added the following configuration:

sourceMap: true,
importLoaders: 1,
localIdentName: "[name]--[local]--[hash:base64:8]"

Version numbers:

extract-text-webpack-plugin: "^3.0.0",

webpack: "^3.3.0",

webpack-dev-server: "^2.6.1",

react: "^15.6.1"

Full webpack config:

const ExtractTextPlugin = require("extract-text-webpack-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const UglifyJSPlugin = require("uglifyjs-webpack-plugin");
const webpack = require("webpack");
const argv = require("yargs").argv;
const path = require("path");

const isProd = argv.env === 'prod';
const configResolve = require.resolve("./src/config/" + argv.env + ".js");
const config = require("./src/config/" + argv.env + ".js");
const _package = require("./package.json");
const JS_JSX_PATTERN = /\.jsx?$/;
const SCSS_PATTERN = /\.scss$/;
const CSS_PATTERN = /\.css$/;
const ASSET_PATTERN = /\.(jpe?g|png|gif|svg|ttf|otf|eot|woff(2)?)(\?v=\d+)?$/;
const DEV_SERVER_PORT = 8080;
const PROJECT_NAME = process.env.npm_package_name;
const VERSION = (_package.version);
const DESCRIPTION = (_package.description);
const PACKAGE_NAME = PROJECT_NAME + "-" + VERSION;
const distFolder = isProd ? 'dist' : '';

const extractCSS = new ExtractTextPlugin(`${PACKAGE_NAME}.css`);

const HtmlWebpack =
new HtmlWebpackPlugin({
  template: 'src/index.ejs',
  inject: 'body',
  hash: true,
  filename: `index.html`,
  description: DESCRIPTION
});

let plugins = [HtmlWebpack, extractCSS];
let rules = [
  {
    test: JS_JSX_PATTERN,
    include: [
      path.resolve(__dirname, "src/scripts")
    ],
    loader: "babel-loader",
    options: {
      presets: ["react", "es2015", "stage-1"]
    }
  },
  {
    test: SCSS_PATTERN,
    include: [
      path.resolve(__dirname, "src/scripts")
    ],
    use: extractCSS.extract({
      fallback: "style-loader",
      use: [{
        loader: "css-loader",
        options: {
          minimize: isProd,
          sourceMap: true,
          importLoaders: 1,
          localIdentName: "[name]--[local]--[hash:base64:8]"
        }
      },
        "sass-loader"
      ]
    })
  },
  {
    test: ASSET_PATTERN,
    loader: 'file-loader',
    options: {
      name: `assets/[name]-[hash].[ext]`
    }
  },
  {
    test: JS_JSX_PATTERN,
    include: [
      path.resolve(__dirname, "src/scripts")
    ],
    enforce: 'pre',
    loader: 'eslint-loader',
    options: {
      failOnWarning: false,
      failOnError: isProd,
      quiet: isProd
    }
  },
  {
    test: CSS_PATTERN,
    loader: 'style-loader!css-loader'
  }
];

if (isProd) {
  plugins.push(
    new UglifyJSPlugin(),
    new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: JSON.stringify('production')
      }
    })
  );
}

module.exports = {
  entry: [
    "./src/scripts/index.jsx",
    "./src/scripts/index.scss"
  ],
  output: {
    path: path.resolve(__dirname, distFolder),
    publicPath: config.homeUrl,
    filename: `${PACKAGE_NAME}.js`
  },
  module: {
    rules: rules
  },
  resolve: {
    extensions: [".js", ".jsx"],
    modules: [
      path.resolve(__dirname, 'src/scripts'),
      path.resolve(__dirname, 'src/assets'),
      path.resolve(__dirname, 'node_modules')
    ],
    alias: {
      config$: configResolve
    }
  },
  devServer: {
    port: DEV_SERVER_PORT,
    historyApiFallback: true,
    contentBase: "./"
  },
  plugins: plugins
};

Full source: https://github.com/arikanmstf/mylibrary

your config file is missing `postcss-loader` which is needed for `react-toolbox` — Venugopal, Aug 25 '17 at 08:47

score 0 · Answer 1 · answered Sep 02 '18 at 20:23

Try something like what is below. You do not have to have a full object for the postcss-loader if you do not want to override any properties - you can just have a string, 'postcss-loader', which is how the 'style-loader' is included.

  {
    test: /\.css$/,
    include: path.resolve(__dirname, 'node_modules'),
    use: [
      'style-loader',
      {
        loader: 'css-loader',
        options: {
          modules: true, // default is false
          sourceMap: true,
          importLoaders: 1,
          localIdentName: '[name]--[local]--[hash:base64:8]',
        },
      },
      {
        loader: 'postcss-loader',
        options: {
          plugins: [
            cssnext({
              features: {
                customProperties: {
                  variables: {
                    'color-primary': '#269acc',
                    'preferred-font': 'Futura',
                  },
                },
              },
            }),
          ],
        },
      },
    ],
  },

Webpack SCSS Update Uncaught TypeError

1 Answers1