Nuxt•9mo ago

Error: The requested module '/_nuxt/stores/user.ts' does not provide an export named 'useUserStore'

So, I tried to add Pinia to my Nuxt 3 app, by doing: * installing Pinia, using: npm install pinia @pinia/nuxt * adding it to the nuxt config * creating the stores directory in the root of the projects and placing the user.ts file in it Code in user.ts:

import { defineStore } from 'pinia'

export const useUserStore = defineStore('user', () => {
  const userID = ref<null | string>(null)

  return {
    userID
  }
})

import { defineStore } from 'pinia'

export const useUserStore = defineStore('user', () => {
  const userID = ref<null | string>(null)

  return {
    userID
  }
})

Code in the component file:

<script setup lang="ts">
const userStore = useUserStore() // it's my understanding that I don't need to import the user store? I tried though, but it still wouldn't work.

console.log(userStore);

// ...
</script>

<script setup lang="ts">
const userStore = useUserStore() // it's my understanding that I don't need to import the user store? I tried though, but it still wouldn't work.

console.log(userStore);

// ...
</script>

And now, I get the error, as in the title. What's interesting, console.log seems to log the correct thing on a server and since this component is actually a page, it doesn't run on a client at all, when the page first loads. So, why I am getting this error? If it helps, this is my nuxt config:

// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  devtools: { enabled: true },
  modules: [
    '@nuxtjs/tailwindcss',
    '@vueuse/nuxt',
    '@pinia/nuxt',
    [
      '@vee-validate/nuxt',
      {
        autoImports: true
      }
    ]
  ],
  css: ['./assets/css/index.css'],
  pinia: {
    storesDirs: ['./stores/**'],
  },
})

// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  devtools: { enabled: true },
  modules: [
    '@nuxtjs/tailwindcss',
    '@vueuse/nuxt',
    '@pinia/nuxt',
    [
      '@vee-validate/nuxt',
      {
        autoImports: true
      }
    ]
  ],
  css: ['./assets/css/index.css'],
  pinia: {
    storesDirs: ['./stores/**'],
  },
})

I'm sorry if this is a stupid question but my experience with Nuxt is like 2 days long and I'm learning it by just doing stuff and seeing what happens 🙈 I obviously read the docs here: https://pinia.vuejs.org/ssr/nuxt.html but it doesn't seem to be very helpful for me.

Pinia 🍍

Intuitive, type safe, light and flexible Store for Vue

0 Replies

No replies yetBe the first to reply to this messageJoin

Gaming

Programming

Error: The requested module '/_nuxt/stores/user.ts' does not provide an export named 'useUserStore'