vue/cli 5 versions with webpack 5 are not compatible with default unit testing setup, unit tests cannot be executed as mochapack does not support webpack 5

[sceee]

Version

5.0.0-alpha.8

Reproduction link

https://github.com/sceee/vue2-webpack5-unittest-nullish-coalescing-operator-error-demo

Environment info

Environment Info:

  System:
    OS: Windows 10 10.0.19042
    CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz
  Binaries:
    Node: 14.16.0 - C:\Program Files\nodejs\node.EXE
    Yarn: Not Found
    npm: 6.14.12 - ~\AppData\Roaming\npm\npm.CMD
  Browsers:
    Chrome: 89.0.4389.114
    Edge: Spartan (44.19041.906.0), Chromium (89.0.774.68)
  npmPackages:
    @vue/babel-helper-vue-jsx-merge-props:  1.2.1
    @vue/babel-helper-vue-transform-on:  1.0.2
    @vue/babel-plugin-jsx:  1.0.4
    @vue/babel-plugin-transform-vue-jsx:  1.2.1
    @vue/babel-preset-app:  5.0.0-alpha.8
    @vue/babel-preset-jsx:  1.2.4
    @vue/babel-sugar-composition-api-inject-h:  1.2.1
    @vue/babel-sugar-composition-api-render-instance:  1.2.4
    @vue/babel-sugar-functional-vue:  1.2.2
    @vue/babel-sugar-inject-h:  1.2.2
    @vue/babel-sugar-v-model:  1.2.3
    @vue/babel-sugar-v-on:  1.2.3
    @vue/cli-overlay:  5.0.0-alpha.8
    @vue/cli-plugin-babel: ~5.0.0-alpha.8 => 5.0.0-alpha.8
    @vue/cli-plugin-e2e-cypress: ~5.0.0-alpha.8 => 5.0.0-alpha.8
    @vue/cli-plugin-eslint: ~5.0.0-alpha.8 => 5.0.0-alpha.8
    @vue/cli-plugin-router: ~5.0.0-alpha.8 => 5.0.0-alpha.8
    @vue/cli-plugin-typescript: ~5.0.0-alpha.8 => 5.0.0-alpha.8
    @vue/cli-plugin-unit-mocha: ~5.0.0-alpha.8 => 5.0.0-alpha.8
    @vue/cli-plugin-vuex: ~5.0.0-alpha.8 => 5.0.0-alpha.8
    @vue/cli-plugin-webpack-4:  5.0.0-alpha.8
    @vue/cli-service: ~5.0.0-alpha.8 => 5.0.0-alpha.8
    @vue/cli-shared-utils:  5.0.0-alpha.8
    @vue/component-compiler-utils:  3.2.0
    @vue/eslint-config-prettier: ^6.0.0 => 6.0.0
    @vue/eslint-config-typescript: ^7.0.0 => 7.0.0
    @vue/test-utils: ^1.1.3 => 1.1.3
    @vue/web-component-wrapper:  1.3.0
    eslint-plugin-vue: ^7.8.0 => 7.8.0
    typescript: ~4.2.4 => 4.2.4
    vue: ^2.6.12 => 2.6.12
    vue-eslint-parser:  7.6.0
    vue-hot-reload-api:  2.3.4
    vue-loader:  16.2.0 (15.9.6)
    vue-router: ^3.5.1 => 3.5.1
    vue-style-loader:  4.1.3
    vue-template-compiler: ^2.6.12 => 2.6.12
    vue-template-es2015-compiler:  1.9.1
    vuex: ^3.6.2 => 3.6.2
  npmGlobalPackages:
    @vue/cli: Not Found

Steps to reproduce

Check out repository

1. npm run build -> works
2. npm run test:unit -> fails

What is expected?

Unit tests can be executed after setting up a project with vue/cli 5.

What is actually happening?

The following error occurs:

> [email protected] test:unit C:\tmp\vue2-webpack5\hello-world
> vue-cli-service test:unit

  [                         ] 0% () WEBPACK  Compiling...

  [=========================] 98% (emitting)

 WARNING  Compiled with 2 warnings

 warning  in ./node_modules/mochapack/lib/entry.js

Invalid dependencies have been reported by plugins or loaders for this module. All reported dependencies need to be absolute paths.
Invalid dependencies may lead to broken watching and caching.
As best effort we try to convert all invalid values to absolute paths and converting globs into context dependencies, but this is deprecated behavior.
Loaders: Pass absolute paths to this.addDependency (existing files), this.addMissingDependency (not existing files), and this.addContextDependency (directories).
Plugins: Pass absolute paths to fileDependencies (existing files), missingDependencies (not existing files), and contextDependencies (directories).
Globs: They are not supported. Pass absolute path to the directory as context dependencies.
The following invalid values have been reported:
 * "\"../../../tests/unit/example.spec.ts\""

 warning 

DefinePlugin
Conflicting values for 'process.env.NODE_ENV'

  [=========================] 99% (done) WEBPACK  Compiled with 2 warning(s)

Warning in ./node_modules/mochapack/lib/entry.js

  Invalid dependencies have been reported by plugins or loaders for this module. All reported dependencies need to be absolute paths.
  Invalid dependencies may lead to broken watching and caching.
  As best effort we try to convert all invalid values to absolute paths and converting globs into context dependencies, but this is deprecated behavior.
  Loaders: Pass absolute paths to this.addDependency (existing files), this.addMissingDependency (not existing files), and this.addContextDependency (directories).
  Plugins: Pass absolute paths to fileDependencies (existing files), missingDependencies (not existing files), and contextDependencies (directories).
  Globs: They are not supported. Pass absolute path to the directory as context dependencies.
  The following invalid values have been reported:
   * "\"../../../tests/unit/example.spec.ts\""

