CODEWITHSUNDEEP
nuxt.jsnuxt3.jspinia
LeKevoid
LeKevoid

Reputation: 456

Nuxt 3 + Pinia : [h3] [unhandled] H3Error: __vite_ssr_import_0__.defineStore is not a function

I'm trying to set up a pinia store on Nuxt 3 and it doesn't seem to be working.

This is my whole package.json :

{
    "private": true,
    "scripts": {
        "build": "nuxt build",
        "dev": "nuxt dev",
        "generate": "nuxt generate",
        "preview": "nuxt preview"
    },
    "devDependencies": {
        "@intlify/unplugin-vue-i18n": "^0.5.0",
        "@nuxtjs/supabase": "^0.1.19",
        "nuxt": "3.0.0-rc.6",
        "vue-i18n": "^9.2.2"
    },
    "dependencies": {
        "@pinia/nuxt": "^0.3.1",
        "sass": "^1.54.3",
        "vuetify": "^3.0.0-beta.6"
    }
}

In nuxt.config.ts :

export default defineNuxtConfig({
    target: "static",
    ...
    buildModules: [
        [
            "@pinia/nuxt",
            {
                autoImports: ["defineStore"],
            },
        ],
    ],
    ...
});

(In nuxt.config, I tried without the autoImports, and I also tried putting "@pinia/nuxt" in modules instead of buildModules. Neither changed anything.)

In ~/stores/common.js :

import { defineStore } from "pinia";

export const useStore = defineStore({
    if: "common",
    state: () => {
        return {
            locale: "en",
        };
    },
    getters: {},
    actions: {},
});

And finally in ~/components/LangSelector.vue, I have the minimal :

<template>
    <div class="LangSelector">
    </div>
</template>

<script setup>
import { useStore } from "@/stores/common";
</script>

Then when I run my dev server and loads the homepage, it doesn't load, and I get the console error :

√ Vite server built in 1165ms
[h3] [unhandled] H3Error: __vite_ssr_import_0__.defineStore is not a function
    at createError (file:///<path/to/my/project>/node_modules/h3/dist/index.mjs:196:15)
    at Server.nodeHandler (file:///<path/to/my/project>/node_modules/h3/dist/index.mjs:386:21) {
  statusCode: 500,
  fatal: false,
  unhandled: true,
  statusMessage: 'Internal Server Error'
}

And if I let it go, after 10 seconds or so I'll get the extra :

<--- Last few GCs --->

[6008:00000165E0D36930]   152820 ms: Mark-sweep (reduce) 4113.3 (4118.4) -> 4086.7 (4092.1) MB, 35.2 / 0.0 ms  (average mu = 0.851, current mu = 0.885) allocation failure scavenge might not succeed
[6008:00000165E0D36930]   152943 ms: Mark-sweep (reduce) 4113.5 (4118.9) -> 4113.5 (4118.6) MB, 48.3 / 0.0 ms  (average mu = 0.776, current mu = 0.608) allocation failure scavenge might not succeed


<--- JS stacktrace --->

FATAL ERROR: Reached heap limit Allocation failed - JavaScript heap out of memory
 1: 00007FF73B98FDCF v8::internal::CodeObjectRegistry::~CodeObjectRegistry+112495
 2: 00007FF73B91EF86 DSA_meth_get_flags+65526
 3: 00007FF73B91FE3D node::OnFatalError+301
 4: 00007FF73C25167E v8::Isolate::ReportExternalAllocationLimitReached+94
 5: 00007FF73C23BB5D v8::SharedArrayBuffer::Externalize+781
 6: 00007FF73C0DF2AC v8::internal::Heap::EphemeronKeyWriteBarrierFromCode+1468
 7: 00007FF73C0DC3E4 v8::internal::Heap::CollectGarbage+4244
 8: 00007FF73C0D9D60 v8::internal::Heap::AllocateExternalBackingStore+2000
 9: 00007FF73C0F79D0 v8::internal::FreeListManyCached::Reset+1408
10: 00007FF73C0F8085 v8::internal::Factory::AllocateRaw+37
11: 00007FF73C10D4CB v8::internal::FactoryBase<v8::internal::Factory>::NewRawOneByteString+75
12: 00007FF73BEF1C84 v8::internal::String::SlowFlatten+404
13: 00007FF73BC5C06B v8::internal::WasmTableObject::Fill+603
14: 00007FF73BE43D29 v8::internal::RegExp::ExperimentalOneshotExec+1161
15: 00007FF73BE437E7 v8::internal::RegExp::Exec+199
16: 00007FF73BE1F69C v8::internal::DeclarationScope::was_lazily_parsed+21452
17: 00007FF73C2DF071 v8::internal::SetupIsolateDelegate::SetupHeap+494417
18: 00007FF73C336463 v8::internal::SetupIsolateDelegate::SetupHeap+851779
19: 00007FF73C2D2BF4 v8::internal::SetupIsolateDelegate::SetupHeap+444116
20: 00000166E29E106C

Am I missing something ?

Thanks for your help !

Upvotes: 1

Views: 3974

Answers (1)

LeKevoid
LeKevoid

Reputation: 456

Solution :

  1. Use the pinia package as a normal dependency, and the @pinia/nuxt package as a dev dependency. I found the Pinia official doc was a bit vague on the subject, but that seems to be how it's supposed to be.

  2. When installing the pinia package via npm i pinia, I got a bunch of errors, similar to what's described here. This seems to be an issue with npm. Solution to that : install using yarn add -D pinia

Upvotes: 3

Related Questions