Nuxt3 和 Pinia - 找不到模块 '\.output\server\node_modules\pinia\dist\pinia'

Question

我刚刚在我的 Nuxt3 项目中安装了 Pinia，在开发模式下一切正常，当我尝试在生产模式下访问我的应用程序时，出现此错误并且网站冻结。

[h3] [unhandled] H3Error: Cannot find module 'C:\Users\pavel\Documents\GitHub\eway\website\.output\server\node_modules\pinia\dist\pinia' imported from C:\Users\pavel\Documents\GitHub\eway\website\.output\server\chunks\server.mjs
    at createError (file:///C:/Users/pavel/Documents/GitHub/eway/website/.output/server/node_modules/h3/dist/index.mjs:196:15)
    at nodeHandler (file:///C:/Users/pavel/Documents/GitHub/eway/website/.output/server/node_modules/h3/dist/index.mjs:386:21)
    at async ufetch (file:///C:/Users/pavel/Documents/GitHub/eway/website/.output/server/node_modules/unenv/runtime/fetch/index.mjs:9:17)
    at async $fetchRaw2 (file:///C:/Users/pavel/Documents/GitHub/eway/website/.output/server/node_modules/ohmyfetch/dist/chunks/fetch.mjs:131:20)
    at async Object.errorhandler [as onError] (file:///C:/Users/pavel/Documents/GitHub/eway/website/.output/server/chunks/node-server.mjs:321:16)
    at async nodeHandler (file:///C:/Users/pavel/Documents/GitHub/eway/website/.output/server/node_modules/h3/dist/index.mjs:394:9)
    at async ufetch (file:///C:/Users/pavel/Documents/GitHub/eway/website/.output/server/node_modules/unenv/runtime/fetch/index.mjs:9:17)
    at async $fetchRaw2 (file:///C:/Users/pavel/Documents/GitHub/eway/website/.output/server/node_modules/ohmyfetch/dist/chunks/fetch.mjs:131:20)
    at async Object.errorhandler [as onError] (file:///C:/Users/pavel/Documents/GitHub/eway/website/.output/server/chunks/node-server.mjs:321:16)
    at async nodeHandler (file:///C:/Users/pavel/Documents/GitHub/eway/website/.output/server/node_modules/h3/dist/index.mjs:394:9) {
  statusCode: 500,
  fatal: false,
  unhandled: true,
  statusMessage: 'Internal Server Error'
}

这是我的商店：

import { defineStore } from 'pinia';

export const useNavbarStore = defineStore({
    id: 'navbarStore',
    state: () => {
        return {
            menu: false
        }
    },
    actions: {
        toggleMenu() {
            this.menu = !this.menu
        }
    }
})

这是我在组件中使用它的方式：

<script>
import { useNavbarStore } from '~/store/navbar'

export default {
    data() {
        return {
            store: useNavbarStore()
        };
    },
    methods: {
        getLink(to) {
            let baseLink = '/';
            return baseLink + to
        }
    }
}

</script>

Answer 1

似乎有一个相关的 GitHub 问题： https://github.com/piniajs/example-nuxt-3/issues/50