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?

[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:

// 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.

[tomhrtly]

@kris-ellery I'm having the same issue as you, any chance you've managed to find a fix?

[kris-ellery]

@tomhrtly I stopped looking once I got it working with Vite.

[mikecmpbll]

anyone got any clues how to resolve this with webpack? experiencing the same thing.

[skirtles-code]

Even if the library is being built correctly, it can still fail if you try to include it using npm link or a file: path in the consuming application. The copy of Vue in the node_modules of your library will get pulled in if you include it that way. You can confirm by deleting the node_modules folder for the library. That obviously isn't a very clean solution.

With webpack and Vue CLI I managed to get it working using the following code in vue.config.js:

const path = require('path')

module.exports = {
  configureWebpack: {
    resolve: {
      symlinks: false,
      alias: {
        vue: path.resolve('./node_modules/vue')
      }
    }
  }
}

I would imagine something similar would work without Vue CLI if the same configuration is moved to the relevant place in the webpack config.

The idea to use an alias comes from https://medium.com/@penx/managing-dependencies-in-a-node-package-so-that-they-are-compatible-with-npm-link-61befa5aaca7

The symlinks part is based on the advice here: https://cli.vuejs.org/guide/troubleshooting.html#symbolic-links-in-node-modules. You might not need that part depending on the specifics of your project.

It's not elegant but it did resolve the problem in the cases I tried.

For anyone using Vite for their application, I believe you'd need to include resolve.dedupe in your vite.config.js instead:

export default {
  resolve: {
    dedupe: ['vue']
  }
}

---

Another potential cause of this problem is not importing Vue as 'vue'. Make sure your imports look like this:

import { createApp } from 'vue'

and NOT this:

import { createApp } from 'vue/dist/vue.esm-browser.js'

[tbtalbottjr]

Just wanted to confirm that using the "resolve" entry that @skirtles-code provided allows me to do a 'yarn link' to a library I am trying to help convert over to Vue 3. Prior to that, I had to point to a github repository and do a push to get the library to work correctly. I was having the same issue that a second version of Vue was being pulled out of the node_modules of the library and preventing rendering of the library's components.

The application the library was being used in is using webpack 4.43.x

[gaetandezeiraud]

Same here. And the @skirtles-code solution don't work for me.