Warning

  DefinePlugin
  Conflicting values for 'process.env.NODE_ENV'

  [=========================] 100% (completed)

(node:33832) [DEP_WEBPACK_DEPRECATION_ARRAY_TO_SET] DeprecationWarning: Compilation.modules was changed from Array to Set (using Array method 'reduce' is deprecated)
(Use `node --trace-deprecation ...` to show where the warning was created)
(node:33832) [DEP_WEBPACK_MODULE_ID] DeprecationWarning: Module.id: Use new ChunkGraph API
Error: Module.id: There was no ChunkGraph assigned to the Module for backward-compat (Use the new API)
    at C:\tmp\vue2-webpack5\hello-world\node_modules\webpack\lib\ChunkGraph.js:1482:12
    at deprecated (internal/util.js:89:15)
    at Function.getChunkGraphForModule (C:\tmp\vue2-webpack5\hello-world\node_modules\webpack\lib\ChunkGraph.js:1473:18)
    at MakeNamespaceObjectRuntimeModule.get id [as id] (C:\tmp\vue2-webpack5\hello-world\node_modules\webpack\lib\Module.js:172:21)
    at C:\tmp\vue2-webpack5\hello-world\node_modules\mochapack\src\webpack\util\getAffectedModuleIds.ts:43:51
    at Array.reduce (<anonymous>)
    at Set.set.<computed> [as reduce] (C:\tmp\vue2-webpack5\hello-world\node_modules\webpack\lib\util\deprecation.js:87:35)
    at buildModuleMap (C:\tmp\vue2-webpack5\hello-world\node_modules\mochapack\src\webpack\util\getAffectedModuleIds.ts:42:29)
    at Object.getAffectedModuleIds [as default] (C:\tmp\vue2-webpack5\hello-world\node_modules\mochapack\src\webpack\util\getAffectedModuleIds.ts:144:32)
    at Object.getBuildStats [as default] (C:\tmp\vue2-webpack5\hello-world\node_modules\mochapack\src\webpack\util\getBuildStats.ts:20:47)
    at TestRunner.prepareMocha (C:\tmp\vue2-webpack5\hello-world\node_modules\mochapack\src\runner\TestRunner.ts:76:49)
    at C:\tmp\vue2-webpack5\hello-world\node_modules\mochapack\src\runner\TestRunner.ts:116:34
    at C:\tmp\vue2-webpack5\hello-world\node_modules\mochapack\src\webpack\compiler\registerReadyCallback.ts:15:7
    at Hook.eval [as callAsync] (eval at create (C:\tmp\vue2-webpack5\hello-world\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:62:1)
    at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (C:\tmp\vue2-webpack5\hello-world\node_modules\tapable\lib\Hook.js:18:14)
    at C:\tmp\vue2-webpack5\hello-world\node_modules\webpack\lib\Compiler.js:468:23
Error: mochapack exited with code 1.
    at ChildProcess.<anonymous> (C:\tmp\vue2-webpack5\hello-world\node_modules\@vue\cli-plugin-unit-mocha\index.js:84:18)
    at ChildProcess.emit (events.js:327:22)
    at ChildProcess.cp.emit (C:\tmp\vue2-webpack5\hello-world\node_modules\cross-spawn\lib\enoent.js:34:29)
    at Process.ChildProcess._handle.onexit (internal/child_process.js:277:12)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] test:unit: `vue-cli-service test:unit`
npm ERR! Exit status 1

This is most likely due to the fact that mochapack is not compatible with webpack 5: sysgears/mochapack#82

---

Background of this issue is that I am using the Typescript nullish-coalescing-operator

??

(e.g. const a = b ?? c) in my real codebase.
For building (npm run build) or serving (npm run serve), this works as babel transpiles it correctly.

But when trying to test the function using a unit test, it failed to execute as I was still using webpack 4 (using @vue/cli-plugin-webpack-4). The original error from this point was

Module parse failed: Unexpected token (119:37)
  File was processed with these loaders:
   * ./node_modules/cache-loader/dist/cjs.js
   * ./node_modules/babel-loader/lib/index.js
   * ./node_modules/ts-loader/index.js
  You may need an additional loader to handle the result of these loaders.
  |    */
  |   [_constants.ABC.MY_GETTER]: () => param => {
  >     return param.name ?? "abc";
  |   },
  |

When searching through issues, I stepped over a note that webpack ^5 is required to get such nullish-coalescing-operator's to work also in unittests (without babel) - that's why I tried to upgrade my project to webpack5 but then I ran into the issue that the shipped version of mochapack does not support webpack5.

So it seems there is currently no way of using vue/cli5 with webpack5 and keep building and unit-testing working?

[haoqunjiang]

Yeah for now we need to fallback to webpack 4 when using the mocha plugin (vue add webpack-4)
The jest plugin works, though.

Need to someone to give a hand on the mochapack webpack 5 compatibility thing.

sysgears/mochapack#83 could be a good starting point.

[sceee]

Ah ok, thanks for the info @sodatea . Good to know that this is a known issue and switching to jest could at least be a (temporary) workaround.

Still, as it seems currently no one is working the mochapack webpack 5 compatibility, it means more and more users will likely run into this issue.