codymikol / karma-webpack

Karma webpack Middleware
MIT License
829 stars 222 forks source link

webpack@5.0.0-beta.28 Cannot find plugin "karma-webpack" #450

Closed Xezed closed 3 years ago

Xezed commented 3 years ago

Expected Behavior

Works fine just like with webpack 4.

Actual Behavior


17 09 2020 10:09:41.335:ERROR [plugin]: Cannot find plugin "karma-webpack".
  Did you forget to install it?
  npm install karma-webpack --save-dev
17 09 2020 10:09:41.340:ERROR [preprocess]: Can not load "webpack", it is not registered!
  Perhaps you are missing some plugin?
17 09 2020 10:09:41.361:ERROR [karma-server]: Error during file loading or preprocessing
TypeError: process is not a function
    at executeProcessor (/frontend/node_modules/karma/lib/preprocessor.js:47:11)
    at runProcessors (/frontend/node_modules/karma/lib/preprocessor.js:60:23)
    at FileList.preprocess [as _preprocess] (/frontend/node_modules/karma/lib/preprocessor.js:134:11)
    at async Promise.all (index 0)
    at async /frontend/node_modules/karma/lib/file-list.js:90:11
    at async Promise.all (index 8)
17 09 2020 10:09:41.376:ERROR [karma-server]: Error: Found 2 load errors
    at Server.<anonymous> (/frontend/node_modules/karma/lib/server.js:213:27)
    at Object.onceWrapper (events.js:421:28)
    at Server.emit (events.js:327:22)
    at emitListeningNT (net.js:1347:10)
    at processTicksAndRejections (internal/process/task_queues.js:83:21)
npm ERR! Test failed.  See above for more details.

Code

var webpack = require('webpack');
var path = require('path');

module.exports = function (config) {
  config.set({
    basePath: '',
    browsers: ['PhantomJS'],
    browserNoActivityTimeout: 30000,
    singleRun: false,
    frameworks: ['es6-shim', 'mocha', 'chai'],
    files: [
      'tests.webpack.js'
    ],
    plugins: [
      'karma-mocha',
      'karma-chai',
      'karma-spec-reporter',
      'karma-phantomjs-launcher',
      'karma-babel-preprocessor',
      'karma-sourcemap-loader',
      'karma-es6-shim',
      'karma-webpack',
    ],
    preprocessors: {
      'tests.webpack.js': ['webpack', 'sourcemap']
    },
    reporters: ['spec'],
    specReporter: {
      suppressErrorSummary: true,  // do not print error summary
      suppressFailed: false,  // do not print information about failed tests
      suppressPassed: false,  // do not print information about passed tests
      suppressSkipped: true,  // do not print information about skipped tests
      showSpecTiming: false // print the time elapsed for each spec
    },
//    reporters: ['dots', 'coverage'],
    coverageReporter: {
      type: 'html',
      dir: 'coverage/',
      instrumenterOptions: {
        istanbul: { noCompact: true }
      }
    },
    logLevel: config.LOG_ERROR,
    client: {
      captureConsole: true, // set to true to be able to debug tests
    },
    webpack: {
      devtool: 'inline-source-map',
      module: {
        rules: [
          {
            test: /\.jsx?$/,
            use: {
              loader: 'babel-loader',
              options: {
                plugins: ['transform-object-rest-spread']
              }
            },
            exclude: /(node_modules|bower_components)/,
          },
        ]
      },
      resolve: {
        modules: [path.resolve('./src'), 'node_modules'],
        extensions: ['.js', '.jsx']
      },
      watch: true,
      plugins: [
        new webpack.LoaderOptionsPlugin({
          babel: {
            presets: ['react', 'es2015', 'airbnb'],
            plugins: ['istanbul']
          }
        }),
        new webpack.ProvidePlugin({
          $: 'jquery',
          jQuery: 'jquery'
        })
      ],
      externals: {
        'cheerio': 'window',
        'react/addons': true,
        'react/lib/ExecutionEnvironment': true,
        'react/lib/ReactContext': true
      }
    },
    webpackServer: {
      noInfo: true
    }
  });
};

The very same config works just fine with webpack 4.

ryanclark commented 3 years ago

Thank you! I’ve put a note to test this out tomorrow and provide a fix

On Thu 17 Sep 2020 at 11:24, Aleksandr Zakharov notifications@github.com wrote:

  • Operating System:

  • Node Version: v12.18.3

  • NPM Version: v6.14.8

  • webpack Version: 5.0.0-beta.28

  • karma-webpack Version: 4.0.2

