Using Nuxt2 and Pinia, I get errors when deploying.

[Yuisei-Maruyama]

Steps to reproduce the bug

Background

In my project, the application was built with NuxtJS v2 and Vuex as a method of state management.
I would like to implement Pinia in that application and replace Vuex with Pinia for state management.
So I decided to partially implement Pinia in our current application and gradually replace Vuex with Pinia.

Problems

In the operating environment described below, I am able to access the Pinia store and read out state management data in the local environment.

However, in the deployed environment, the error described in "Actual behavior" occurs.

Application Environment

In my project environment are described below.

Directory Structure

.
├── src
│  ├── components
│  │   ├── xxx.vue
│  ├── pages
  ・・・
│  ├── pinia // ← Pinia Store
│  │   └── xxx.ts
│  ├── plugins
│  │   ├── pinia.ts
│  ├── store // ← Vuex Store
│  │   ├── index.ts
├── nuxt.config.js
├── package.json
├── tsconfig.json

Packages & Versions

(package.json)

"dependencies": {
  "nuxt": "^2.15.3",
  "nuxt-typed-vuex": "^0.1.22",
  "@pinia/nuxt": "0.2.1",
  "nuxt": "^2.15.3",
  "pinia": "^2.0.34",
}

Related Files

(src/components/xxx.vue)

<template>
  <div></div>
</template>

<script lang="ts">
import Vue from 'vue'
import { useXxxStore } from '~/src/pinia/xxx'

export default Vue.extend({
  computed: {
    xxxStore() {
      return useXxxStore()
    },
  },
  mounted() {
    this.fetchItems()
  },
  methods: {
    async fetchItems() {
      await this.xxxStore.fetchItems()
    },
  },
})

(src/pinia/xxx.ts)

import { defineStore } from 'pinia'

interface XxxState {
 items: Record<string, unknown>[]
}

export const useXxxStore = defineStore('xxx', {
  state: (): XxxState => ({
   items: [],
  }),
  actions: {
    async fetchItems() {
      try {
        this.items= await this.$nuxt.$api.get('/items')
      } catch (e) {
        console.log(e)
      }
    },
  },
})

(src/plugins/pinia.ts)

import Vue from 'vue'
import { createPinia, PiniaVuePlugin } from 'pinia'

export default () => {
  Vue.use(PiniaVuePlugin)
  return createPinia()
}

(src/store/index.ts)

import { getAccessorType } from 'typed-vuex'
・・・

export const state = () => ({})
export const getters = {}
export const mutations = {}
export const actions = {}

export const storeObj = {
  state,
  getters,
  mutations,
  actions,
  modules: {
  ・・・
  },
}

export const accessorType = getAccessorType(storeObj)

(nuxt.config.json)

import colors from 'vuetify/es5/util/colors'
import { TsconfigPathsPlugin } from 'tsconfig-paths-webpack-plugin'

export default {
  srcDir: 'src/',
  ssr: false,

  target: 'static',
  ・・・
  plugins: [
    ・・・
    { src: '~/plugins/pinia.ts' }, // added
  ],

  components: true,

  buildModules: [
    '@nuxt/typescript-build',
    '@nuxtjs/vuetify',
    'nuxt-typed-vuex',
    ['@pinia/nuxt', { disableVuex: false }], // added (To use both Pinia and vuex together.)

  modules: [
    '@nuxtjs/axios',
    'nuxt-svg-loader',
    '@pinia/nuxt', // added
  ],

  axios: {},

  pinia: { // added
    autoImports: [
      'defineStore', // import { defineStore } from 'pinia'
      ['defineStore', 'definePiniaStore'], // import { defineStore as definePiniaStore } from 'pinia'
    ],
  },

  vuetify: {
    ・・・
  },

  build: {
    transpile: [/typed-vuex/, 'pinia'], // added
    extend(config, { isDev, isClient }) {
      config.resolve.plugins.push(new TsconfigPathsPlugin({}))
      if (isClient) {
        config.module.rules.push({
          test: /\.m?js$/,
          include: /node_modules\/htmlparser2/,
          use: {
            loader: 'babel-loader',
            options: {
              presets: [['@babel/preset-env', { targets: 'defaults' }]],
            },
          },
        })
      }
      if (!isDev) {
        config.optimization.splitChunks.maxSize = 200000
      }
    },
    babel: {
      presets({ isServer }) {
        return [
          [
            '@nuxt/babel-preset-app',
            {
              modules: isServer ? 'commonjs' : 'auto',
              corejs: { version: 3 },
            },
          ],
        ]
      },
    },
  },
}

(tsconfig.json)

{
  "compilerOptions": {
    "target": "ES2018",
    "module": "ESNext",
    "moduleResolution": "Node",
    "resolveJsonModule": true,
    "lib": ["ESNext", "ESNext.AsyncIterable", "DOM"],
    "esModuleInterop": true,
    "allowJs": true,
    "sourceMap": true,
    "strict": true,
    "noEmit": true,
    "experimentalDecorators": true,
    "baseUrl": ".",
    "paths": {
      "~/*": ["./*"],
      "@/*": ["./*"]
    },
    "types": [
      "@nuxt/types",
      "@nuxtjs/axios",
      "@types/node",
      "@types/jest",
      "@nuxtjs/firebase",
      "@pinia/nuxt" // added
    ]
  },
  "exclude": ["node_modules", ".nuxt", "dist"]
}

Expected behavior

The deployed environment should be able to access the Pinia store in the same way as the local environment.

Actual behavior

The following error occurs in the deployed environment and screen rendering fails.
In Nuxt2 (Vue2), the Pinia store does not seem to load properly in the deployment environment.

(Error Description)

typeError: Cannot read properties of undefined (reading 'use')
    at ge (93382aa.js:2:495094)
    at 93382aa.js:2:501817
    at y (963380a.js:2:89004)
    at Generator.<anonymous> (963380a.js:2:90341)
    at Generator.next (963380a.js:2:89433)
    at r (963380a.js:2:80305)
    at l (963380a.js:2:80508)

(93382aa.js:2:495094)

・・・
he.isVue2 && (Object(he.install)(),
    ("default"in he.Vue2 ? he.Vue2.default : he.Vue2).use(fe.a));
    var ge = function(t, e) {
        var n = Object(fe.b)();
        he.isVue2 ? t.app.pinia = n : t.vueApp.use(n), // An error occurs here!!
        he.isVue2 ? e("pinia", n) : t.provide("pinia", n),
        t.pinia = n,
        Object(fe.d)(n),
        n._p.push((function(e) {
            var n = e.store;
            Object.defineProperty(n, "$nuxt", {
                value: t
            })
        }
        )),
        t.nuxtState && t.nuxtState.pinia && (n.state.value = t.nuxtState.pinia)
    };

Additional information

No response

[buglavecz]

Hi.
Similar bug come on stackblitz... piniajs/example-nuxt-2#42

I am interested in this topic because we also want to use Pinia in this form, but if it doesn't work in a production environment, it's not very good news.