Build fails with --target wc option on a Vue 3 project

[adarean5]

Version

4.5.6

Reproduction link

https://github.com/adarean5/vue-wc-test

Environment info

System:
    OS: Windows 10 10.0.18363
    CPU: (12) x64 Intel(R) Core(TM) i7-8750H CPU @ 2.20GHz
  Binaries:
    Node: 12.18.3 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.4 - C:\Program Files (x86)\Yarn\bin\yarn.CMD
    npm: 6.14.5 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Chrome: 85.0.4183.102
    Edge: Spartan (44.18362.449.0)
  npmPackages:
    @vue/babel-helper-vue-jsx-merge-props:  1.0.0
    @vue/babel-helper-vue-transform-on:  1.0.0-rc.2
    @vue/babel-plugin-jsx:  1.0.0-rc.3
    @vue/babel-plugin-transform-vue-jsx:  1.1.2
    @vue/babel-preset-app:  4.5.6
    @vue/babel-preset-jsx:  1.1.2
    @vue/babel-sugar-functional-vue:  1.1.2
    @vue/babel-sugar-inject-h:  1.1.2
    @vue/babel-sugar-v-model:  1.1.2
    @vue/babel-sugar-v-on:  1.1.2
    @vue/cli-overlay:  4.5.6
    @vue/cli-plugin-babel: ~4.5.0 => 4.5.6
    @vue/cli-plugin-eslint: ~4.5.0 => 4.5.6
    @vue/cli-plugin-pwa: ~4.5.0 => 4.5.6
    @vue/cli-plugin-router: ~4.5.0 => 4.5.6
    @vue/cli-plugin-typescript: ~4.5.0 => 4.5.6
    @vue/cli-plugin-unit-jest: ~4.5.0 => 4.5.6
    @vue/cli-plugin-vuex:  4.5.6
    @vue/cli-service: ~4.5.0 => 4.5.6
    @vue/cli-shared-utils:  4.5.6
    @vue/compiler-core:  3.0.0
    @vue/compiler-dom:  3.0.0
    @vue/compiler-sfc: ^3.0.0-0 => 3.0.0
    @vue/compiler-ssr:  3.0.0
    @vue/component-compiler-utils:  3.2.0
    @vue/eslint-config-prettier: ^6.0.0 => 6.0.0
    @vue/eslint-config-typescript: ^5.0.2 => 5.1.0
    @vue/preload-webpack-plugin:  1.1.2
    @vue/reactivity:  3.0.0
    @vue/runtime-core:  3.0.0
    @vue/runtime-dom:  3.0.0
    @vue/shared:  3.0.0
    @vue/test-utils: ^2.0.0-0 => 2.0.0-beta.5
    @vue/web-component-wrapper:  1.2.0
    eslint-plugin-vue: ^7.0.0-0 => 7.0.0-beta.4
    jest-serializer-vue:  2.0.2
    typescript: ~3.9.3 => 3.9.7
    vue: ^3.0.0-0 => 3.0.0
    vue-eslint-parser:  7.1.0
    vue-hot-reload-api:  2.3.4
    vue-jest: ^5.0.0-0 => 5.0.0-alpha.4 (3.0.7)
    vue-loader:  15.9.3 (16.0.0-beta.8)
    vue-router: ^4.0.0-0 => 4.0.0-beta.11
    vue-style-loader:  4.1.2
    vue-template-es2015-compiler:  1.9.1
  npmGlobalPackages:
    @vue/cli: Not Found

Steps to reproduce

Run the npm script "build-wc", that is defined in the package.json (vue-cli-service build --target wc --inline-vue --name my-element ./src/app/components/HelloWorld/HelloWorld.vue).

What is expected?

The build finishes successfully and outputs dist/my-element.js and dist/my-element.min.js.
If the same command is ran on a Vue 2 project the output is as follows:

 DONE  Compiled successfully in 3376ms                                     12:14:19

  File                      Size                     Gzipped

  dist\my-element.min.js    73.50 KiB                26.64 KiB
  dist\my-element.js        230.23 KiB               63.86 KiB

  Images and other types of assets omitted.


Process finished with exit code 0

What is actually happening?

The build fails with the following output:

 ERROR  Failed to compile with 2 errors                                                                                                                            12:28:23

 error  in ./src/components/HelloWorld.vue?vue&type=template&id=f90a9e44&scoped=true&bindings={}?shadow

