pinia 3.0.1,3.0.2,3.0.3 - devtoolsApi is not defined

Reproduction

https://jsfiddle.net/0sj7apb6/

Steps to reproduce the bug

Using the pinia.iife.js 3.0.1 now gives the error: "Uncaught ReferenceError: devtoolsApi is not defined" no error with 3.0.0, probably related to #2910 fix

Expected behavior

no error, and working devtools with the no prod version

Actual behavior

error using the iife.js, and no devtools using the iife.prod.js

Additional information

No response

Feb 15 '25 10:02 lianee

The devtools API has indeed been removed from the iifee given the considerable size increase. It has to be included manually. This should be added to docs (migration guide) and to the changelog.

Mar 03 '25 11:03 posva

I understand, but I haven't found how to include it manually in iife. I just see a cjs and a esm version in node_modules/@vue/devtools-api/lib/ Perhaps this lib should be included in the dev version (iife.js), and not in iife.prod.js, I suspect it was like that in 3.0.0, and I don't see a problem having a big dev file

Mar 03 '25 11:03 lianee

I'm having the similar issue, isn't it related? I'm migrating from 2.3.1 to 3.0.1. And I'm not using any devtools related APIs at all, also even disabled devtools in my browser to check with no success.

Uncaught TypeError: Cannot create proxy with a non-object as target or handler
    at node_modules/@vue/devtools-kit/dist/index.js (index_f240.0be6a908.js:2088:34)
    at ModuleSystem.require (07032025/:395:26)
    at node_modules/pinia/node_modules/@vue/devtools-api/dist/index.js (index_f290.b725f0c7.js:2054:27)
    at ModuleSystem.require (07032025/:395:26)
    at node_modules/pinia/dist/pinia.mjs (index_acf3.09fbed4d.js:927:27)
    at ModuleSystem.require (07032025/:395:26)
    at src/store.ts (router.tsx:26:1)
    at ModuleSystem.require (07032025/:395:26)
    at src/styles.ts (store.ts:21:1)
    at ModuleSystem.require (07032025/:395:26)

Mar 07 '25 13:03 houd1ni

Unfortunately, this problem persists with version 3.0.2, rendering the non-prod version unusable with iife build.

I'm afraid I wasn't clear enough: these versions of pinia are no longer usable in development if you integrate pinia directly into the browser (without a package manager)

Please include the development tools in the pinia.iife.js as it was in version 3.0.0, or provide clear instructions on how to include them manually directly in the browser.

Apr 12 '25 09:04 lianee

As shown by the pinia.iife.js file : var Pinia = (function (exports, vue, devtoolsApi), it needs vue and devtoolsApi.

vue can be imported with iife, but as devtoolsApi does not provide an iife file, the following can not working :

<html>
  <head>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.global.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/@vue/[email protected]/dist/index.iife.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/pinia.iife.js"></script>
  </head>
  <body>
    <div>Hello</div>
  </body>
</html>

Thus, I am wondering if it would be better to ask an improvement on the devtoolsApi repo side ?

Apr 17 '25 09:04 Naedri

Yeah, ideally the devtools should expose an iife version for this to work

Apr 17 '25 11:04 posva

Just ran in to this problem also 👎

Apr 23 '25 12:04 ersk

ideally it should load regardless of dev tools because default should be loading it into production. I defined globalThis.devtoolsApi = {} and this allowed it to load.

May 04 '25 17:05 disarticulate

ideally it should load regardless of dev tools because default should be loading it into production. I defined globalThis.devtoolsApi = {} and this allowed it to load.

This totally defeats the purpose of using a debug version. Just use the prod version, which is easier in your case.

May 04 '25 17:05 lianee