unplugin / unplugin-vue-ce

🍒 A vue plugin that extends vue's Custom Element capabilities
MIT License
75 stars 3 forks source link

Vue 3 CLI Webpack 5 error on custom web component build #71

Closed seyfer closed 1 year ago

seyfer commented 1 year ago

Hello,

this is related issue, as I have the same error https://github.com/baiwusanyu-c/unplugin-vue-ce/issues/69

I have tried

module.exports = {
  configureWebpack: {
    plugins: [
      require('unplugin-vue-ce').webpackVueCE({}),
    ],
  },
}

and

// vue.config.js
module.exports = {
  configureWebpack: {
    plugins: [
      require('@unplugin-vue-ce/sub-style').webpackVueCESubStyle({}),
    ],
  },
}

separately, as I need only to get styles from child components working. And I have the same error in both cases.

⠸  Building for test as library (commonjs,umd,umd-min)...project/node_modules/@unplugin-vue-ce/sub-style/index.cjs:73
  if (isComponentUpdateFnIdentifier && parent.type === "VariableDeclarator" && node.type === "Identifier" && node.name === "subTree") {
                                              ^

TypeError: Cannot read properties of null (reading 'type')
    at injectToRenderer (project/node_modules/@unplugin-vue-ce/sub-style/index.cjs:73:47)
    at Object.enter (project/node_modules/@unplugin-vue-ce/sub-style/index.cjs:129:7)
    at d.visit (project/node_modules/estree-walker-ts/index.cjs:1:1360)
    at x (project/node_modules/estree-walker-ts/index.cjs:1:3444)
    at injectVueRuntime (project/node_modules/@unplugin-vue-ce/sub-style/index.cjs:122:36)
    at Object.transform (project/node_modules/@unplugin-vue-ce/sub-style/index.cjs:206:11)
    at Object.transform (project/node_modules/unplugin/dist/webpack/loaders/transform.js:97:38)
    at LOADER_EXECUTION (project/node_modules/loader-runner/lib/LoaderRunner.js:132:14)
    at runSyncOrAsync (project/node_modules/loader-runner/lib/LoaderRunner.js:133:4)
    at iterateNormalLoaders (project/node_modules/loader-runner/lib/LoaderRunner.js:251:2)
    at project/node_modules/loader-runner/lib/LoaderRunner.js:224:4
    at project/node_modules/webpack/lib/NormalModule.js:840:15
    at Array.eval (eval at create (project/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:12:1)
    at runCallbacks (project/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:43:15)
    at project/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:249:5
    at project/node_modules/graceful-fs/graceful-fs.js:123:16
    at FSReqCallback.readFileAfterClose [as oncomplete] (node:internal/fs/read_file_context:68:3)

when I run the Vue web component build command

    "build-bundle-custom": "vue-cli-service build --target lib --inline-vue --name chat-bot --dest public/dist ./src/main-custom.ts",

With this entry point code

import { defineCustomElement } from 'vue';
import BotApp from '@/BotApp.vue';

// debug
// console.log(App.styles)

const ChatBot = defineCustomElement(BotApp);

customElements.define('chatbot', ChatBot);