Vue version

3.2.38

Link to minimal reproduction

https://github.com/andresilva-cc/vue-custom-element-prop-bug

Steps to reproduce

In component directory:

npm install
npm run build

In web directory:

npm install
npm run dev

Open the page as indicated on npm run dev and look for the error on the console.

Now try to uncomment the defineProps line on component/src/index.ce.vue, build it again with npm run build, and see the error disappear and the cl-button component working as expected.

What is expected?

It is expected that the cl-button component renders normally even if it has no props.

What is actually happening?

The cl-button component does not render and generates an error on the console if it has no props. If we call defineProps with an empty object it works as expected.

System Info

System:
    OS: macOS 12.5.1
    CPU: (8) arm64 Apple M1
    Memory: 76.70 MB / 16.00 GB
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 16.16.0 - ~/.nvm/versions/node/v16.16.0/bin/node
    Yarn: 1.22.15 - ~/.nvm/versions/node/v16.16.0/bin/yarn
    npm: 8.14.0 - ~/.nvm/versions/node/v16.16.0/bin/npm
  Browsers:
    Chrome: 104.0.5112.101
    Firefox: 102.0.1
    Safari: 15.6.1

Any additional comments?

We are building a component library with Vue where the components are compiled to Custom Element. When we import the generated JS file to another project, the component will not render and generates a console error that seems to be an internal error from Vue that has been bundled together with the Custom Element:

Uncaught TypeError: Cannot read properties of undefined (reading 'dataV7a7a37b1')

The error origins from this block:

    const t = (o) => {
      const { props: r, styles: s } = o, i = !C(r), l = r ? i ? Object.keys(r) : r : [];
      let f;
      if (i)
        for (const a in this._props) {
          const h = r[a]; // <------ HERE
          (h === Number || h && h.type === Number) && (this._props[a] = Pn(this._props[a]), (f || (f = /* @__PURE__ */ Object.create(null)))[a] = !0);
        }
      this._numberProps = f;

If we call defineProps, even with an empty object, it works as expected. The strange thing is that bootstrapping a Vue project through Vue CLI, which does not use Vite, the imported Custom Element works as expected, even without props, but not when using Vite as the build tool. Tested also with Vite + React and it generates the same error.

@andresilva-cc I I had the same problem and I solved it by putting a wildcard prop.

<script setup>
   defineProps({ "*": "" });
</script>

Don't forget to remove the package-lock.json and the node_module for the new version of the cl-button.