Обновление Webpack SCSS Uncaught TypeError

Question

Я реагирую, проект webpack. Когда я обновляю свой файл scss, компилятор Webpack дает сбой и выдает следующую ошибку:

Uncaught TypeError: Супер-выражение должно быть либо нулевым, либо функцией, а не неопределенным в _inherits (mylibrary-2.2.1.js?4b97a9abb4c0baa4939f:sourcemap:39228)

Снимок экрана с ошибкой

Если я перезапущу сервер разработки веб-пакетов, ошибка исчезнет. И всякий раз, когда я обновляю файл.scss, снова возникает та же ошибка.

Эта ошибка началась после того, как я установил response-toolbox v2.0.0.0-beta.12. Я знаю, что ошибка может быть из-за бета-версии. Но авторы response-toolbox сказали, что ошибка в конфиге веб-пакета.

Обратите внимание, что ошибка началась после того, как я добавил следующую конфигурацию:

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

Номера версий:

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

веб-пакет: "^ 3.3.0",

webpack-dev-server: "^ 2.6.1",

реагировать: "^ 15.6.1"

Полная конфигурация веб-пакета:

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
};

Полный источник: https://github.com/arikanmstf/mylibrary

Answer 1

Попробуйте что-то вроде того, что ниже. Вам не нужно иметь полный объект для загрузчика postcss, если вы не хотите переопределять какие-либо свойства - вы можете просто иметь строку, 'postcss-loader'который как 'style-loader' Включено.

  {
    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',
                  },
                },
              },
            }),
          ],
        },
      },
    ],
  },