unplugin / unplugin-vue-ce Goto Github PK

Describe the bug

Hello,
When I try to make 'vue' as external in vite config in order to use importmaps:

rollupOptions: {
        external: ['vue', 'vue-router', 'vuex'],

I have found that the style tags are no more added to the DOM. I even don't find the keyword data-v-ce in the generated sources.
In the provided reproduction link, I can not reproduce the issue as I couldn't replicate all the environment I have (transforming my vue3 app into a web component and using it in another container). I will try to create a full reproduction on a separate git repo.

I wanted to know if this is a known limitation ?
Thank you,

Reproduction

https://stackblitz.com/edit/github-ajr7vy?file=vite.config.ts

System Info

No response

Used Package Manager

yarn

Validations

• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Make sure this is a unplugin-vue-ce issue and not a framework-specific issue. For example, if it's a Vue SFC related bug, it should likely be reported to https://github.com/vuejs instead.
• The provided reproduction is a minimal reproducible example of the bug.

Describe the bug

If we try building an library with Vite and then want to use in another project, "Component is missing template or render function" is shown, no matter where.

I'm combining ce-app and substyle for accomplish this. The reproduction is a monorepo with playground and package repos.

Reproduction

https://github.com/mrcego/unplugin-vue-ce-library-attempt

System Info

SO: Windows 10/11
Browser: Chromium/Firefox

Used Package Manager

pnpm

Validations

• Follow our Code of Conduct
• Read the Contributing Guide.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Check that this is a concrete bug. For Q&A, please open a GitHub Discussion instead.
• The provided reproduction is a minimal reproducible of the bug.

I am trying to use switch shadow to turn off shadowRoot but I does not work no my side.
Is there a property to pass to the plugin in vite?

Hey @baiwusanyu-c!

We were recently working in getting support for plugins like Vue Router and Pinia using a wrapper. It works nicely, but we would like to improve style handling using your vite plugin. Do you mind if put us in the right direction to do that? We are testing now and it collides with wrapper workaround.

Thanks in advance!

Hi @baiwusanyu-c!

Thanks again for supporting CE and Vue 3 community, and keep nailing it!

Latest beta look like has an issue with package.json config for import/export. I tested beta.13 and this issue doesn't occurs.

Describe the bug

Hi,

Subcomponent styling werkt zoals verwacht in de vite dev server, maar helaas als ik het via Storybook run, loop ik tegen issues aan.

The sub web component styling works as expected in the vite dev server. In the reproduction example has the sub component a blue background, but when the same web component is running in storybook the blue background doesn’t appear.

Could you please check if it can also be made functional in Storybook?

Thanks in advance.

Result in Storybook:

Result in Vite dev server

Reproduction

https://codesandbox.io/p/devbox/great-shamir-whcvsl?file=%2Fpackage.json

System Info

No response

Used Package Manager

npm

Validations

• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Make sure this is a unplugin-vue-ce issue and not a framework-specific issue. For example, if it's a Vue SFC related bug, it should likely be reported to https://github.com/vuejs instead.
• The provided reproduction is a minimal reproducible example of the bug.

Describe the bug

Removing the 1st CE instance of a v-for, leads to style being completely removed from the DOM even though there are still other CEs relying on it

Reproduction

https://play.vuejs.org/#eNqNVE1v2zAM/SucdsgGtBGw3gLX2Nb10B22oguwQ92D5zCJWscyJDlLEPi/j5ItRc6cbgWK2HyPfPwyD+xTXU+3DbIZSwxu6jI3mGYV0F+y/pA+YK3koimMkBVog7VOOJl7QlP2T+6tFOmNrPdg1giFrAxWBuQS5mv8iWUhN2h1rMWshQZS2q+UbKpFwslzGOc+Jy0QBkTlwiUitXxe4GVe11yrglPAWlakoflQIeEijUIm3GWZ8Kg6dsGMphSXYjV91rKi4g+WnTEbVZSovte2Yp2xGTjEYnlZyt9fnc2oBi+8vVhj8TJif9Y7a8vYvUKNaosZC5jJ1QpNB9/++IY7eg7ghjpeEvsV8AG1LBubY0f7TH2ktCOey/aOeqSMqFZzfbujgWhflE3UMlvHzxj17eaV0o/pXk2vnF9WtdTFYeftDulCidqARtPUaaaySrgU4AAKc1qjLUILSyU3MCGPScToA93RnHrClEc2KxDTv8ii2dD4c5vtHQ0zOAl60dyaBpzTAHMpS+rMGdcePXW6LaTe025uzrgFPDjafwvTLpNZwzU8WhNQc90PgPWe/V3PhcfXmC8olRlMBpxJIPQf2ymhs3saTXpMNurCiGCPjkn1ENx0ln/IDPo2IhTwMakAjos9Ddu8ENreClxQq/3OvTsM+9t/qb56/xqEOgO0723YhHdL7dbZGY6nxKWRLMQWtpdLqa4zZqdsz5abdsZg9oL73jzt681Y70iu8dZvL8WSqKGAx9jpKfIiP58CvLUNjhDCwmmEmdBe29IoHR4HiW7iWOReOT0cXDU+E2jbUU9P87e/bUOV8Yd8rP1XYwyt6ceiFMXL+cJpjm/+pydzuVrR2QyaXXg/I05Dcs8nubP2D1s3Y48=

System Info

No response

Used Package Manager

npm

Validations

• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Make sure this is a unplugin-vue-ce issue and not a framework-specific issue. For example, if it's a Vue SFC related bug, it should likely be reported to https://github.com/vuejs instead.
• The provided reproduction is a minimal reproducible example of the bug.

Hi @baiwusanyu-c, me again 😇.

I was trying your last beta, and I found missing Tailwind styles when I wanna import non-CE components into a CE.

My use case is an monorepo, like before with the other workaround, but following examples from sub-style plugin. It's weird because some styles work and others just don't. My idea here is coding as a SPA, and build as a Web Component (because Vue Devtools doesn't works with Web Components)

I just tested this here: https://stackblitz.com/edit/vitejs-vite-jesxqs?file=ce%2Fsrc%2FCEEntry.vue, I hope this issue could be due to missing config of something from my own. I will be thankfully if you could help me, and sorry for the repetitive questions.

PD. SPA mode just works with pnpm dev command, and CE mode with pnpm dev:ce, just in case you want to compare.

Hi @baiwusanyu-c!

I'm not sure what's going on here, and I don't know if this issue is related to dependency, but when I work with CE, Terminal shows warnings:

I was testing here too and I was able to reproduce.
Type pnpm dev:ce for see the warnings. Thanks in advance.

Hello @baiwusanyu-c ,

The plugin seems to have an issue when we use defineAsyncComponent the following:

const ComponentB = defineAsyncComponent(() =>
	import("../ComponentB/ComponentB.vue")
);

At this point it does not inject the style. Would it be possible to look into this as well?

Here's what creates an issue:

Repo:
https://github.com/SavkaTaras/vue-cue-issues/

File (line 13):
https://github.com/SavkaTaras/vue-cue-issues/blob/master/src/components/ComponentA/ComponentA.vue

Thank you,
Taras

Hello @baiwusanyu-c ,

Thanks for this nice plugin 😊

Got it running in Vite 🎉

Unfortunately I run into problems with webpack....

An error pops up on WebpackBuild wonder where the problem is 🙃

The error only fails when I add webpackVueCESubStyle. I can build without, but without nested styling in the CustomElement.

Use webpack@5 with these plugins:

• vue-loader -> VueLoaderPlugin
• @unplugin-vue-ce/sub-style -> webpackVueCESubStyle
• html-webpack-plugin -> HtmlWebpackPlugin

Built-in Vue-Rule (Here customElement must be set ):

{
    test: /\.vue$/i,
    use: [
      {
        loader: 'vue-loader',
        options: {
          customElement: true
        }
      }
    ]
  }

Found that I still get a problem with this plugin when I build webpack and vite in a node instance.

Example a Vitest with two Describes for the respective Builds.

Example: https://github.com/ThornWalli/webpack-sub-style-test

Reinstall the project and then run the task test-1.

One of the two builds runs, both together do not.

await new Promise(resolve => webpack(webpackConfig, resolve));
console.log('webpack build done');

await build(viteConfig)
console.log('vite build done');

[commonjs--resolver] Cannot read properties of null (reading 'type')
file: xxx/webpack-sub-style-test/node_modules/@vue/runtime-dom/dist/runtime-dom.esm-bundler.js
file://xxx/webpack-sub-style-test/node_modules/@unplugin-vue-ce/sub-style/index.js:35
  if (isComponentUpdateFnIdentifier && parent.type === "VariableDeclarator" && node.type === "Identifier" && node.name === "subTree") {
                                              ^

TypeError: Cannot read properties of null (reading 'type')
    at injectToRenderer (file://xxx/webpack-sub-style-test/node_modules/@unplugin-vue-ce/sub-style/index.js:35:47)
    at Object.enter (file://xxx/webpack-sub-style-test/node_modules/@unplugin-vue-ce/sub-style/index.js:91:7)
    at d.visit (file://xxx/webpack-sub-style-test/node_modules/estree-walker-ts/index.js:1:872)
    at A (file://xxx/webpack-sub-style-test/node_modules/estree-walker-ts/index.js:1:2956)
    at injectVueRuntime (file://xxx/webpack-sub-style-test/node_modules/@unplugin-vue-ce/sub-style/index.js:84:3)
    at Object.transform (file://xxx/webpack-sub-style-test/node_modules/@unplugin-vue-ce/sub-style/index.js:166:11)
    at Object.plugin.transform (file://xxx/webpack-sub-style-test/node_modules/unplugin/dist/index.mjs:1255:25)
    at file://xxx/webpack-sub-style-test/node_modules/rollup/dist/es/shared/node-entry.js:25461:40 {
  code: 'PLUGIN_ERROR',
  plugin: 'commonjs--resolver',
  hook: 'resolveId',
  id: 'xxx/webpack-sub-style-test/node_modules/@vue/runtime-dom/dist/runtime-dom.esm-bundler.js',
  watchFiles: [
    'xxx/webpack-sub-style-test/src/entry.js',
    'xxx/webpack-sub-style-test/package.json',
    'xxx/webpack-sub-style-test/node_modules/vue/dist/vue.runtime.esm-bundler.js',
    'xxx/webpack-sub-style-test/src/components/Example.vue',
    'xxx/webpack-sub-style-test/src/components/ChildContent.vue',
    'xxx/webpack-sub-style-test/src/components/Example.vue?used&vue&type=style&index=0&inline&scoped=269eb374&lang.postcss',
    '\x00plugin-vue:export-helper',
    'xxx/webpack-sub-style-test/node_modules/@vue/runtime-dom/dist/runtime-dom.esm-bundler.js',
    'xxx/webpack-sub-style-test/src/components/ChildContent.vue?used&vue&type=style&index=0&inline&scoped=fe62139e&lang.postcss'
  ]
}

Describe the bug

Hi,

first I want to say thank you for this nice library which helped me getting my stylings correct for the component library I am working on!

Unfortunately I came across one issue, which I couldn't solve on my own yet.
Under some circumstances I could not fully pin down by now, my app crashes while rendering the web components.

This is the error I am getting:

I reverse engineered it and found that the line causing the error is this one:

The strange thing is, that it works for the whole loop (for each stylesheet) it goes through for one component, but suddenly crashes on the last iteration.

Have you maybe experienced something similar in the past?
I could not find anything related in the issues section.
Unfortunately I can not provide you with example code, because I can not publish the relevant code parts to public.

Version used:
@unplugin-vue-ce/sub-style: 1.0.0-beta.17

Thanks & BR

Reproduction

not possible, internal code

System Info

System:

    OS: Linux 5.10 Debian GNU/Linux 11 (bullseye) 11 (bullseye)

    CPU: (3) x64 11th Gen Intel(R) Core(TM) i7-1165G7 @ 2.80GHz

    Memory: 16.04 GB / 17.24 GB

    Container: Yes

    Shell: 5.1.4 - /bin/bash

  Binaries:

    Node: 18.17.1 - ~/.nvm/versions/node/v18.17.1/bin/node

    npm: 9.6.7 - ~/.nvm/versions/node/v18.17.1/bin/npm

  Browsers:

    Chrome: 120.0.6099.216

Used Package Manager

npm

Validations

• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Make sure this is a unplugin-vue-ce issue and not a framework-specific issue. For example, if it's a Vue SFC related bug, it should likely be reported to https://github.com/vuejs instead.
• The provided reproduction is a minimal reproducible example of the bug.

Hello,
I hope you are doing well.

Could you please take a look at the logic you're running when defineAsyncComponent is used.

The specific bug happens in this case:
component-a uses defineAsyncComponent component-b.
component-b uses defineAsyncComponent component-c.

When using , styles from don't come through, because of one if statement.

Is it possible to recursively get all components on async and get their styles up to the root element? Maybe MutationObserver could help solving the issue?

Anyways, if we have to switch to import actual component instead of defineAsyncComponent import that is fine, but it would be great to get this working since some people might ask for it.

Thank you for all your work, you've been great.

I've update the repo to reproduce the issue:
https://github.com/SavkaTaras/vue-cue-issues

Component C (custom element: component-z):
https://github.com/SavkaTaras/vue-cue-issues/blob/master/src/components/ComponentC/ComponentC.vue

Component B (custom element: component-y):
https://github.com/SavkaTaras/vue-cue-issues/blob/master/src/components/ComponentB/ComponentB.vue

Component A (custom element: component-x):
https://github.com/SavkaTaras/vue-cue-issues/blob/master/src/components/ComponentA/ComponentA.vue

Please run

npm install
npm run build
npm run dev

Best regards,
Taras

Describe the bug

When using a library inside as child of your CE component that uses the ES modules import "./mylib.css" (in the <script> tag!) the css does not end up in the shadow dom but in the regular dom.

Reproduction

https://stackblitz.com/edit/vitejs-vite-nqrj24 (should work now)

System Info

No response

Used Package Manager

npm

Validations

• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Make sure this is a unplugin-vue-ce issue and not a framework-specific issue. For example, if it's a Vue SFC related bug, it should likely be reported to https://github.com/vuejs instead.
• The provided reproduction is a minimal reproducible example of the bug.

Hello,
I hope you are doing well.

I am facing the issue when I include the component twice on the page (index.html). The second copy of the same component doesn't have nested styles.

UPDATE: We build web components using vue lib dev mode. Then we import these components as my-lib.umd.js on index.html vie script tag.

I use Vite 4.2.0 and vue 3.3.4 to build out web components.

Version:
"@unplugin-vue-ce/sub-style": "^1.0.0-beta.9",

Thank you.

This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.

Rate-Limited

These updates are currently rate-limited. Click on a checkbox below to force their creation now.

• chore(deps): update actions/checkout digest to 0ad4b8f
• chore(deps): update vue monorepo to v3.4.25 (@vue/compiler-sfc, vue)
• fix(deps): update dependency magic-string to v0.30.10
• fix(deps): update dependency vue-router to v4.3.2
• chore(deps): update dependency magic-string-ast to ^0.5.0
• chore(deps): update vitest monorepo to v1.5.2 (@vitest/ui, vitest)
• chore(deps): update dependency eslint to v9
• chore(deps): update pnpm to v9
• 🔐 Create all rate-limited PRs at once 🔐

Open

These updates have all been created already. Click a checkbox below to force a retry/rebase of any.

• chore(deps): replace dependency npm-run-all with npm-run-all2 ^5.0.0
• chore(deps): update dependency @babel/parser to v7.24.4
• chore(deps): update dependency vite to v5.2.10
• chore(deps): update pnpm to v8.15.7
• fix(deps): update dependency unplugin to v1.10.1
• chore(deps): update dependency @types/node to v20.12.7
• chore(deps): update dependency rollup to v4.17.0
• chore(deps): update dependency typescript to v5.4.5
• fix(deps): update unocss monorepo to ^0.59.0 (@unocss/postcss, unocss)
• chore(deps): update dependency gulp to v5
• Click on this checkbox to rebase all open PRs at once

Detected dependencies

• Check this box to trigger a request for Renovate to run again on this repository

Describe the bug

If I use Transition component, the styles of the child components are removed before the animation ends

Reproduction

https://stackblitz.com/edit/vitejs-vite-pmbo7v

System Info

No response

Used Package Manager

npm

Validations

• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Make sure this is a unplugin-vue-ce issue and not a framework-specific issue. For example, if it's a Vue SFC related bug, it should likely be reported to https://github.com/vuejs instead.
• The provided reproduction is a minimal reproducible example of the bug.

Hello,

this is related issue, as I have the same error
#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);

Hi! Me again, but n-times 🥲.

There is an use case here when try to use dependencies that relay in a completed createApp instance, like mitt. this is an example using vue-web-component-wrapper using app.provides to passthrough emitter to any child component.

export const defineCustomElementWrapped = (component, { plugins = [] } = {}) =>
  defineCustomElement({
    styles: component.styles.map((style) => {
      return style.replace(':root', ':host').replace('body {', '#app {')
    }),
    props: component.props,
    setup(props) {
      const app = createApp({})

      // install plugins
      plugins.forEach(app.use)

      app.provide('emitter', emitter) // <-- HERE!!

      const inst = getCurrentInstance() as ComponentInternalInstance & AppContext
      Object.assign(inst!.appContext, app._context)
      Object.assign(inst!.provides, app._context.provides)

      return () =>
        h(component, {
          ...props,
        })
    },
  })

when I want to use createCEApp API, it just expose mount and use functions. I was trying to merge both _context and _context.provides properties without success.

Thanks in advance for your help.