Pinia throws obj.hasOwnProperty is not a function when combined with apollo

[kyurkchyan]

Reproduction

https://github.com/kyurkchyan/pinia-apollo-pnpm

Steps to reproduce the bug

1. Clone the repro repository
2. install the dependencies using pnpm i
3. run the project using pnpm dev
4. observe that the main page load fails with 500 internal server error obj.hasOwnProperty is not a function

Expected behavior

The app should load successfully

Actual behavior

App load fails with obj.hasOwnProperty is not a function error

Additional information

If you switch to the without-pinia branch and try the same steps everything works

You don't even have to use any pinia store for this issue to happen. As soon as you install the pinia nuxt plugin everything breaks.

Further, if you downgrade the version of pinia to 0.5.5 everything starts working again. You can check that out inside the working-pinia branch

I've tried all of the versions that were released after 0.5.5 none of them work.

[kyurkchyan]

Seems to be related with #2837

[posva]

Can you repro without Apollo? Where is an object with null as the prototype being passed to pinia?
#2867 Should fix this

[kyurkchyan]

@posva this only happens with the apollo project sample. I am not sure how else I can reproduce the issue

[octoper]

I have been able to reproduce it outside of Apollo project with the following

export const useWithNullObjectStore = defineStore('with-null-object', () => {
  return {
    text: ref(Object.create(null)),
  }
})

[posva]

Yes, and my goal is to understand why such an object in included in pinia state by Apollo.

[octoper]

I've investigated a bit and seems that's caused by how Apollo stores data in StoreWriter (ref) used in InMemoryCache, not sure exactly how everything works but it always produces a result that contains null objects.

[octoper]

Also found this issue in the apollo-client repo apollographql/apollo-client#12199

[chok]

A PR was merged : apollographql/apollo-client#12402

[foodticket-developer]

having the same issue on my end, also using "@pinia/nuxt": "0.9.0" and "pinia": "2.3.0" + "@nuxtjs/apollo": "5.0.0-alpha.14

this was not the case with "@pinia/nuxt": "0.5.5" and "pinia": "2.2.5"

[grelle]

I'm also experiencing this obj.hasOwnProperty error with Nuxt 3.15 and @pinia/nuxt 0.9.0 together with NuxtJS/Apollo. It gives me 500 error.

I have tried some approaches from other threads here like npm i pinia --force or installing with pnpm but nothing seems to work. Is there any tips to get this working ?

[agracia-foticos]

Same issue when i upgrade my project from
"@pinia/nuxt": "0.5.5",

to "@pinia/nuxt": "0.9.0",

With "pinia": "^2.3.1",
"pinia-plugin-persistedstate": "^4.2.0",
"pinia-shared-state": "^0.5.1",

[agracia-foticos]