Expected Behavior

Works fine just like with webpack 4.

Actual Behavior

17 09 2020 10:09:41.335:ERROR [plugin]: Cannot find plugin "karma-webpack".

Did you forget to install it?

npm install karma-webpack --save-dev

17 09 2020 10:09:41.340:ERROR [preprocess]: Can not load "webpack", it is not registered!

Perhaps you are missing some plugin?

17 09 2020 10:09:41.361:ERROR [karma-server]: Error during file loading or preprocessing

TypeError: process is not a function

at executeProcessor (/frontend/node_modules/karma/lib/preprocessor.js:47:11)

at runProcessors (/frontend/node_modules/karma/lib/preprocessor.js:60:23)

at FileList.preprocess [as _preprocess] (/frontend/node_modules/karma/lib/preprocessor.js:134:11)

at async Promise.all (index 0)

at async /frontend/node_modules/karma/lib/file-list.js:90:11

at async Promise.all (index 8)

17 09 2020 10:09:41.376:ERROR [karma-server]: Error: Found 2 load errors

at Server.<anonymous> (/frontend/node_modules/karma/lib/server.js:213:27)

at Object.onceWrapper (events.js:421:28)

at Server.emit (events.js:327:22)

at emitListeningNT (net.js:1347:10)

at processTicksAndRejections (internal/process/task_queues.js:83:21)

npm ERR! Test failed. See above for more details.

Code

var webpack = require('webpack');

var path = require('path');

module.exports = function (config) {

config.set({

basePath: '',

browsers: ['PhantomJS'],

browserNoActivityTimeout: 30000,

singleRun: false,

frameworks: ['es6-shim', 'mocha', 'chai'],

files: [

  'tests.webpack.js'

],

plugins: [

  'karma-mocha',

  'karma-chai',

  'karma-spec-reporter',

  'karma-phantomjs-launcher',

  'karma-babel-preprocessor',

  'karma-sourcemap-loader',

  'karma-es6-shim',

  'karma-webpack',

],

preprocessors: {

  'tests.webpack.js': ['webpack', 'sourcemap']

},

reporters: ['spec'],

specReporter: {

  suppressErrorSummary: true,  // do not print error summary

  suppressFailed: false,  // do not print information about failed tests

  suppressPassed: false,  // do not print information about passed tests

  suppressSkipped: true,  // do not print information about skipped tests

  showSpecTiming: false // print the time elapsed for each spec

},

// reporters: ['dots', 'coverage'],

coverageReporter: {

  type: 'html',

  dir: 'coverage/',

  instrumenterOptions: {

    istanbul: { noCompact: true }

  }

},

logLevel: config.LOG_ERROR,

client: {

  captureConsole: true, // set to true to be able to debug tests

},

webpack: {

  devtool: 'inline-source-map',

  module: {

    rules: [

      {

        test: /\.jsx?$/,

        use: {

          loader: 'babel-loader',

          options: {

            plugins: ['transform-object-rest-spread']

          }

        },

        exclude: /(node_modules|bower_components)/,

      },

    ]

  },

  resolve: {

    modules: [path.resolve('./src'), 'node_modules'],

    extensions: ['.js', '.jsx']

  },

  watch: true,

  plugins: [

    new webpack.LoaderOptionsPlugin({

      babel: {

        presets: ['react', 'es2015', 'airbnb'],

        plugins: ['istanbul']

      }

    }),

    new webpack.ProvidePlugin({

      $: 'jquery',

      jQuery: 'jquery'

    })

  ],

  externals: {

    'cheerio': 'window',

    'react/addons': true,

    'react/lib/ExecutionEnvironment': true,

    'react/lib/ReactContext': true

  }

},

webpackServer: {

  noInfo: true

}

});

};

The very same config works just fine with webpack 4.

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub https://github.com/ryanclark/karma-webpack/issues/450, or unsubscribe https://github.com/notifications/unsubscribe-auth/AB4ODPKXACNSQSLCWU7RJ2DSGHPVBANCNFSM4RQGXQYA .

Xezed commented 3 years ago

Just a gentle follow up. Any luck with it? :)

pomek commented 3 years ago

@Xezed, try to install the latest alpha version of the karma-webpack package:

{
    "karma-webpack": "^5.0.0-alpha.3.0"
}

