fix: install devtools plugin only after app is created and installed (#1063)

packages/pinia/src/createPinia.ts

@@ -18,6 +18,8 @@ export function createPinia(): Pinia {
   let _p: Pinia['_p'] = []
   // plugins added before calling app.use(pinia)
   let toBeInstalled: PiniaPlugin[] = []
+  let onInstallCallbacks: ((app: App) => void)[] = []
+  let _a: App | null = null
 
   const pinia: Pinia = markRaw({
     install(app: App) {
@@ -47,9 +49,27 @@ export function createPinia(): Pinia {
     },
 
     _p,
-    // it's actually undefined here
-    // @ts-expect-error
-    _a: null,
+
+    get _a() {
+      return _a!
+    },
+    set _a(app) {
+      _a = app
+
+      if (app) {
+        onInstallCallbacks.forEach((cb) => cb(app))
+        onInstallCallbacks = []
+      }
+    },
+
+    onInstall(cb: (app: App) => void) {
+      if (_a) {
+        cb(_a)
+      } else {
+        onInstallCallbacks.push(cb)
+      }
+    },
+
     _e: scope,
     _s: new Map<string, StoreGeneric>(),
     state,

packages/pinia/src/devtools/plugin.ts

@@ -521,7 +521,7 @@ export function devtoolsPlugin<
   S extends StateTree = StateTree,
   G /* extends GettersTree<S> */ = _GettersTree<S>,
   A /* extends ActionsTree */ = _ActionsTree
->({ app, store, options }: PiniaPluginContext<Id, S, G, A>) {
+>({ store, options, pinia }: PiniaPluginContext<Id, S, G, A>) {
   // HMR module
   if (store.$id.startsWith('__hot:')) {
     return
@@ -553,9 +553,11 @@ export function devtoolsPlugin<
     }
   }
 
-  addStoreToDevtools(
-    app,
-    // FIXME: is there a way to allow the assignment from Store<Id, S, G, A> to StoreGeneric?
-    store as StoreGeneric
+  pinia.onInstall((app) =>
+    addStoreToDevtools(
+      app,
+      // FIXME: is there a way to allow the assignment from Store<Id, S, G, A> to StoreGeneric?
+      store as StoreGeneric
+    )
   )
 }

packages/pinia/src/rootStore.ts

@@ -57,6 +57,14 @@ export interface Pinia {
    */
   use(plugin: PiniaPlugin): Pinia
 
+  /**
+   * Executes callback after Pinia is installed into Vue app
+   *
+   * @internal
+   * @param cb - callback to execute
+   */
+  onInstall(cb: (app: App) => void): void
+
   /**
    * Installed store plugins
    *