Error: “extract-text-webpack-plugin” loader is use

问题:

Here, I am getting the following error:

when I am trying to run karma tests

ERROR in ./node_modules/@cwds/components/dist/Layouts/Layout.module.scss
Module build failed: Error: "extract-text-webpack-plugin" loader is used without the corresponding plugin, refer to https://github.com/webpack/extract-text-webpack-plugin for the usage example
    at Object.pitch (/Users/sunilbiradar/Documents/CALS/node_modules/extract-text-webpack-plugin/dist/loader.js:57:11)
 @ ./node_modules/@cwds/components/dist/Layouts/Page/Page.js 10:0-43
 @ ./node_modules/@cwds/components/dist/Layouts/Page/index.js
 @ ./node_modules/@cwds/components/dist/Layouts/index.js
 @ ./node_modules/@cwds/components/dist/index.js
 @ ./app/javascript/facility/facilityAddress.jsx
 @ ./test/javascript/facility/facilityAddress_tests.js
 @ ./test/javascript _tests$
 @ ./test/javascript/tests.webpack.js

and all errors are pointing to the same library, which I am trying to use. i.e .,

https://github.com/ca-cwds/design-system

extract-text-webpack-plugin is no were used in the project except in the node modules of the library which i am trying to use.

webpacker.yml:

# Note: You must restart bin/webpack-dev-server for changes to take effect

default: &default
  source_path: app/javascript
  source_entry_path: packs
  public_output_path: packs
  cache_path: tmp/cache/webpacker

  # Additional paths webpack should lookup modules
  # ['app/assets', 'engine/foo/app/assets']
  resolved_paths: []

  # Reload manifest.json on all requests so we reload latest compiled packs
  cache_manifest: false

  extensions:
    - .erb
    - .jsx
    - .js
    - .sass
    - .scss
    - .css
    - .png
    - .svg
    - .gif
    - .jpeg
    - .jpg

development:
  <<: *default
  compile: true

  # Reference: https://webpack.js.org/configuration/dev-server/
  dev_server:
    https: false
    host: 0.0.0.0
    port: 5080
    public: 0.0.0.0:5080
    hmr: false
    # Inline should be set to true if using HMR
    inline: true
    overlay: true
    compress: true
    disable_host_check: true
    use_local_ip: false
    quiet: false
    headers:
      'Access-Control-Allow-Origin': '*'
    watch_options:
      ignored: /node_modules/


test:
  <<: *default
  compile: true

  # Compile test packs to a separate directory
  public_output_path: packs-test

production:
  <<: *default
  public_output_path: cals/packs

  # Production depends on precompilation of packs prior to booting for performance.
  compile: false

  # Cache manifest.json for performance
  cache_manifest: true

karma.config:

var webpack = require('webpack')
var webpackConfig = require('./webpack/test.js')
// process.env.PHANTOMJS_BIN = './../node_modules/.bin/phantomjs'

module.exports = function (config) {
  config.set({

    // base path that will be used to resolve all patterns (eg. files, exclude)
    basePath: '',

    // frameworks to use
    // available frameworks: https://npmjs.org/browse/keyword/karma-adapter
    frameworks: ['jasmine'],

    // list of files / patterns to load in the browser
    files: [
      {pattern: './../test/javascript/tests.webpack.js', watched: true}
    ],

    // list of files to exclude
    exclude: [
      './../node_modules/'
    ],

    // preprocess matching files before serving them to the browser
    // available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
    preprocessors: {
      './../test/javascript/tests.webpack.js': ['webpack', 'sourcemap']
    },

    webpack: {
      devtool: 'inline-source-map',
      module: webpackConfig.module,
      resolve: webpackConfig.resolve,
      externals: {
        'react/addons': true,
        'react/lib/ReactContext': true,
        'react-addons-test-utils': true,
        'react/lib/ExecutionEnvironment': true
      }
    },

    // possible values: 'dots', 'progress'
    // available reporters: https://npmjs.org/browse/keyword/karma-reporter
    reporters: ['progress', 'html', 'coverage'],
    htmlReporter: {
      outputFile: './../reports/karma_test_results.html',
      // Optional
      pageTitle: 'Unit Tests',
      subPageTitle: 'A sample project description',
      groupSuites: true,
      useCompactStyle: true,
      useLegacyStyle: true
    },
    coverageReporter: {
      dir: '../reports/coverage/karma/',
      subdir: '.',
      check: {
        global: {
          statements: 88,
          branches: 81,
          functions: 86,
          lines: 89,
          excludes: []
        }
      }
      // Would output the results into: .'../reports/coverage/'
    },

    webpackMiddleware: {
      noInfo: true // please don't spam the console when running in karma!
    },
    plugins: [
      'karma-sourcemap-loader',
      'karma-htmlfile-reporter',
      'karma-jasmine',
      'karma-coverage',
      'karma-chrome-launcher',
      'karma-webpack',
      'karma-ievms',
      'istanbul-instrumenter-loader'
    ],
    // web server port
    port: 9876,

    // enable / disable colors in the output (reporters and logs)
    colors: true,

    // level of logging
    // possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
    logLevel: config.LOG_INFO,

    // enable / disable watching file and executing tests whenever any file changes
    autoWatch: true,

    // start these browsers
    // available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
    browsers: ['ChromeHeadless'],
    customLaunchers: {
      ChromeHeadless: {
        base: 'Chrome',
        flags: [
          '--disable-gpu',
          '--headless',
          '--no-sandbox',
          '--remote-debugging-port=9222'
        ]
      }
    },

    // Continuous Integration mode
    // if true, Karma captures browsers, runs the tests and exits
    singleRun: true,
    // Concurrency level
    // how many browser should be started simultaneous
    concurrency: Infinity
  })
}