bug: jeep-sqlite broken by version 4.12.2 about stencil

[christian-bromann]

Thanks for raising the issue @joewoodhouse!

The issue here is that the custom component is registered before the main Stencil application got registered. The defineCustomElements returns a promise as it is implemented as follows:

const defineCustomElements = async (win, options) => {
  if (typeof window === 'undefined') return undefined;
  await globalScripts$1();
  return bootstrapLazy([["jeep-sqlite",[[...]], options);
};

With the patch introduced in 4.12.2 (8a129ce) we now ensure that bootstrapLazy for the custom component is loaded before the main application. You can work around this by doing this in your global script:

--- a/src/global/app.ts
+++ b/src/global/app.ts
@@ -1,11 +1,3 @@
 import 'jeep-sqlite';
 import { defineCustomElements } from 'jeep-sqlite/loader';
-
-export default async () => {
-  /**
-   * The code to be executed should be placed within a default function that is
-   * exported by the global script. Ensure all of the code in the global script
-   * is wrapped in the function() that is exported.
-   */
-  await defineCustomElements(window);
-};
+setTimeout(() => defineCustomElements(window))

I will ingest the issue into our backlog so we can address this.

[christian-bromann]

For verifying the fix, let's also run the repro case in #5526 which seems to have the same root cause.

[christian-bromann]

Let's also verify that the fix works in #5596

[christian-bromann]

Hey @joewoodhouse 👋 I took another look into your issue again after evaluating the referenced issues and it seems that using the loader import approach does not work in this use case. You can get the jeep-sqlite component working by just importing the package directly:

diff --git a/src/global/app.ts b/src/global/app.ts
index d8cd166..bfd3ef9 100644
--- a/src/global/app.ts
+++ b/src/global/app.ts
@@ -1,5 +1,4 @@
 import 'jeep-sqlite';
-import { defineCustomElements } from 'jeep-sqlite/loader';

 export default async () => {
   /**
@@ -7,5 +6,4 @@ export default async () => {
    * exported by the global script. Ensure all of the code in the global
script
    * is wrapped in the function() that is exported.
    */
-  await defineCustomElements(window);
 };

I will check in with the team to see how we can improve the loader documentation to provide more information on when to use it and when not.

[christian-bromann]

I will go ahead and close this. There is a broader underlying issue where Stencil may encounter issues if multiple runtimes are in play. We have created a ticket for this to address this in near future. This particular problem can be resolved with the instructions in my comment above.