fix(js): dynamic import with import keyword does not work on ffx[60,68]

app/javascript/controllers/chartkick_controller.ts

@@ -1,11 +1,10 @@
 import { Controller } from '@hotwired/stimulus';
 import { toggle, delegate } from '@utils';
+import Chartkick from 'chartkick';
+import Highcharts from 'highcharts';
 
 export class ChartkickController extends Controller {
   async connect() {
-    const Highcharts = await import('highcharts');
-    const Chartkick = await import('chartkick');
-
     Chartkick.use(Highcharts);
     const reflow = (nextChartId?: string) =>
       nextChartId && Chartkick.charts[nextChartId]?.getChartObject()?.reflow();

app/javascript/controllers/react_controller.tsx

@@ -1,24 +1,38 @@
 import { Controller } from '@hotwired/stimulus';
-import React, { lazy, Suspense, FunctionComponent } from 'react';
+import React from 'react';
 import { render, unmountComponentAtNode } from 'react-dom';
 import invariant from 'tiny-invariant';
 
 type Props = Record<string, unknown>;
-type Loader = () => Promise<{ default: FunctionComponent<Props> }>;
-const componentsRegistry = new Map<string, FunctionComponent<Props>>();
-const components = import.meta.glob('../components/*.tsx');
 
-for (const [path, loader] of Object.entries(components)) {
-  const [filename] = path.split('/').reverse();
-  const componentClassName = filename.replace(/\.(ts|tsx)$/, '');
-  console.debug(
-    `Registered lazy default export for "${componentClassName}" component`
-  );
-  componentsRegistry.set(
-    componentClassName,
-    LoadableComponent(loader as Loader)
-  );
-}
+const componentsRegistry = new Map();
+
+import ComboAdresseSearch from '../components/ComboAdresseSearch';
+import ComboAnnuaireEducationSearch from '../components/ComboAnnuaireEducationSearch';
+import ComboCommunesSearch from '../components/ComboCommunesSearch';
+import ComboDepartementsSearch from '../components/ComboDepartementsSearch';
+import ComboMultiple from '../components/ComboMultiple';
+import ComboMultipleDropdownList from '../components/ComboMultipleDropdownList';
+import ComboPaysSearch from '../components/ComboPaysSearch';
+import ComboRegionsSearch from '../components/ComboRegionsSearch';
+import ComboSearch from '../components/ComboSearch';
+import MapEditor from '../components/MapEditor';
+import MapReader from '../components/MapReader';
+
+componentsRegistry.set('ComboAdresseSearch', ComboAdresseSearch);
+componentsRegistry.set(
+  'ComboAnnuaireEducationSearch',
+  ComboAnnuaireEducationSearch
+);
+componentsRegistry.set('ComboCommunesSearch', ComboCommunesSearch);
+componentsRegistry.set('ComboDepartementsSearch', ComboDepartementsSearch);
+componentsRegistry.set('ComboMultiple', ComboMultiple);
+componentsRegistry.set('ComboMultipleDropdownList', ComboMultipleDropdownList);
+componentsRegistry.set('ComboPaysSearch', ComboPaysSearch);
+componentsRegistry.set('ComboRegionsSearch', ComboRegionsSearch);
+componentsRegistry.set('ComboSearch', ComboSearch);
+componentsRegistry.set('MapEditor', MapEditor);
+componentsRegistry.set('MapReader', MapReader);
 
 // Initialize React components when their markup appears into the DOM.
 //
@@ -54,19 +68,7 @@ export class ReactController extends Controller {
     render(<Component {...props} />, node);
   }
 
-  private getComponent(componentName: string): FunctionComponent<Props> | null {
+  private getComponent(componentName: string) {
     return componentsRegistry.get(componentName) ?? null;
   }
 }
-
-const Spinner = () => <div className="spinner left" />;
-
-function LoadableComponent(loader: Loader): FunctionComponent<Props> {
-  const LazyComponent = lazy(loader);
-  const Component: FunctionComponent<Props> = (props: Props) => (
-    <Suspense fallback={<Spinner />}>
-      <LazyComponent {...props} />
-    </Suspense>
-  );
-  return Component;
-}

app/javascript/controllers/trix_controller.ts

@@ -1,8 +1,5 @@
 import { Controller } from '@hotwired/stimulus';
+import 'trix';
+import '@rails/actiontext';
 
-export class TrixController extends Controller {
-  connect() {
-    import('trix');
-    import('@rails/actiontext');
-  }
-}
+export class TrixController extends Controller {}

app/javascript/entrypoints/application.js

@@ -68,5 +68,5 @@ Turbo.session.drive = false;
 // Expose globals
 window.DS = window.DS || DS;
 
-import('../shared/track/matomo');
-import('../shared/track/sentry');
+import '../shared/track/matomo';
+import '../shared/track/sentry';

app/javascript/shared/polyfills.js

@@ -1,4 +1,15 @@
 import './polyfills/dataset';
+import 'core-js/stable';
+import 'regenerator-runtime/runtime';
+import 'dom4';
+import 'intersection-observer';
+import 'whatwg-fetch';
+import '@webcomponents/custom-elements';
+import '@webcomponents/template';
+import '@stimulus/polyfills';
+import 'formdata-polyfill';
+import 'event-target-polyfill';
+import 'yet-another-abortcontroller-polyfill';
 
 // IE 11 has no baseURI (required by turbo)
 if (document.baseURI == undefined) {

vite.config.ts

@@ -44,16 +44,7 @@ if (shouldBuildLegacy()) {
 export default defineConfig({
   resolve: { alias: { '@utils': '/shared/utils.ts' } },
   build: {
-    sourcemap: true,
-    rollupOptions: {
-      output: {
-        manualChunks(id) {
-          if (id.match('maplibre') || id.match('mapbox')) {
-            return 'maplibre';
-          }
-        }
-      }
-    }
+    sourcemap: true
   },
   plugins
 });