StencilJS library uses lazy loading (bootstrapLazy) to dynamically import component chunks

Author: sanjeetkumaritoutlook-user

src/index.ts

@@ -4,7 +4,15 @@ export { Components, JSX } from './components';
 
 export const Router = createRouter();
 import { defineCustomElements } from 'stenciljs-components/loader';
-defineCustomElements(window);
+async function initializeStencilComponents() {
+  console.log('Initializing StencilJS components...');
+  await defineCustomElements(window, {
+    resourcesUrl: './build/', // Adjust based on your deployment structure
+  }); // Pass the global `window` object
+  console.log('StencilJS components initialized.');
+}
+initializeStencilComponents();
+
 import { fluidEnvironments } from '../fluid';
 const script = document.createElement('script');
 /**

stencil.config.ts

@@ -15,10 +15,12 @@ export const config: Config = {
     {
       type: 'www',  // Optional, for a local development server
       // comment the following line to disable service workers in production
-      serviceWorker: null,
+    //  baseUrl: '/',  //Adjust based on your hosting setup
+    // baseUrl: 'https://sanjeetkumaritoutlook.github.io/',
+      // baseUrl:'/build/',  //like in fluid it opens to localhost:3333/fluid/
    // baseUrl: 'https://myapp.local/',
-    // baseUrl:'/build/',  like in fluid it opens to localhost:3333/fluid/
-   // baseUrl: '/',  Adjust based on your hosting setup
+    // buildDir: 'build', // Ensure this matches the build folder
+      serviceWorker: null,
     },
 
   ],