Module build failed (from ./node_modules/thread-loader/dist/cjs.js):
Thread Loader (Worker 1)
Unexpected token ? in JSON at position 2

    at JSON.parse (<anonymous>)
    at Object.TemplateLoader (C:\dev\Migracija\Vue\vue-3\vue-3-wc-test\wc-test\node_modules\vue-loader-v16\dist\templateLoader.js:38:154)

 @ ./src/components/HelloWorld.vue?vue&type=template&id=f90a9e44&scoped=true&bindings={}?shadow 1:0-417 1:0-417
 @ ./src/components/HelloWorld.vue?shadow
 @ ./node_modules/@vue/cli-service/lib/commands/build/entry-wc.js

 error  in ./src/components/HelloWorld.vue?vue&type=style&index=0&id=f90a9e44&scoped=true&lang=scss?shadow

Module parse failed: Unexpected token (2:3)
File was processed with these loaders:
 * ./node_modules/cache-loader/dist/cjs.js
 * ./node_modules/vue-loader-v16/dist/index.js
You may need an additional loader to handle the result of these loaders.
|
> h3 {
|   margin: 40px 0 0;
| }

 @ ./src/components/HelloWorld.vue?vue&type=style&index=0&id=f90a9e44&scoped=true&lang=scss?shadow 1:0-221 1:0-221 1:222-432 1:222-432
 @ ./src/components/HelloWorld.vue?shadow
 @ ./node_modules/@vue/cli-service/lib/commands/build/entry-wc.js

 ERROR  Build failed with errors.
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

Process finished with exit code 1

Quick Update:

Upon running the build on one of my other projects (unfortunately I am not able to share the code), I got a similar error log minus the second Unexpected token error.

 ERROR  Failed to compile with 1 errors                                                                                 12:03:31

 error  in ./src/Counter/Counter.vue?vue&type=template&id=42b163b0&bindings={}?shadow

Module build failed (from C:/dev/Project-name/node_modules/thread-loader/dist/cjs.js):
Thread Loader (Worker 0)
Unexpected token ? in JSON at position 2

    at JSON.parse (<anonymous>)
    at Object.TemplateLoader (C:\dev\Project-name\node_modules\vue-loader-v16\dist\templateLoader.js:37:154)

 @ ./src/Counter/Counter.vue?vue&type=template&id=42b163b0&bindings={}?shadow 1:0-438 1:0-438
 @ ./src/Counter/Counter.vue?shadow
 @ C:/dev/Project-name/node_modules/@vue/cli-service/lib/commands/build/entry-wc.js

 ERROR  Build failed with errors.
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

Process finished with exit code 1

This time the component (Counter.vue), which I was trying to build as a web component, had no script tags, so that would explain why the second error was not thrown.

[adarean5]

#5855 (comment)

According to this comment, the functionality has not yet been implemented, so this is not really an issue yet.

[akai007]

mee too!!!

Module build failed (from ./node_modules/thread-loader/dist/cjs.js):
Thread Loader (Worker 2)
Cannot read property 'content' of null
at PoolWorker.fromErrorObj (/Users/akai/Documents/work_git/wechat-user-center/node_modules/thread-loader/dist/WorkerPool.js:262:12)
at /Users/akai/Documents/work_git/wechat-user-center/node_modules/thread-loader/dist/WorkerPool.js:204:29
at mapSeries (/Users/akai/Documents/work_git/wechat-user-center/node_modules/neo-async/async.js:3625:14)
at PoolWorker.onWorkerMessage (/Users/akai/Documents/work_git/wechat-user-center/node_modules/thread-loader/dist/WorkerPool.js:170:35)
at /Users/akai/Documents/work_git/wechat-user-center/node_modules/thread-loader/dist/WorkerPool.js:152:14
at Object.selectBlock (/Users/akai/Documents/work_git/wechat-user-center/node_modules/@vue/cli-service/node_modules/vue-loader-v16/dist/select.js:25:45)
at Object.loader (/Users/akai/Documents/work_git/wechat-user-center/node_modules/@vue/cli-service/node_modules/vue-loader-v16/dist/index.js:59:25)

@ ./src/pages/coupon/index.vue?vue&type=script&setup=props&lang=ts 1:0-430 1:0-430 1:431-850 1:431-850
@ ./src/pages/coupon/index.vue
@ ./src/pages lazy ^./.*$ namespace object
@ ./src/router/utils.ts
@ ./src/router/index.ts
@ ./src/main.ts
@ multi ./src/main.ts

[akai007]

add parallel: false in vue.config.js, can avoid this problem!