It helped to me. I know, using the alpha version is risky but as for now, I don't have any other ideas.

PS: See: https://github.com/ryanclark/karma-webpack/commit/8e69ed3c4ce3ec12ff2d86612f05566a704a9b52

Xezed commented 3 years ago

@pomek Thank you for reply :) But I remember that I tried it and it didn't work.

thijstriemstra commented 3 years ago

I tried installing the alpha version but got an error with webpack 5.1.0 as well:

webpack 5.1.0 compiled successfully in 2956 ms
13 10 2020 22:25:26.394:ERROR [karma-server]: Error during file loading or preprocessing
TypeError [ERR_INVALID_ARG_TYPE]: The "data" argument must be of type string or an instance of Buffer, TypedArray, or DataView. Received undefined
    at Hash.update (internal/crypto/hash.js:84:11)
    at Object.sha1 (/home/thijs/projects/videojs-wavesurfer/node_modules/karma/lib/utils/crypto-utils.js:9:8)
    at runProcessors (/home/thijs/projects/videojs-wavesurfer/node_modules/karma/lib/preprocessor.js:70:26)
    at processTicksAndRejections (internal/process/task_queues.js:93:5)
    at FileList.preprocess [as _preprocess] (/home/thijs/projects/videojs-wavesurfer/node_modules/karma/lib/preprocessor.js:134:5)
    at async Promise.all (index 0)
    at /home/thijs/projects/videojs-wavesurfer/node_modules/karma/lib/file-list.js:90:11
    at async Promise.all (index 12)
Xezed commented 3 years ago

@thijstriemstra yep I've recalled that I was getting the same one with alpha version

thijstriemstra commented 3 years ago

Thank you! I’ve put a note to test this out tomorrow and provide a fix

Anything we can help with @ryanclark?

charklewis commented 3 years ago

Are there any updates on this? I currently have the below config and have the following error:

11 11 2020 09:45:35.844:ERROR [plugin]: Cannot find plugin "karma-webpack".
  Did you forget to install it?
  npm install karma-webpack --save-dev
11 11 2020 09:45:36.012:ERROR [preprocess]: Can not load "webpack", it is not registered!
  Perhaps you are missing some plugin?
11 11 2020 09:45:36.042:ERROR [karma-server]: Error during file loading or preprocessing
TypeError: process is not a function
    at executeProcessor (/Users/clewis/Github/white-label/node_modules/karma/lib/preprocessor.js:47:11)
    at runProcessors (/Users/clewis/Github/white-label/node_modules/karma/lib/preprocessor.js:60:23)
    at FileList.preprocess [as _preprocess] (/Users/clewis/Github/white-label/node_modules/karma/lib/preprocessor.js:134:11)
    at async Promise.all (index 0)
    at async /Users/clewis/Github/white-label/node_modules/karma/lib/file-list.js:90:11
    at async Promise.all (index 3)
11 11 2020 09:45:36.043:INFO [karma-server]: Karma v5.2.3 server started at http://localhost:9876/
11 11 2020 09:45:36.043:INFO [launcher]: Launching browsers ChromeHeadless with concurrency unlimited
11 11 2020 09:45:36.044:ERROR [karma-server]: Error: Found 2 load errors
    at Server.<anonymous> (/Users/clewis/Github/white-label/node_modules/karma/lib/server.js:213:27)
    at Object.onceWrapper (events.js:421:28)
    at Server.emit (events.js:327:22)
    at emitListeningNT (net.js:1347:10)
    at processTicksAndRejections (internal/process/task_queues.js:83:21)
error Command failed with exit code 1.

Config

/* eslint-env node */

module.exports = function (config) {
  config.set({
    frameworks: ["jasmine"],
    plugins: [
      "karma-jasmine",
      "karma-webpack",
      "karma-chrome-launcher",
      "karma-coverage",
    ],
    files: ["tests/index.test.js"],
    preprocessors: {
      "tests/index.tests.js": ["webpack"],
      "tests/**/*.test.js": ["webpack"],
    },
    reporters: ["progress", "coverage"],
    webpack: {
      mode: "development",
      module: {
        rules: [
          {
            test: /\.less$/,
            loader: "null-loader",
          },
        ],
      },
    },
    coverageReporter: {
      dir: "tests/coverage/",
      reporters: [
        { type: "html", subdir: "report-html" },
        { type: "lcov", subdir: "report-lcov" },
      ],
    },
    port: 9876,
    colors: true,
    logLevel: config.LOG_INFO,
    autoWatch: false,
    browsers: ["ChromeHeadless"],
    singleRun: true,
  });
};

