fastify-vite-vue:useServerAPI Cannot read property 'appContext' of null

SuslegStyle commented 3 years ago

He guys. Could you please help me?

Today I faced the issue

TypeError: Cannot read property 'appContext' of null
    at Proxy.useServerAPI (***\node_modules\fastify-vite-vue\client.js:47:41)

Looks like the internal method getCurrentInstance() returns null.

As a workaround I have to use try catch for useServerAPI method, but my page does not get data from SSR.

Just in case, list of my project's dependencies

"dependencies": {
    "@mgcrea/fastify-session": "^0.14.1",
    "@mgcrea/fastify-session-redis-store": "^0.9.1",
    "@popperjs/core": "^2.9.2",
    "@vueuse/head": "^0.6.0",
    "async": "^3.2.0",
    "awilix": "^4.3.4",
    "bootstrap-icons": "^1.5.0",
    "fastify": "^3.18.0",
    "fastify-api": "^0.2.0",
    "fastify-awilix": "^1.1.0",
    "fastify-config-loader": "^1.1.2",
    "fastify-cookie": "^5.3.1",
    "fastify-plugin": "^3.0.0",
    "fastify-sensible": "^3.1.1",
    "fastify-static": "^4.2.2",
    "fastify-vite": "^2.2.0-beta.2",
    "fastify-vite-vue": "^2.2.0-beta.2",
    "ioredis": "^4.27.6",
    "ipaddr.js": "^2.0.1",
    "vite": "^2.3.8",
    "vue": "^3.1.2",
    "vue-router": "^4.0.10"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^1.2.3",
    "@vue/compiler-sfc": "^3.1.2",
    "bootstrap": "^5.0.2",
    "cross-env": "^7.0.3",
    "eslint": "^7.29.0",
    "eslint-plugin-import": "^2.23.4",
    "eslint-plugin-node": "^11.1.0",
    "eslint-plugin-vue": "^7.11.1",
    "sass": "^1.35.1"
  }

SuslegStyle commented 3 years ago

I found reasons, why this error happens for me, maybe for someone else it will be helpful.

The root cause is Vue version, for 3.1.2 the error is happens, but when I downgraded back to 3.1.1 the error is gone. The changelog can be found here

galvez commented 3 years ago

@SuslegStyle fixed in the latest release, see https://www.youtube.com/watch?v=ybCMaNDcb1s

SuslegStyle commented 3 years ago

Thank you for the update.

I made the appropriate changes, but it does not work me.

TypeError: Cannot read property 'appContext' of null
    at useGlobalProperties (***\node_modules\fastify-vite-vue\client.js:111:30)
    at Proxy.useHydration (***\node_modules\fastify-vite-vue\client.js:35:23)
    at setup (***/pages/index.vue:73:34)

The error points to useGlobalProperties method. getCurrentInstance returns null and I don't know why.

function useGlobalProperties () {
  return getCurrentInstance().appContext.app.config.globalProperties
}

I tried to use different combination of Vue and Vite versions, but no luck.

The current list of my dependencies

"dependencies": {
    "@popperjs/core": "^2.9.2",
    "@vueuse/head": "^0.6.0",
    "async": "^3.2.0",
    "awilix": "^4.3.4",
    "bootstrap": "^5.0.2",
    "bootstrap-icons": "^1.5.0",
    "fastify": "^3.19.2",
    "fastify-api": "^0.2.0",
    "fastify-awilix": "^1.1.0",
    "fastify-config-loader": "^1.1.2",
    "fastify-cookie": "^5.3.1",
    "fastify-plugin": "^3.0.0",
    "fastify-sensible": "^3.1.1",
    "fastify-session": "^5.2.1",
    "fastify-vite": "^2.2.0-beta.5",
    "fastify-vite-vue": "^2.2.0-beta.5",
    "fluent-json-schema": "^3.0.1",
    "vite": "^2.4.3",
    "vue": "^3.1.5",
    "vue-router": "^4.0.10",
    "vue3-resize": "^0.2.0"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^1.2.5",
    "@vue/compiler-sfc": "^3.1.5",
    "chai": "^4.3.4",
    "cross-env": "^7.0.3",
    "eslint": "^7.31.0",
    "eslint-plugin-import": "^2.23.4",
    "eslint-plugin-node": "^11.1.0",
    "eslint-plugin-vue": "^7.14.0",
    "faker": "^5.5.3",
    "mocha": "^9.0.2",
    "sass": "^1.35.2"
  }

SuslegStyle commented 3 years ago

A small update, I tried to call directly

    const internalInstance = getCurrentInstance();
    console.log(internalInstance);

    const ctx = await useHydration({getData});

And I can see an object in console, but still have an issue inside useHydration

TypeError: Cannot read property 'appContext' of null

galvez commented 3 years ago

Can you put up a reproduction repository?

SuslegStyle commented 3 years ago

Yeah, it is great idea.

Here you go, https://github.com/SuslegStyle/fastify-vite-hello-world

I will be really appreciate if you can help me to understand what exactly is wrong.

SuslegStyle commented 3 years ago

@galvez any updates ? Does the example was helpful?

SuslegStyle commented 3 years ago

It has been fixed starting fromfastify-vite: 2.2.0-beta.9

galvez commented 3 years ago

Thanks for closing the issue, @SuslegStyle!

fastify / fastify-vite

fastify-vite-vue:useServerAPI Cannot read property 'appContext' of null #17