Nuxt•2y ago

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

So, I tried to add

Pinia

Pinia

to my Nuxt 3 app, by doing:
* installing Pinia, using:

npm install pinia @pinia/nuxt

npm install pinia @pinia/nuxt

* adding it to the nuxt config
* creating the

stores

stores

directory in the root of the projects and placing the

user.ts

user.ts

file in it

Code in

user.ts

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

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

Nuxt•2y ago

Kepmon

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

So, I tried to add

Pinia

Pinia

to my Nuxt 3 app, by doing:
* installing Pinia, using:

npm install pinia @pinia/nuxt

npm install pinia @pinia/nuxt

* adding it to the nuxt config
* creating the

stores

stores

directory in the root of the projects and placing the

user.ts

user.ts

file in it

Code in

user.ts

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

console.log

// 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

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

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

Similar Threads

Similar Threads

Similar Threads