Cannot build web component with default vue 3 preset

agcty commented 4 years ago

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 commented 4 years ago

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

akai007 commented 4 years ago

me too!!! and I used it in a new real project!!!

Module build failed (from ./node_modules/thread-loader/dist/cjs.js): Thread Loader (Worker 0) 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/base/index.vue?vue&type=script&setup=true&lang=ts 1:0-429 1:0-429 1:430-848 1:430-848 @ ./src/pages/base/index.vue @ ./src/pages lazy ^.\/.*$ namespace object @ ./src/router/utils.ts @ ./src/router/index.ts @ ./src/main.ts @ multi ./src/main.ts

akai007 commented 4 years ago

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

haoqunjiang commented 4 years ago

It's an unrelated issue. The error is due to a bug in vue-loader that script setup doesn't work with thread-loader https://github.com/vuejs/vue-loader/issues/1723. This issue is about web component support.

vuejs / vue-cli