[Vue3] compilerOptions is not supported

[Benoit-Vasseur]

Version

4.5.0

Reproduction link

https://github.com/Benoit-Vasseur/vue3-test-cli-and-wc

Environment info

  System:
    OS: Linux 5.3 Ubuntu 18.04.4 LTS (Bionic Beaver)
    CPU: (8) x64 Intel(R) Core(TM) i5-10210U CPU @ 1.60GHz
  Binaries:
    Node: 12.18.0 - ~/.nvm/versions/node/v12.18.0/bin/node
    Yarn: 1.22.4 - ~/.nvm/versions/node/v12.18.0/bin/yarn
    npm: 6.14.4 - ~/.nvm/versions/node/v12.18.0/bin/npm
  Browsers:
    Chrome: 83.0.4103.61
    Firefox: 78.0.1
  npmPackages:
    @ant-design-vue/babel-helper-vue-compatible-props:  1.0.0 
    @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.0 
    @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.0 
    @vue/cli-plugin-babel: ~4.5.0 => 4.5.0 
    @vue/cli-plugin-eslint: ~4.5.0 => 4.5.0 
    @vue/cli-plugin-router:  4.5.0 
    @vue/cli-plugin-vuex:  4.5.0 
    @vue/cli-service: ~4.5.0 => 4.5.0 
    @vue/cli-shared-utils:  4.5.0 
    @vue/compiler-core:  3.0.0-rc.4 
    @vue/compiler-dom:  3.0.0-rc.4 
    @vue/compiler-sfc: ^3.0.0-0 => 3.0.0-rc.4 
    @vue/compiler-ssr:  3.0.0-rc.4 
    @vue/component-compiler-utils:  3.2.0 
    @vue/eslint-config-prettier: ^6.0.0 => 6.0.0 
    @vue/preload-webpack-plugin:  1.1.2 
    @vue/reactivity:  3.0.0-rc.4 
    @vue/runtime-core:  3.0.0-rc.4 
    @vue/runtime-dom:  3.0.0-rc.4 
    @vue/shared:  3.0.0-rc.4 
    @vue/web-component-wrapper:  1.2.0 
    eslint-plugin-vue: ^7.0.0-0 => 7.0.0-beta.0 
    vue: ^3.0.0-0 => 3.0.0-rc.4 
    vue-eslint-parser:  7.1.0 
    vue-hot-reload-api:  2.3.4 
    vue-loader:  15.9.3 (16.0.0-beta.4)
    vue-style-loader:  4.1.2 
    vue-template-es2015-compiler:  1.9.1 
  npmGlobalPackages:
    @vue/cli: 4.4.6

Steps to reproduce

• npm run serve

What is expected?

• no error in compilation
• v-model is working if the web component is using value prop and trigger the 'input' event

What is actually happening?

• compilation error :

  Module build failed (from ./node_modules/vue-loader/lib/index.js):
  TypeError: compiler.parseComponent is not a function
  at parse (/home/Benoit.Vasseur/workspace/vue3-test-cli-and-wc/node_modules/@vue/component-compiler-utils/dist/parse.js:15:23)
  at Object.module.exports (/home/Benoit.Vasseur/workspace/vue3-test-cli-and-wc/node_modules/vue-loader/lib/index.js:67:22)

---

I also tried the same test with Vite, it is not working also but the error is not the same, see : https://github.com/vuejs/vue-next/issues/1699

• inspect1.json is the result of npx vue inspect without any modification of the conf
• inspect2.json is the result of npx vue inspectwith the vue.config.js (compilerOption)

[haoqunjiang]

1. Remove this line https://github.com/Benoit-Vasseur/vue3-test-cli-and-wc/blob/9dabaa643aeb6cf44cfb2241bf25c7da6b682da9/vue.config.js#L6 Because .loader is not a selector but a setter, this line mistakenly reset the loader to the root-level vue-loader instance (which is v15)
2. https://github.com/Benoit-Vasseur/vue3-test-cli-and-wc/blob/9dabaa643aeb6cf44cfb2241bf25c7da6b682da9/vue.config.js#L11 Use the default export of @vue/compiler-sfc: compiler: require("@vue/compiler-sfc").default