Pinia state is undefined in action with production build

[annacollins85]

We are using Vue 3 version 3.0.7 with Pinia version 2.0.0-beta.2. It works fine when we run the app locally with vue-cli-service serve, but not when run in production mode with vue-cli-service build --mode production . We suspect it could have something to do with what bundler to use for Pinia in production, as we see some code in the library that relates to this

Our store (We are using a wrapper which we call with the required params and export from another file):

import { defineStore } from 'pinia'
import { Router } from 'vue-router'
import { AuthenticationModule } from '..'
import { authApiFactory, User, TokenInformationDTO } from '../api'
import { ApiState } from '../../common/store/api-state'
export const useAuthStoreFactory = (authApi: ReturnType<typeof authApiFactory>, router: Router) => {
  return defineStore({
    id: AuthenticationModule.name,
    state: () => ({
      tokenInformation: {} as TokenInformationDTO,
      authApiState: {} as ApiState
    }),
    actions: {
      async login(user: User) {
        const tokenInformation: TokenInformationDTO = await authApi.login(user)
        this.tokenInformation = tokenInformation
      },
      async checkSupervisorPassword(password: string) {
        await authApi.checkSupervisorPassword(password, this.tokenInformation.accessToken) // this.tokenInformation is null
        router.push('/')
      }
    }
  })
}

vue.config.js:

const path = require('path')
const config = require('./config')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const { DefinePlugin } = require('webpack')
const IS_PRODUCTION = process.env.VUE_APP_MODE === 'production'
module.exports = {
  publicPath: process.env.PUBLIC_PATH || '/',
  lintOnSave: true,
  devServer: {
    port: 3000
  },
  configureWebpack: {
    devtool: IS_PRODUCTION ? 'hidden-source-map' : 'source-map',
    resolve: {
      extensions: ['.js', '.vue', '.json', '.ts'],
      alias: {
        vue: "vue/dist/vue.esm-bundler.js"
      }
    },
    plugins: [
        // ...some HtmlWebpackPlugins,
        new DefinePlugin({
          "__VUE_OPTIONS_API__": false,
          "__VUE_PROD_DEVTOOLS__": false,
          "__INTLIFY_PROD_DEVTOOLS__": false
        })
    ]
  }
}

Steps to reproduce the behavior

When the login action is called, the correct tokenInformation is received and set in the state, but on checkSupervisorPassword, the state is undefined. The checkSupervisorPassword action is only ever called after the login action so the tokenInformation should be available.

[posva]

Please provide a boiled down reproduction with steps so I can check

[annacollins85]

Thanks so much for the quick response! Sorry, we can't share the project itself since it's closed source, we might be able to create a dummy project if that's the only way you feel it would be possible to solve the problem.

To give you some more insights which might help identify the problem, even when we console.log this.$state where we try to access this.tokenInformation, it's undefined, which is very strange. Again, this is different between development and production builds, the dev build has both tokenInformation and $state present when console logged. Is it possible to configure prod builds to use the same bundler as is used in dev mode? Could be be something related to that? It seems strange that the only difference in behaviour is when it's run in dev mode vs prod mode.

[posva]

I can't tell from the description but if you give it a try and create a boiled down reproduction (I wouldn't take a look at your whole project, that's too much 😄 ) with the vue cli starter. Maybe it's related to deactivating the OPTIONS_API?

[annacollins85]

It doesn't look like it's the OPTIONS_API since it doesn't work whether it's set to true or false. We will try and make a dummy repo to reproduce it. Thanks

[annacollins85]

@posva We have created a dummy repo to replicate the problem https://github.com/annacollins85/pinia-dummy-repo.
To reproduce:

• Build in prod: yarn build:prod
• Run http-server-spa ./dist (having installed http-server-spa globally)
• Press "Print Password" button and check console - the password is undefined (it should have default state value of "default")
• Press "Change Password" button, in the console, the password is logged as the new value, "changed"
• Press "Print Password" again, the new "changed" value is logged.
  the initial state cannot be read.

The initial state can be read as expected when running the app in dev mode (yarn serve)

[posva]

You cannot return the function directly because in JS, that will change this (the context), return the store directly and call the methods on it (e.g. store.printPassword()):

<template>
  <div class="hello">
    <button @click="store.printPassword">Print Password</button>
    <button @click="store.changePassword">Change Password</button>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import { useStoreFactory } from '../store'

export default defineComponent({
  name: 'HelloWorld',
  props: {
    msg: String
  },
  setup() {
    const store = useStoreFactory()
    return {
      store
    }
  }
})
</script>

BTW: you don't need the composition api because you are using Vue 3. Your store.ts should look like this:

import { defineStore } from 'pinia'

export const useStoreFactory = defineStore({
  id: 'store',
  state: () => ({
    password: 'default'
  }),
  actions: {
    async printPassword() {
      try {
        console.log('in login', this.password)
      } catch (err) {
        console.log(err)
      }
    },
    async changePassword() {
      try {
        this.password = 'changed'
        console.log('this.password in changePassword', this.password)
      } catch (err) {
        console.log(err)
      }
    }
  }
})

And you don't need a module.ts file.

---

Remember to use the forum or the Discord chat to ask questions!

[annacollins85]

@posva Thank you so much!