Web Components with Functional child components throws "Cannot read property '$options' of undefined"

[wpatter6]

Version

3.8.0

Reproduction link

https://github.com/wpatter6/vue-wc-functional-bug

Environment info

Environment Info:

  System:
    OS: Windows 10
    CPU: (4) x64 Intel(R) Core(TM) i7-7600U CPU @ 2.80GHz
  Binaries:
    Node: 11.13.0 - C:\Program Files (x86)\Nodist\bin\node.EXE
    Yarn: 1.10.1 - C:\Program Files (x86)\Yarn\bin\yarn.CMD
    npm: 6.7.0 - C:\Users\william.patterson\AppData\Roaming\npm\npm.CMD
  Browsers:
    Edge: 42.17134.1.0
  npmPackages:
    @vue/babel-helper-vue-jsx-merge-props:  1.0.0
    @vue/babel-plugin-transform-vue-jsx:  1.0.0
    @vue/babel-preset-app:  3.8.0
    @vue/babel-preset-jsx:  1.0.0
    @vue/babel-sugar-functional-vue:  1.0.0
    @vue/babel-sugar-inject-h:  1.0.0
    @vue/babel-sugar-v-model:  1.0.0
    @vue/babel-sugar-v-on:  1.0.0
    @vue/cli-overlay:  3.8.0
    @vue/cli-plugin-babel: 3.6.0 => 3.6.0
    @vue/cli-plugin-eslint: 3.6.0 => 3.6.0
    @vue/cli-service: 3.8.0 => 3.8.0
    @vue/cli-shared-utils:  3.8.0
    @vue/component-compiler-utils:  2.6.0
    @vue/preload-webpack-plugin:  1.1.0
    @vue/web-component-wrapper:  1.2.0
    eslint-plugin-vue: ^5.0.0 => 5.2.2
    vue: 2.6.10 => 2.6.10
    vue-eslint-parser:  2.0.3
    vue-hot-reload-api:  2.3.3
    vue-loader:  15.7.0
    vue-style-loader:  4.1.2
    vue-template-compiler: ^2.5.21 => 2.6.10
    vue-template-es2015-compiler:  1.9.1
  npmGlobalPackages:
    @vue/cli: Not Found

Steps to reproduce

1. Clone or fork repo at minimal reproduction link
2. Run npm i in console
3. Run npm run build-wc in console
4. Open dist/demo.html in browser

What is expected?

Web component should render properly with no errors in browser console

What is actually happening?

Component does not render, error message says

[Vue warn]: Error in render: "TypeError: Cannot read property '$options' of undefined"

found in

---> <App> at src/App.vue
       <Root>

---

Here is the stack trace of the error in the console:

TypeError: Cannot read property '$options' of undefined
    at FunctionalRenderContext.hook (v-app.js:704)
    at renderWithStyleInjection (v-app.js:716)
    at createFunctionalComponent (vue.js:3065)
    at createComponent (vue.js:3238)
    at _createElement (vue.js:3422)
    at createElement (vue.js:3360)
    at vm._c (vue.js:3491)
    at Proxy.render (v-app.js:735)
    at VueComponent.Vue._render (vue.js:3545)
    at VueComponent.updateComponent (vue.js:4061)

If I make the child component non-functional it will work properly. Was really hoping to be able to use functional components to help improve performance of my web components.

Thanks in advance for any help!

[wpatter6]

Note: This works fine if I change the component to non-functional, or if I change the build away from web components to the traditional cli build

[haoqunjiang]

🤔It's due to functional components' context not having a $root property (thus failing to get the shadowRoot of the current ). May need to be fixed in both vue-loader & vue core. Considering there may also be some edge cases with nested functional components, it'll take some time to write a comprehensive test. I'll check it out soon.

[zrh122]

I add a PR to vue-loader, and maybe it can fix it. @sodatea

[Marcus-Rise]

@yyx990803 @sodatea, we are still waiting for accepting PR from @zrh122

[Marcus-Rise]

We can't use functional components at web component target

[haoqunjiang]

I'll take a look later today or tomorrow.

[Marcus-Rise]

@sodatea did you look PR?

[haoqunjiang]

Yeah I was testing some edge cases locally.
Anyway, that PR works. I'm merging it.