adding vite : {
optimizeDeps: {
include: [ 'pinia'],
}, and

alias: {
pinia: path.resolve(rootDir, 'node_modules/pinia/dist/pinia.mjs')
}

works compiling in dev mode, but not in production compiling mode

[agracia-foticos]

If i open chrome in anonymous mode, fails, but we reload the window and works... fails in first load page

[agracia-foticos]

Same issue with pinia 3 and nuxt pinia 0.10.0

`[nuxt] [request error] [unhandled] [500] obj.hasOwnProperty is not a function

info: SERVER : Page loaded /
error {
url: '/',
statusCode: 500,
statusMessage: '',
message: 'internal server error',
stack: '

'
}`

[wangziling]

I had met the issue as well.

I'm using the @pinia/nuxt@0.10.1, pinia@3.0.1 and nuxt@3.15.4.

I found the error is throwed from the function named shouldHydrate of the pinia package.

I had wrapped it with the try...catch.

When I debug it, it shows that the obj is an object without the __proto__.
So I recognize that this obj is made by me in purpose:

Fake code.

I need to make the state obj be without the __proto__, 'cause nuxt and pinia told me that the XXXStoreImpl.prototype cannot be stringified when doing SSR.

Maybe we should make the shouldHydrate functionality considers that the obj is without the __proto__, or just change the .hasOwnProperty to be Object.prototype.hasOwnProperty.call(..).

I will use Object.setPrototype(result, Object.prototype); to bypass this error.

[wangziling]

Oh here do exists a PR: https://github.com/vuejs/pinia/pull/2867/files#diff-876717fc274c459d30bad5321e39cbae98dc83590660dbbedbd0cc45ef6beb4d

[Rokasbarasa1]

Had the same issue as well and rolling back "@pinia/nuxt": "0.5.5", fixed my problem for now.

[develth]

same here.. are we stick to 0.5.5 forever?

[chok]

From my investigations, the final problem now come from the way of apollo client to create objects.

A PR was merged "recently" : apollographql/apollo-client#12402

[hmingv]

I have the same problem, and the version has been reverted to 0.5.5 to restore to normal

"nuxt": "^3.16.2",
"@pinia/nuxt": "0.5.5",
"pinia": "^3.0.1"

[agracia-foticos]

i must do the same action

[develth]

I currently also get it in a project without apollo.

[offbit-it]

@kyurkchyan I can confirm the same behavior with @nuxt/pinia. I can also confirm that version 0.5.5 solved the problem. When can we expect the fix? This is stale topic. Thanks!

[sgc-fireball]

A solution is to use Object.hasOwn vs obj.hasOwnProperty.

function shouldHydrate(obj) {
    return !isPlainObject(obj) || !Object.hasOwn(obj, skipHydrateSymbol);
}

[CDTdenisP]

Hello, same problem here in a project that doesn't use apollo.

"dependencies": {
		"@egjs/vue3-flicking": "^4.12.0",
		"@nuxtjs/device": "^3.2.4",
		"@nuxtjs/google-fonts": "^3.2.0",
		"@pinia/nuxt": "^0.10.1",
		"@tailwindcss/vite": "^4.0.9",
		"@vueform/nuxt": "^1.11.0",
		"@vueuse/integrations": "^12.5.0",
		"@vueuse/nuxt": "^12.5.0",
		"date-fns": "^4.1.0",
		"nuxt": "^3.15.3",
		"nuxt-viewport": "^2.2.0",
		"swiper": "^11.2.5",
		"v-calendar": "^3.1.2",
		"vue": "^3.5.13",
		"vue-final-modal": "^4.5.5",
		"vue-router": "^4.5.0",
		"vue-select": "^4.0.0-beta.6"
	},
	"devDependencies": {
		"@commitlint/cli": "^19.6.1",
		"@commitlint/config-conventional": "^19.6.0",
		"@types/vue-select": "^3.16.8",
		"@typescript-eslint/eslint-plugin": "^8.22.0",
		"@typescript-eslint/parser": "^8.22.0",
		"commitizen": "^4.3.1",
		"cz-conventional-changelog": "^3.3.0",
		"eslint": "^9.19.0",
		"eslint-plugin-vue": "^9.32.0",
		"husky": "^9.1.7",
		"prettier-plugin-tailwindcss": "^0.6.11",
		"sass-embedded": "^1.83.4",
		"standard-version": "^9.5.0",
		"tsx": "^4.19.2",
		"typescript": "5.7.3",
		"vue-tsc": "2.2.0"
	},

[posva]

FYI this was fixed in fd6d969

[Tarabass]

Thx, error did go away after update :)

[MCharron93]

