Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

TypeError: Cannot read property 'type' of null at unmountComponent #1745

Closed
PingTouG opened this issue Jul 31, 2020 · 4 comments
Closed

TypeError: Cannot read property 'type' of null at unmountComponent #1745

PingTouG opened this issue Jul 31, 2020 · 4 comments

Comments

@PingTouG
Copy link

Version

3.0.0-rc.5

Reproduction link

https://github.com/PingTouG/layer

Steps to reproduce

leave "/componnets/container" router

What is expected?

to other router

What is actually happening?

TypeError: Cannot read property 'type' of null at unmountComponent

@underfin
Copy link
Member

underfin commented Jul 31, 2020

I tracked for this and the blew is a mini-reproduction.Maybe we should internal provider a safer getter for computed and customRef?

<script src="./dist/vue.global.js"></script>
<div id="app"></div>
<script>
  const {createApp, computed, setBlockTracking} = Vue
  // this can fix this.
  function saferGetter(getter) {
    return () => {
      setBlockTracking(-1)
      const res = getter()
      setBlockTracking(1)
      return res
    }
  }

  const Parent = {
    template: `
      <section class="c-container" :class="{ 'is-vertical': isVertical }">
        <slot/>
      </section>
    `, setup(props, {slots}) {
      const isVertical = computed(saferGetter(() => {
        // this caused the bug because `computed` getter run inside `render` and collect this into dynamicChildren.
        return !!slots.default()
      }))

      return {
        isVertical
      }
    }
  }

  const Child = {
    template: `<div>child</div>`,
  }

  const app = createApp({
    components: {
      Parent, Child
    }, template: `
      <Parent>
        <Child></Child>
      </Parent>`
  })
  app.mount('#app')

  setTimeout(() => {
    app.unmount('#app')

  }, 3000)
</script>

@PingTouG
Copy link
Author

PingTouG commented Aug 1, 2020

‘saferGetter’ is ok, but muset use this?

@yyx990803
Copy link
Member

yyx990803 commented Aug 6, 2020

Hmm, slots is not reactive though, so the computed is pointless...

Also, if you are trying to check for presence of a slot, you should do !!$slots.default in the template (don't call it)

@rendomnet
Copy link

rendomnet commented Jun 18, 2023

I have this error.
Vue3 error log is mess. Cant event udnerstand where it happens

@github-actions github-actions bot locked and limited conversation to collaborators Sep 8, 2023
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

4 participants