Package json

"karma": "^3.1.1",
"karma-chrome-launcher": "^3.1.0",
"karma-coverage": "^1.1.2",
"karma-jasmine": "^1.1.2",
"karma-webpack": "dev",
"webpack": "^5.3.0",
thijstriemstra commented 3 years ago

@charklewis try adding webpack to frameworks: ["jasmine"],:

frameworks: ["jasmine", "webpack"],
charklewis commented 3 years ago

@thijstriemstra I have tried and received a similar error:

11 11 2020 09:46:37.917:ERROR [plugin]: Cannot find plugin "karma-webpack".
  Did you forget to install it?
  npm install karma-webpack --save-dev
11 11 2020 09:46:38.089:ERROR [preprocess]: Can not load "webpack", it is not registered!
  Perhaps you are missing some plugin?
11 11 2020 09:46:38.091:ERROR [karma-server]: Server start failed on port 9876: Error: No provider for "framework:webpack"! (Resolving: framework:webpack)
error Command failed with signal "SIGINT".

I updated the prior error I was getting in this https://github.com/ryanclark/karma-webpack/issues/450#issuecomment-724890013 - I missed a couple of lines.

Would it be best just to downgrade to webpack 4? I wasn't have any issues on that version.

thijstriemstra commented 3 years ago

@charklewis in combination with:

"karma-webpack": "^5.0.0-alpha.3.0"
charklewis commented 3 years ago

That's correct, I have verified the correct version is installed in the node_modules also:

"name": "karma-webpack",
"version": "5.0.0-alpha.3.0",

The updated config file:

/* eslint-env node */

module.exports = function (config) {
  config.set({
    frameworks: ["jasmine", "webpack"],
    plugins: [
      "karma-jasmine",
      "karma-chrome-launcher",
      "karma-coverage",
      "karma-webpack",
    ],
    files: ["tests/index.test.js"],
    preprocessors: { "tests/**/*.test.js": ["webpack"] },
    reporters: ["progress", "coverage"],
    webpack: {
      mode: "development",
      module: {
        rules: [
          {
            test: /\.less$/,
            loader: "null-loader",
          },
        ],
      },
    },
    coverageReporter: {
      dir: "tests/coverage/",
      reporters: [
        { type: "html", subdir: "report-html" },
        { type: "lcov", subdir: "report-lcov" },
      ],
    },
    port: 9876,
    colors: true,
    logLevel: config.LOG_INFO,
    autoWatch: false,
    browsers: ["ChromeHeadless"],
    singleRun: true,
  });
};
codymikol commented 3 years ago

@charklewis I'm having the exact same issue with a very similar karma configuration.

EDIT: The answer to fixing this was just posted on the karma-webpack plugin ==> https://github.com/ryanclark/karma-webpack/commit/2cc549531cb03f9dbb84fd4946050a8d4db5208a

EDIT EDIT: if you change your karma-webpack depedency to "karma-webpack": "https://github.com/ryanclark/karma-webpack.git#next",

it seems to no longer crash, but my tests now don't actually run. I just get 0/0 ran. Still tinkering on my end though

With that karma-webpack change + adding webpack to the frameworks array in karma.config.js, everything works as exptected. 🐔

charklewis commented 3 years ago

I eventually switched back to use karma and gulp so didn't personally find a solution to this.

codymikol commented 3 years ago

@Xezed @charklewis @thijstriemstra

Just want to check in with you all to see if you've gotten things working. If not, have you made sure of the following.

Also @charklewis I notice that your preprocessor is not pointing at tests/index.test.js, this should be the same as files and import all of your tests (which I'm assuming your index.test.js file does)

also specifically for you make sure your karma.config.js plugins list contains webpack, I think that may be why you are getting the 11 11 2020 09:46:37.917:ERROR [plugin]: Cannot find plugin "karma-webpack". error

        plugins: [
            ...
            require('karma-webpack')
        ],
charklewis commented 3 years ago

@codymikol thanks for the follow up. I have since then gone back to using gulp so didn't manage to resolve the issue. When I come to revisit this sometime in the future I'll keep these tips in mind!

codymikol commented 3 years ago

I believe that all of the above issues have been addressed either by documentation or in code for the time being. If anyone here is still having issues after following my advice above, I can reopen this issue.