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
• <helloworld msg="Hello Vue in Fenice!" data-v-00da69ca=""></helloworld> children component doesn’t compile successful

What is expected?

The children component should be compile.

What is actually happening?

App.vue Children component <helloworld/> doesn’t compile successfully.

[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 <HelloWorld msg="Hello Vue in Fenice!" />
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?