TypeError: _vm._ssrNode is not a function

[szulcus]

Environment

Nuxt 2 with @nuxt/bridge.

$ npx nuxi info
Nuxt CLI v3.0.0-rc.8

Reproduction

Unfortunately the package is secret so I can't create a reproduction.

Describe the bug

After moving from @nuxtjs/composition-api to @nuxt/bridge, I get the error:

[Vue warn]: Error in render: "TypeError: _vm._ssrNode is not a function"

found in

---> <F24Loader>
       <Pages/index.vue> at pages/index.vue
         <Nuxt>
           <.nuxt/layouts/default.vue> at .nuxt/layouts/default.vue
             <Root>
[nuxt] [request error] _vm._ssrNode is not a function
(...)

<F24Loader /> is a component from the company's npm package (written with rollup, in Vue 2) in which we keep components common to all projects. It helps to set ssr: false in nuxt.config.ts file, or wrap a component in <client-only>. Is there a chance that these components will also work on the server side?

Additional context

No response

Logs

No response

[danielroe]

This sounds like a Vue issue rather than with Bridge. Would you provide a minimal reproduction? 🙏

[szulcus]

This sounds like a Vue issue rather than with Bridge. Would you provide a minimal reproduction? 🙏

Hmm, on Nuxt 2 it worked. I will try to create a reproduction.

[szulcus]

Ready! :) Nuxt Bridge SSR reproduction.zip

Preview package:

cd ./package
yarn
yarn serve

Build package:

cd ./package
yarn
yarn build
yarn pack

Run nuxt2 project:

cd ./nuxt2
yarn
yarn dev

Run nuxt-bridge project:

cd ./nuxt-bridge
yarn
yarn dev

[szulcus]

@danielroe I would have another request. Could you take a look why I don't have types for the hello1 and hello2 plugins in useNuxtApp()? I have a similar problem with Nuxt 3 (https://github.com/johnsoncodehk/volar/issues/1785)

~/plugins/hello1.ts

import { defineNuxtPlugin } from '#app'

declare module '#app' {
	interface NuxtApp {
		$hello1 (msg: string): string
	}
}

declare module '@vue/runtime-core' {
	interface ComponentCustomProperties {
		$hello1 (msg: string): string
	}
}

export default defineNuxtPlugin(({ provide }) => {
	provide('hello1', (msg: string) => `Hello 1 ${msg}!`)
});

~/plugins/hello2.ts

import { defineNuxtPlugin } from '#app'

declare module '#app' {
	interface NuxtApp {
		$hello2 (msg: string): string
	}
}

declare module '@vue/runtime-core' {
	interface ComponentCustomProperties {
		$hello2 (msg: string): string
	}
}

export default defineNuxtPlugin(({ provide }) => {
	provide('hello2', (msg: string) => `Hello 2 ${msg}!`)
});

~/tsconfig.json

{
	"extends": "./.nuxt/tsconfig.json",
	"compilerOptions": {
		"target": "ES2018",
		"module": "ESNext",
		"moduleResolution": "Node",
		"lib": [
			"ESNext",
			"ESNext.AsyncIterable",
			"DOM"
		],
		"esModuleInterop": true,
		"allowJs": true,
		"sourceMap": true,
		"strict": true,
		"noEmit": true,
		"experimentalDecorators": true,
		"jsx": "preserve",
		"baseUrl": ".",
		"types": [
			"@nuxt/types",
			"@types/node",
			"@vue/runtime-core"
		]
	},
	"exclude": [
		"node_modules",
		".nuxt",
		"dist"
	]
}

Reproduction: Nuxt Bridge useNuxtApp() reproduction.zip

yarn
yarn dev

[MartinX3]

It also started breaking for me as well

