Vue-next: children component doesn't compile successful

[skyweaver213]

Version

"vue": "^3.0.0-rc.10"，
"@vue/compiler-sfc": "^3.0.0-rc.10",
"rollup-plugin-vue": "^6.0.0-beta.10"

Reproduction link

https://codesandbox.io/s/cocky-noyce-6zi8p?file=/index.html

Steps to reproduce

• open the link https://6zi8p.sse.codesandbox.io/
• open the page inspect to see Elements window
• \ children component doesn’t compile successful

What is expected?

The children component should be compile.

What is actually happening?

App.vue Children component \

[posva]

Is this a problem in rollup-plugin-vue @znck ?

[znck]

As per spec component name should start with an upper case character. Compiler is treating helloworld as custom element.

[posva]

What do you mean? the component is named HelloWorld and used as <HelloWorld/>

[skyweaver213]

What do you mean? the component is named HelloWorld and used as <HelloWorld/>

The source code is \ Source link: https://codesandbox.io/s/cocky-noyce-6zi8p?file=/pages/home/App.vue:56-98

@znck @posva

[znck]

I am checking.

[znck]

@posva Somehow currentRenderingInstance is missing and resolveComponent depends on it. RPV is working fine. Did we make any changes to currentRenderingInstance?

[posva]

it's weird because it works with vite

[skirtles-code]

For what it's worth, I saw that same error message in a Webpack project. In that project the problem seemed to be that 2 copies of Vue were being pulled in. resolveAsset in a pre-built component was hitting a different Vue from the surrounding application, so it had a different currentRenderingInstance.

From a quick look at that CodeSandbox it looks like it could be the same problem. vue.global.js seems to be doing the majority of the work but it's reaching out to something inside /dist/home/index.js to render the component.

[HcySunYang]

The reason is like @skirtles-code said, and should modify the rollup.config.js to solve that issue:

// rollup.config.js
export default {
  output: {
    // ...
    globals: { vue: 'Vue' }
  },
  // ...
  external: ['vue']
}

[posva]

Ah, nice catch. Didn't notice they were using different Vue versions. Sorry for the noise @znck 😓

[skyweaver213]

Thank you for your help. It was a mistake I wasn't aware of. 😓
@skirtles-code @HcySunYang @znck @posva

[lukef]

Is there a solution that doesn't require roll-up?

[skyweaver213]

Is there a solution that doesn't require roll-up?

Modify the build configuration so that the vue use the same. @lukef
If use rollup, like this:

``js // rollup.config.js export default { output: { // ... globals: { vue: 'Vue' } }, // ... external: ['vue'] }

[kris-ellery]

@lukef have you ever figured it out? @skyweaver213 the globals: { vue: 'Vue' } does not work for ESM output.

I have the same issue, a UI library with multiple parent/child components. when I install it directly from NPM, everything works, but when working with npm link, or even relative path, it throws resolveComponent can only be used in render() or setup(). From what I gathered it's due to multiple copies of Vue.

For what it’s worth, it works w/out problems with Vite.