chore: adapt to turbopack dev mode

Author: aldbr

packages/diracx-web/next.config.js

@@ -5,15 +5,28 @@ import { PHASE_DEVELOPMENT_SERVER } from "next/constants.js";
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = path.dirname(__filename);
 
+const componentsSrc = path.resolve(__dirname, "../diracx-web-components/src");
+
 export default (phase) => {
   const isDev = phase === PHASE_DEVELOPMENT_SERVER;
 
   return {
     transpilePackages: ["@dirac-grid/diracx-web-components"],
     ...(isDev && {
       webpack: (config) => {
+        // In dev mode, resolve diracx-web-components imports to source
+        // files for HMR. Each subpath must be aliased explicitly because
+        // webpack 5 resolves package exports before resolve.alias.
+        config.resolve.alias["@dirac-grid/diracx-web-components/components"] =
+          path.join(componentsSrc, "components");
+        config.resolve.alias["@dirac-grid/diracx-web-components/contexts"] =
+          path.join(componentsSrc, "contexts");
+        config.resolve.alias["@dirac-grid/diracx-web-components/hooks"] =
+          path.join(componentsSrc, "hooks");
+        config.resolve.alias["@dirac-grid/diracx-web-components/types"] =
+          path.join(componentsSrc, "types");
         config.resolve.alias["@dirac-grid/diracx-web-components"] =
-          path.resolve(__dirname, "../diracx-web-components/src");
+          componentsSrc;
         return config;
       },
     }),

packages/diracx-web/package.json

@@ -4,7 +4,7 @@
   "private": true,
   "type": "module",
   "scripts": {
-    "dev": "export NEXT_PUBLIC_DIRACX_URL=$DIRACX_URL; next dev",
+    "dev": "export NEXT_PUBLIC_DIRACX_URL=$DIRACX_URL; next dev --webpack",
     "build": "next build",
     "test": "cypress open --config baseUrl=$DIRACX_URL",
     "start": "next start",

packages/extensions/next.config.js

@@ -5,15 +5,28 @@ import { PHASE_DEVELOPMENT_SERVER } from "next/constants.js";
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = path.dirname(__filename);
 
+const componentsSrc = path.resolve(__dirname, "../diracx-web-components/src");
+
 export default (phase) => {
   const isDev = phase === PHASE_DEVELOPMENT_SERVER;
 
   return {
     transpilePackages: ["@dirac-grid/diracx-web-components"],
     ...(isDev && {
       webpack: (config) => {
+        // In dev mode, resolve diracx-web-components imports to source
+        // files for HMR. Each subpath must be aliased explicitly because
+        // webpack 5 resolves package exports before resolve.alias.
+        config.resolve.alias["@dirac-grid/diracx-web-components/components"] =
+          path.join(componentsSrc, "components");
+        config.resolve.alias["@dirac-grid/diracx-web-components/contexts"] =
+          path.join(componentsSrc, "contexts");
+        config.resolve.alias["@dirac-grid/diracx-web-components/hooks"] =
+          path.join(componentsSrc, "hooks");
+        config.resolve.alias["@dirac-grid/diracx-web-components/types"] =
+          path.join(componentsSrc, "types");
         config.resolve.alias["@dirac-grid/diracx-web-components"] =
-          path.resolve(__dirname, "../diracx-web-components/src");
+          componentsSrc;
         return config;
       },
     }),

packages/extensions/package.json

@@ -5,7 +5,7 @@
   "type": "module",
   "license": "GPL-3.0-only",
   "scripts": {
-    "dev": "export NEXT_PUBLIC_DIRACX_URL=$DIRACX_URL; next dev",
+    "dev": "export NEXT_PUBLIC_DIRACX_URL=$DIRACX_URL; next dev --webpack",
     "build": "next build",
     "test": "cypress open --config baseUrl=$DIRACX_URL",
     "start": "next start",