search

unplugin / unplugin-vue-ce

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

"Component is missing template or render function" when using in Vite's library mode. #91

Closed mrcego closed 1 year ago

mrcego commented 1 year ago

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

baiwusanyu-c commented 1 year ago

In the case you provided, I did not find that ce-ui-core.js was used in the playground, so I don’t know how you used it specifically, but I noticed that you used createCEApp incorrectly. I made changes to the files in the package directory, and the alert component can be rendered.

// index.ts
import { createCEApp } from '@unplugin-vue-ce/ce-app'
import './style.css'
import Alert from '@components/Alert'

const ClgAlert = createCEApp(Alert.AlertBase)

// export individual elements
export { ClgAlert }

export function register() {
  ClgAlert.mount('clg-alert')
}
register()
// index.html
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite + Vue + TS</title>
  </head>
  <body>
    <div id="app">
        <clg-alert></clg-alert>
    </div>
    <script type="module" src="/src/index.ts"></script>
  </body>
</html>
mrcego commented 1 year ago

I just built package repo using pnpm build and then pnpm i to do it part as project dependency, and tried to use in index.html file of playground monorepo. My idea was the same as your example, exposing and using register() in playground monorepo directly.

baiwusanyu-c commented 1 year ago

The warning message about Component is missing template or render function is because you exported an object, so you need to make sure to pass in a specific component object. const ClgAlert = createCEApp(Alert.AlertBase)

mrcego commented 1 year ago

Look like it's correct now, I missed miserably that detail 😊. In the other hand, I just ran in issue with slots, but this is another story. Thanks again @baiwusanyu-c.