Cannot build web component with default vue 3 preset

[agcty]

Version

4.5.4

Reproduction link

https://github.com/agcty/test-webcomponent

Environment info

Environment Info:

  System:
    OS: macOS 10.15.6
    CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz
  Binaries:
    Node: 14.5.0 - ~/.nvm/versions/node/v14.5.0/bin/node
    Yarn: Not Found
    npm: 6.14.5 - ~/.nvm/versions/node/v14.5.0/bin/npm
  Browsers:
    Chrome: 85.0.4183.83
    Edge: Not Found
    Firefox: 80.0.1
    Safari: 13.1.2
  npmPackages:
    @ant-design-vue/babel-helper-vue-transform-on:  1.0.1 
    @vue/babel-helper-vue-jsx-merge-props:  1.0.0 
    @vue/babel-plugin-transform-vue-jsx:  1.1.2 
    @vue/babel-preset-app:  4.5.4 
    @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.4 
    @vue/cli-plugin-babel: ~4.5.0 => 4.5.4 
    @vue/cli-plugin-eslint: ~4.5.0 => 4.5.4 
    @vue/cli-plugin-router:  4.5.4 
    @vue/cli-plugin-typescript: ^4.5.4 => 4.5.4 
    @vue/cli-plugin-vuex:  4.5.4 
    @vue/cli-service: ~4.5.0 => 4.5.4 
    @vue/cli-shared-utils:  4.5.4 
    @vue/compiler-core:  3.0.0-rc.10 
    @vue/compiler-dom:  3.0.0-rc.10 
    @vue/compiler-sfc: ^3.0.0-rc.10 => 3.0.0-rc.10 
    @vue/compiler-ssr:  3.0.0-rc.10 
    @vue/component-compiler-utils:  3.2.0 
    @vue/eslint-config-typescript: ^5.0.2 => 5.1.0 
    @vue/preload-webpack-plugin:  1.1.2 
    @vue/reactivity:  3.0.0-rc.10 
    @vue/runtime-core:  3.0.0-rc.10 
    @vue/runtime-dom:  3.0.0-rc.10 
    @vue/shared:  3.0.0-rc.10 
    @vue/web-component-wrapper:  1.2.0 
    eslint-plugin-vue: ^7.0.0-0 => 7.0.0-beta.3 
    typescript: ~3.9.3 => 3.9.7 
    vue: ^3.0.0-rc.10 => 3.0.0-rc.10 
    vue-eslint-parser:  7.1.0 
    vue-hot-reload-api:  2.3.4 
    vue-loader:  15.9.3 (16.0.0-beta.5)
    vue-style-loader:  4.1.2 
    vue-template-es2015-compiler:  1.9.1 
  npmGlobalPackages:
    @vue/cli: 4.5.4

Steps to reproduce

Environment Info:

System:
OS: macOS 10.15.6
CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz
Binaries:
Node: 14.5.0 - ~/.nvm/versions/node/v14.5.0/bin/node
Yarn: Not Found
npm: 6.14.5 - ~/.nvm/versions/node/v14.5.0/bin/npm
Browsers:
Chrome: 85.0.4183.83
Edge: Not Found
Firefox: 80.0.1
Safari: 13.1.2
npmPackages:
@ant-design-vue/babel-helper-vue-transform-on: 1.0.1
@vue/babel-helper-vue-jsx-merge-props: 1.0.0
@vue/babel-plugin-transform-vue-jsx: 1.1.2
@vue/babel-preset-app: 4.5.4
@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.4
@vue/cli-plugin-babel: ~4.5.0 => 4.5.4
@vue/cli-plugin-eslint: ~4.5.0 => 4.5.4
@vue/cli-plugin-router: 4.5.4
@vue/cli-plugin-vuex: 4.5.4
@vue/cli-service: ~4.5.0 => 4.5.4
@vue/cli-shared-utils: 4.5.4
@vue/compiler-core: 3.0.0-rc.10
@vue/compiler-dom: 3.0.0-rc.10
@vue/compiler-sfc: ^3.0.0-0 => 3.0.0-rc.10
@vue/compiler-ssr: 3.0.0-rc.10
@vue/component-compiler-utils: 3.2.0
@vue/preload-webpack-plugin: 1.1.2
@vue/reactivity: 3.0.0-rc.10
@vue/runtime-core: 3.0.0-rc.10
@vue/runtime-dom: 3.0.0-rc.10
@vue/shared: 3.0.0-rc.10
@vue/web-component-wrapper: 1.2.0
eslint-plugin-vue: ^7.0.0-0 => 7.0.0-beta.3
vue: ^3.0.0-0 => 3.0.0-rc.10
vue-eslint-parser: 7.1.0
vue-hot-reload-api: 2.3.4
vue-loader: 15.9.3 (16.0.0-beta.5)
vue-style-loader: 4.1.2
vue-template-es2015-compiler: 1.9.1
npmGlobalPackages:
@vue/cli: 4.5.4

What is expected?

When running

npx vue-cli-service build --target wc --inline-vue --name test-component

It should build a web component and not throw an error.

What is actually happening?

Weird error is thrown:

ERROR Failed to compile with 1 errors 21:49:34

error in ./src/App.vue?shadow
Module build failed (from ./node_modules/cache-loader/dist/cjs.js):
ValidationError: Invalid options object. Cache Loader (Pitch) has been initialized using an options object that does not match the API schema.

• options has an unknown property 'shadowMode'. These properties are valid:
  object { cacheContext?, cacheKey?, cacheIdentifier?, cacheDirectory?, compare?, precision?, read?, readOnly?)

---

I created this project with the vue 3 preset and didn't change any code at all so I would expect it to work.

[haoqunjiang]

Vue 3 web component wrapper hasn't been implemented yet.