Webpack 5 and Webpacker 6 - Add note that output entry should also not be specified

Pezmc commented 3 years ago

This PR contains a:

[ ] bugfix
[ ] new feature
[ ] code refactor
[ ] test update
[x] typo fix
[ ] metadata update

Motivation / Use-Case

I'm upgrading our app to webpacker 6 (webpack 5) and started hitting the snags discussed in https://github.com/ryanclark/karma-webpack/issues/450 and #452

The fix was to add the following to the top of our karma.conf.js:

const webpackConfig = require('./config/webpack/test.js')

// karma watches the test entry points, Do NOT specify the entry option
// From https://github.com/ryanclark/karma-webpack#getting-started
delete webpackConfig.entry
delete webpackConfig.output

As well as:

Adding webpack to frameworks: ['jasmine', 'webpack'], (already covered in docs)
Adding watched: false to files { pattern: 'spec/javascripts/**/*[sS]pec.js', watched: false },

This PR just adds that note about output to the docs.

Breaking Changes

None

Additional Info

Perhaps an example karma config file for webpacker would also be of value to add to the readme?

For reference a filleted version of ours now looks like:

const webpackConfig = require('./config/webpack/test.js')

// Remove entry and output from webpacker config
// Karma watches the test entry points, do not specify entry or output option
// From https://github.com/ryanclark/karma-webpack#getting-started
delete webpackConfig.entry
delete webpackConfig.output

module.exports = (config) => {
  config.set({
    // ... normal karma configuration

    // add webpack to your list of frameworks
    frameworks: ['mocha', 'webpack'],

    plugins: ['karma-webpack', 'karma-mocha'],

    files: [
      // all files ending in ".test.js"
      // !!! use watched: false as we use webpacks watch
      { pattern: 'test/**/*.test.js', watched: false },
    ],

    preprocessors: {
      // add webpack as preprocessor
      'test/**/*.test.js': ['webpack'],
    },

    webpack: webpackConfig,

    webpackMiddleware: {
      // webpack-dev-middleware configuration
      stats: 'errors-only',
    },
  })
}

thijstriemstra commented 3 years ago

I tried this but it didn't change the error I get with karma-webpack@next:

> karma start karma.conf.js

30 01 2021 19:30:47.627:INFO [framework.detect-browsers]: The following browsers will be used: [
  'Chrome_headless',
  'Firefox_headless',
  'Safari',
  'SafariTechPreview'
]
Webpack bundling...
assets by chunk 93.5 KiB (name: commons)
  asset commons.min.js 93.1 KiB [emitted] [minimized] (name: commons) (id hint: commons)
  asset css/commons.min.css 391 bytes [emitted] [minimized] (name: commons) (id hint: commons)
asset runtime.min.js 1.73 KiB [emitted] [minimized] (name: runtime)
asset videojs.wavesurfer.min.js 775 bytes [emitted] [minimized] (name: videojs.wavesurfer)
asset videojs.wavesurfer.spec.3357133060.min.js 761 bytes [emitted] [minimized] (name: videojs.wavesurfer.spec.3357133060)
asset fluid.spec.3609059172.min.js 638 bytes [emitted] [minimized] (name: fluid.spec.3609059172)
asset live.spec.1168012483.min.js 638 bytes [emitted] [minimized] (name: live.spec.1168012483)
asset options.spec.104896635.min.js 638 bytes [emitted] [minimized] (name: options.spec.104896635)
asset tracks.spec.3282997209.min.js 638 bytes [emitted] [minimized] (name: tracks.spec.3282997209)
asset utils.spec.4273633158.min.js 638 bytes [emitted] [minimized] (name: utils.spec.4273633158)
asset video.spec.1635427680.min.js 638 bytes [emitted] [minimized] (name: video.spec.1635427680)
asset defaults.spec.1293063665.min.js 528 bytes [emitted] [minimized] (name: defaults.spec.1293063665)
webpack 5.19.0 compiled successfully in 5732 ms
30 01 2021 19:30:54.025: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:82:11)
    at Object.sha1 (/Users/thijstriemstra/projects/videojs-wavesurfer/node_modules/karma/lib/utils/crypto-utils.js:9:8)
    at runProcessors (/Users/thijstriemstra/projects/videojs-wavesurfer/node_modules/karma/lib/preprocessor.js:70:26)
    at processTicksAndRejections (internal/process/task_queues.js:97:5)
    at FileList.preprocess [as _preprocess] (/Users/thijstriemstra/projects/videojs-wavesurfer/node_modules/karma/lib/preprocessor.js:134:5)
    at async Promise.all (index 1)
    at /Users/thijstriemstra/projects/videojs-wavesurfer/node_modules/karma/lib/file-list.js:90:11
    at async Promise.all (index 14)

Pezmc commented 3 years ago

Open a new issue and post your karma config file!

codymikol commented 3 years ago

Hey @Pezmc, thanks for the PR!

I remember reading another issue where it seems there is a certain setup where users expect the output configuration to work. I want to do a little more investigation into this to see if its something we can actually support vs something that needs to be documented.

codymikol commented 3 years ago

I just merged in a PR to the next branch that ensures that output will function, thank you for this contribution though!

Pezmc commented 3 years ago

@codymikol Which PR is that? I see the warning PR is that what you're referring to? https://github.com/ryanclark/karma-webpack/pull/477

codymikol commented 3 years ago

That's the one, it has tests proving you can use a custom output path so long as you use the default filename. If you don't use the default name, it yells at you and sets it back to the default.

codymikol / karma-webpack