nuxi dev
Nuxi 3.0.0-rc.9                                                                                                                                                                15:35:30
Nuxt 2.16.0-27616340.013f051b                                                                                                                                                  15:35:30
                                                                                                                                                                               15:35:33
 FATAL  nuxtCtx.tryUse is not a function                                                                                                                                       15:35:33

  at ModuleContainer.<anonymous> (node_modules/@nuxt/bridge/module.cjs:31:17)
  at async ModuleContainer.addModule (node_modules/@nuxt/core-edge/dist/core.js:174:20)
  at async ModuleContainer.ready (node_modules/@nuxt/core-edge/dist/core.js:45:7)
  at async Nuxt._init (node_modules/@nuxt/core-edge/dist/core.js:346:5)


 ERROR  Cannot start nuxt:  nuxtCtx.tryUse is not a function                                                                                                                   15:35:33

  at ModuleContainer.<anonymous> (node_modules/@nuxt/bridge/module.cjs:31:17)
  at async ModuleContainer.addModule (node_modules/@nuxt/core-edge/dist/core.js:174:20)
  at async ModuleContainer.ready (node_modules/@nuxt/core-edge/dist/core.js:45:7)
  at async Nuxt._init (node_modules/@nuxt/core-edge/dist/core.js:346:5)

[danielroe]

@MartinX3 That indicates an old version of unctx. You can run yarn upgrade unctx or otherwise upgrade your lockfile.

[MartinX3]

@danielroe I already removed the lock file and it uses unctx v2.0.2 :(

[speery4]

I am able to reproduce this by creating a new Nuxt 2 project and then following the Nuxt Bridge upgrade guide. The only package I have added is the nuxt-property-decorator package.

https://v3.nuxtjs.org/bridge/overview/

Here is the runtime error

[Vue warn]: Property or method "_ssrNode" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://v2.vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.

found in

---> <Test> at pages/Test.vue
       <Nuxt>
         <.nuxt/layouts/default.vue> at .nuxt/layouts/default.vue
           <Root>
[Vue warn]: Error in render: "TypeError: _vm._ssrNode is not a function"

found in

---> <Test> at pages/Test.vue
       <Nuxt>
         <.nuxt/layouts/default.vue> at .nuxt/layouts/default.vue
           <Root>
[nuxt] [request error] _vm._ssrNode is not a function
  at Proxy.render (./.nuxt/dist/server/pages/Test.js:19:25)
  at VueComponent.Vue._render (./node_modules/vue/dist/vue.runtime.common.dev.js:2588:28)
  at resolve (./node_modules/vue-server-renderer/build.dev.js:7211:33)
  at waitForServerPrefetch (./node_modules/vue-server-renderer/build.dev.js:7095:5)
  at renderComponentInner (./node_modules/vue-server-renderer/build.dev.js:7225:5)
  at renderComponent (./node_modules/vue-server-renderer/build.dev.js:7185:9)
  at renderNode (./node_modules/vue-server-renderer/build.dev.js:7102:9)
  at resolve (./node_modules/vue-server-renderer/build.dev.js:7222:9)
  at waitForServerPrefetch (./node_modules/vue-server-renderer/build.dev.js:7095:5)
  at renderComponentInner (./node_modules/vue-server-renderer/build.dev.js:7225:5)

pages/Test.vue

<template>
  <h1>Test Page</h1>
</template>

<script lang="ts">
import { Component, Vue } from 'nuxt-property-decorator';

/**
 * Test Page
 */
@Component({
  components: {},
  mixins: []
})
export default class Test extends Vue {}
</script>

[timBeehexa]

After replace nuxt-property-decorator --> vue-class-component + vue-property-decorator --> Fixed

[danielroe]

This sounds like it might be an issue with https://github.com/nuxt-community/nuxt-property-decorator in that case.

[Laruxo]

The main contributor of nuxt-property-decorator has written that he does not plan to upgrade the lib for Nuxt 3 support. Apparently, he switched multiple projects to Nuxt 3 by migrating to composition API. https://github.com/nuxt-community/nuxt-property-decorator/issues/83#issuecomment-1246615441

[MartinX3]

@Laruxo it's deprecated by the composition api since vue 2.7.

[wattanx]

It has not responded for a while, so I am closing it. Reopen is welcome. (It would be helpful if you could provide a reproduction)