I too, am still experiencing this issue. I can roll back to 0.5.5, but noted that this happened with a project running on the following:
"dependencies": {
"@nuxt/kit": "^3.14.1592",
"@nuxtjs/google-fonts": "^3.2.0",
"@nuxtjs/tailwindcss": "^6.12.2",
"@pinia/nuxt": "^0.9.0",
"@primevue/core": "^4.3.4",
"@primevue/forms": "^4.3.4",
"@primevue/nuxt-module": "^4.3.4",
"@vee-validate/i18n": "^4.15.1",
"@vee-validate/nuxt": "^4.15.0",
"@vee-validate/rules": "^4.15.1",
"@vee-validate/yup": "^4.15.0",
"moment": "^2.30.1",
"pinia": "^2.3.0",
"primeicons": "^7.0.0",
"primevue": "^4.3.4",
"vee-validate": "^4.15.1"
},

[amery]

I too, am still experiencing this issue. I can roll back to 0.5.5, but noted that this happened with a project running on the following: "dependencies": { "@nuxt/kit": "^3.14.1592", "@nuxtjs/google-fonts": "^3.2.0", "@nuxtjs/tailwindcss": "^6.12.2", "@pinia/nuxt": "^0.9.0", "@primevue/core": "^4.3.4", "@primevue/forms": "^4.3.4", "@primevue/nuxt-module": "^4.3.4", "@vee-validate/i18n": "^4.15.1", "@vee-validate/nuxt": "^4.15.0", "@vee-validate/rules": "^4.15.1", "@vee-validate/yup": "^4.15.0", "moment": "^2.30.1", "pinia": "^2.3.0", "primeicons": "^7.0.0", "primevue": "^4.3.4", "vee-validate": "^4.15.1" },

Two options on the table: move to v3, or sponsor the backporting of the fix to v2.

[amery]

FYI this was fixed in fd6d969

could you backport the fix and make a v2.3 release please? @posva

[posva]

Of course! Note that I only do paid consultancy for Vue 2 support, you can book it here

[amery]

Of course! Note that I only do paid consultancy for Vue 2 support, you can book it here

I meant pinia 2.3.1 😅

[posva]

If you are on Vue 3, you can and should upgrade to v3

[amery]

If you are on Vue 3, you can and should upgrade to v3

I depend on a nuxt auth library that doesn't work on v3... but you are right

[amav96]

was solved with

"@pinia/nuxt": "^0.11.0",
"vue": "latest",

[danekslama]

I had a similar issue with:

"nuxt": "^3.17.4",
"@pinia/nuxt": "0.10.1"

No apollo used. After upgrade to "@pinia/nuxt": "^0.11.1", it started working.

[amery]

I had a similar issue with:

"nuxt": "^3.17.4",
"@pinia/nuxt": "0.10.1"

No apollo used. After upgrade to "@pinia/nuxt": "^0.11.1", it started working.

What matters is the pinia version, you have to migrate to v3

[hungify]

I had the same problem with "pinia": "^2.3.1".

[jwoertink]

I'm running 0.11.1 and still getting this but only in production. No apollo.

"@pinia/nuxt": "^0.11.1",
"nuxt": "^3.17.6",

web[537244]: TypeError: obj.hasOwnProperty is not a function
web[537244]:    at shouldHydrate (/var/app/current/.output/server/node_modules/pinia/dist/pinia.prod.cjs:231:40)
web[537244]:    ... 8 lines matching cause stack trace ...
web[537244]:    at async Object.<anonymous> (file:///var/app/current/.output/server/chunks/nitro/nitro.mjs:1896:19) {
web[537244]:  cause: TypeError: obj.hasOwnProperty is not a function
web[537244]:      at shouldHydrate (/var/app/current/.output/server/node_modules/pinia/dist/pinia.prod.cjs:231:40)
web[537244]:      at file:///var/app/current/.output/server/chunks/build/server.mjs:533:16

Looks like Pinia 3.0.3 is being used, so I'm not sure what else is missing here 🤔

edit: nevermind... apparently on production v2.3.0 was being pulled in somehow 🤷‍♂️ ... once I actually got 3.0.3 on production, that error went away 🙃

[amery]

Always make your dependencies explicit ;-)

[hungify]

Please update to the latest version of Pinia to fix this issue. Run: npx nuxi@latest module add pinia