Nuxt3 Store $patch returns error on production

lonagi commented 6 months ago

Reproduction

https://play.pinia.vuejs.org/#eNqNVMtu2zAQ/BVCKCAFiKkGaXMI7MBJkEN7aIvG6KXsQaZWNhOKJEjKcWDo37uiHpYdN6hOFHdmdzjk7i66NYZuKoiuo6njVhhPHPjKEJmp1YxF3rHohilRGm092ZHKwT1/KDMhH722QGpSWF2SmKZC5bCl3sVMMcW1cp5w3oJmx7TkrAEVleJeaEVM5da/MllBUgiQ+eLVwBnZMUXwEwXZ75LZjMScx0O0+boq9IPJPF8nifOZR/7sZgxqvhCgmZS0KZjEMaroY3W3rglTNVPTtDUDj44/HkojkYt/hEyXlfcoes6l4M9o0V59kIZ+3VqbvZLdrleGJet6mrZETDJNh4zRedR6OykzQ5+cVngTQTfrAngB1/1JsJhQImt2WJSGNQVXTpZWvziwyGfReQ+d47WmOWy81tJNMiNa2tp7467TlOcK8TlIsbFUgU+VKdM3nPkV/UwvUimWKRbqLvmgDDImOZT/k72Hzj/Si0/0KmTdXHZJyyZrkxTtr9EW7/ARFWJ1ZArXpRES7HfTPJ1Dc9Bn/fI17HlbwSCRr4E/n9h/cttW9Q8LaN8GRsfymV2Bb8MPj99gi+shWOq8koh+J/gTnJZVo7GF3VUqR9kjXFD7JdyxUKuFe9h6UK4/VCM0uBHwweb7d46+l3tJL0cu9l2JBg49nEMhFBz2b3hL2LoDyEIxBLF26OqhYbkFfLyjfhb50JIWx4dV4yIYPSfJcUe2IwJNwPGAxZLff8JQ6MNdml1A4GH6JsUlU7ANKtsUOFsWejSSZm/lxb4FuKblj8kH8+wUmbeAk+S7Lvhv9nJMZyqq/wKgRtMz

Steps to reproduce the bug

playground on reproduction doesn't matter, because it is dev mode.

I want change state in store (it is array, then I just push value) using $patch

toEmails.$patch((state) => {
            state.all.push('')
        })

Expected behavior

On dev it pushes value inside state

Actual behavior

On dev it is working very good, but on production doesn't. Returns error:

entry.42572841.js:1 TypeError: Cannot read properties of null (reading 'insertBefore')
    at insert (entry.42572841.js:1:68392)
    at g (entry.42572841.js:1:48800)
    at _ (entry.42572841.js:1:48407)
    at E (entry.42572841.js:1:55173)
    at ae (entry.42572841.js:1:53692)
    at ne (entry.42572841.js:1:50411)
    at O (entry.42572841.js:1:49129)
    at _ (entry.42572841.js:1:48511)
    at E (entry.42572841.js:1:54188)
    at ae (entry.42572841.js:1:53692)

Additional information

Store file

// /stores/emails.js
import { defineStore } from 'pinia'

export function createEmailStore(id) {
    return defineStore(id, () => {
        const all = ref([])

        return { all }
    })
}

// /stores/index.js
import { createEmailStore } from './emails'

export const useToEmailStore = createEmailStore('toEmails')
export const useCcEmailStore = createEmailStore('ccEmails')
export const useBccEmailStore = createEmailStore('bccEmails')

Packages.json

{
  "name": "nuxt-app",
  "private": true,
  "type": "module",
  "scripts": {
    "build": "nuxt build",
    "dev": "nuxt dev",
    "generate": "nuxt generate",
    "preview": "nuxt preview",
    "postinstall": "nuxt prepare"
  },
  "devDependencies": {
    "@iconify/json": "2.2.150",
    "@nuxt/devtools": "latest",
    "@nuxtjs/i18n": "^8.1.1",
    "@sidebase/nuxt-pdf": "0.1.2",
    "@unocss/eslint-config": "0.57.7",
    "@unocss/nuxt": "0.57.7",
    "@unocss/postcss": "0.57.7",
    "@unocss/preset-icons": "0.57.7",
    "@unocss/preset-rem-to-px": "0.58.3",
    "@vueuse/core": "^10.7.1",
    "@vueuse/nuxt": "^10.7.1",
    "nuxt": "3.8.2",
    "nuxt-gtag": "^1.1.2",
    "postcss": "8.4.31",
    "prettier": "3.1.1",
    "prettier-plugin-tailwindcss": "0.5.11",
    "vue": "3.3.8",
    "vue-router": "4.2.5"
  },
  "dependencies": {
    "@pinia/nuxt": "^0.5.1",
    "@unocss/reset": "0.57.7",
    "@vuelidate/core": "^2.0.3",
    "@vuelidate/validators": "^2.0.4",
    "@vuepic/vue-datepicker": "7.4.0",
    "@vueuse/components": "^10.7.1",
    "chart.js": "^4.4.1",
    "compressorjs": "^1.2.1",
    "jspdf": "2.5.1",
    "lodash": "^4.17.21",
    "mitt": "3.0.1",
    "pinia": "^2.1.7",
    "vue-chartjs": "^5.3.0",
    "vue-hotjar-next": "^2.0.1",
    "vue3-google-login": "2.0.25"
  }
}

lonagi commented 6 months ago

Upd: changed to this code:

// ccEmails.$patch((state) => {
        //     state.all.push('')
        // })
        ccEmails.all.push('')
        ccEmails.all = [...ccEmails.all]

but it still return error. It seems I cannot modify state at all????. I also did next:

 // Store file

...

return defineStore(id, () => {
        const all = ref(null)

        return { all }
    })
...

        ccEmails.all = [123]

doesn't work.

. Btw. If I call second time function to change state it returns "Cannot read properties of null (reading 'style')". (were insertBefore instead of style)

wtf?

I want notice that even on production of course it changes value of state if output it directly to {{ state }} in template, but doesn't change anything when I have div v-for which loops this state

lonagi commented 6 months ago

When I fully deleted $patch function from my component and also changed to this code:

// ccEmails.$patch((state) => {
//     state.all.push('')
// })
        ccEmails.all.push('')
        ccEmails.all = [...ccEmails.all]

I am getting another error:

5
entry.ecbe6a09.js:1 TypeError: Cannot read properties of null (reading 'push')
    at g (ModalEmailSend.c23444bd.js:1:2923)
    at l.length.o.onClick.e.<computed>.e.<computed> (ModalEmailSend.c23444bd.js:1:3797)
    at Mo (entry.ecbe6a09.js:1:13641)
    at wa (entry.ecbe6a09.js:1:13720)
    at HTMLButtonElement.n (entry.ecbe6a09.js:1:75130)
l4  @  entry.ecbe6a09.js:1

// (ModalEmailSend.c23444bd.js:1:2923)
/// ...
function O(c) {
            b.attachFiles.splice(c, 1)
        }
        const _ = Q()
          , i = X()
          , p = Y();
        function g(c) {
            c == "cc" && i.all.push("") // <------
        }
 // ....

so i cannot work with arrays.?

vuejs / pinia