vuejs / vuejs/devtools

Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'forEach') caused by mixing of dev and prod code pinia

Open
#845 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
TypeScript
Stars
2.9k
Forks
279
PR merge metrics
No merged PRs in 30d

Description

Hi,

I'm using a microfrontend architecture, where each MF has its own pinia. Pinia is created and destroyed properly per each application.

Mostly, the code for the stores is completely unrelated.
However, there are few cases where we are sharing specific store code (such as "notification store", which is same for all apps).
The shared store code is used via a library, that has its own versioning, is installed via yarn, and is production build.
When running the application in dev mode (using webpack and webpack dev server) when dev tools is disabled, all is good.
When enabling devtools, suddenly errors appear, a common one being:

pinia.mjs:803 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'forEach')
at pinia.mjs:803:1
at bt (prepare.js:1:63085)
at prepare.js:1:68771
at prepare.js:1:33623
at prepare.js:1:33615

After a while, trying to figure out what causes this issue, I noticed that when I install the shared code package in development build, these errors are gone, which led me to the conclusion that mixed production-dev builds of store code are causing issues in dev tools.
I understand that development build is needed in order to explore the pinia stores on devtools, but I think in such a case, the "production" stores should just not be visible for exploration in the devtools, instead of causing exceptions.

Thanks

Contributor guide

No contributing guide indexed for this repository

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start by reproducing the error with webpack dev server, devtools enabled, and the shared production-built store package. Inspect the stack locations in pinia.mjs:803 and prepare.js; done means mixed development and production store code no longer causes the reported exception and production stores are handled as described.

Written by the indexing model from the issue text.

Assessment

Tech stack
webpack
Domain
developer-experience
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.