TypeError: _vm._ssrNode is not a function #510

szulcus · 2022-09-01T15:52:23Z

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

The text was updated successfully, but these errors were encountered:

danielroe · 2022-09-01T21:33:30Z

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

szulcus · 2022-09-02T16:37:27Z

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 · 2022-09-02T17:42:01Z

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 · 2022-09-05T09:53:08Z

@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 (vuejs/language-tools#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 · 2022-09-05T13:36:31Z

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 · 2022-09-05T13:43:09Z

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

MartinX3 · 2022-09-05T13:46:09Z

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

speery4 · 2022-10-21T12:23:58Z

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 · 2022-12-08T03:46:20Z

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

danielroe · 2022-12-08T09:20:53Z

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

Laruxo · 2022-12-20T19:39:51Z

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.
nuxt-community/nuxt-property-decorator#83 (comment)

MartinX3 · 2022-12-20T19:54:06Z

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

wattanx · 2024-01-06T07:29:07Z

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)

szulcus added the pending triage label Sep 1, 2022

danielroe added the needs reproduction label Sep 1, 2022

danielroe removed the needs reproduction label Sep 5, 2022

danielroe added the workaround available label Dec 8, 2022 — with Volta.net

wattanx closed this as not planned Won't fix, can't repro, duplicate, stale Jan 6, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

TypeError: _vm._ssrNode is not a function #510

TypeError: _vm._ssrNode is not a function #510

szulcus commented Sep 1, 2022 •

edited

Loading

danielroe commented Sep 1, 2022

szulcus commented Sep 2, 2022

szulcus commented Sep 2, 2022 •

edited

Loading

szulcus commented Sep 5, 2022 •

edited

Loading

MartinX3 commented Sep 5, 2022

danielroe commented Sep 5, 2022

MartinX3 commented Sep 5, 2022

speery4 commented Oct 21, 2022 •

edited

Loading

timBeehexa commented Dec 8, 2022

danielroe commented Dec 8, 2022

Laruxo commented Dec 20, 2022

MartinX3 commented Dec 20, 2022

wattanx commented Jan 6, 2024

TypeError: _vm._ssrNode is not a function #510

TypeError: _vm._ssrNode is not a function #510

Comments

szulcus commented Sep 1, 2022 • edited Loading

Environment

Reproduction

Describe the bug

Additional context

Logs

danielroe commented Sep 1, 2022

szulcus commented Sep 2, 2022

szulcus commented Sep 2, 2022 • edited Loading

szulcus commented Sep 5, 2022 • edited Loading

MartinX3 commented Sep 5, 2022

danielroe commented Sep 5, 2022

MartinX3 commented Sep 5, 2022

speery4 commented Oct 21, 2022 • edited Loading

timBeehexa commented Dec 8, 2022

danielroe commented Dec 8, 2022

Laruxo commented Dec 20, 2022

MartinX3 commented Dec 20, 2022

wattanx commented Jan 6, 2024

szulcus commented Sep 1, 2022 •

edited

Loading

szulcus commented Sep 2, 2022 •

edited

Loading

szulcus commented Sep 5, 2022 •

edited

Loading

speery4 commented Oct 21, 2022 •

edited

Loading