Merge pull request #3293 from pyth-network/bduran/better-web-app-dx

feat: improved DX by making component library and react hooks uncompiled so no compilation step is required

Author: benduran

apps/api-reference/next.config.js

@@ -22,8 +22,13 @@ export default {
       use: ["@svgr/webpack"],
     });
 
+    // make Next.js aware of how to import uncompiled TypeScript files
+    // from our component-library and other shared packages
     config.resolve.extensionAlias = {
-      ".js": [".js", ".ts", ".tsx"],
+      ".js": [".ts", ".tsx", ".js", ".jsx"],
+      ".jsx": [".tsx", ".jsx"],
+      ".mjs": [".mts", ".mjs"],
+      ".cjs": [".cts", ".cjs"],
     };
 
     return config;

apps/developer-hub/next.config.js

@@ -16,6 +16,15 @@ const config = {
       use: ["@svgr/webpack"],
     });
 
+    // make Next.js aware of how to import uncompiled TypeScript files
+    // from our component-library and other shared packages
+    config.resolve.extensionAlias = {
+      ".js": [".ts", ".tsx", ".js", ".jsx"],
+      ".jsx": [".tsx", ".jsx"],
+      ".mjs": [".mts", ".mjs"],
+      ".cjs": [".cts", ".cjs"],
+    };
+
     return config;
   },
 

apps/entropy-explorer/next.config.js

@@ -34,6 +34,16 @@ const config = {
       test: /\.svg$/i,
       use: ["@svgr/webpack"],
     });
+
+    // make Next.js aware of how to import uncompiled TypeScript files
+    // from our component-library and other shared packages
+    config.resolve.extensionAlias = {
+      ".js": [".ts", ".tsx", ".js", ".jsx"],
+      ".jsx": [".tsx", ".jsx"],
+      ".mjs": [".mts", ".mjs"],
+      ".cjs": [".cts", ".cjs"],
+    };
+
     return config;
   },
 

apps/insights/next.config.js

@@ -1,3 +1,4 @@
+/** @type {import('next').NextConfig} */
 const config = {
   experimental: {
     useCache: true,
@@ -28,6 +29,15 @@ const config = {
       use: ["@svgr/webpack"],
     });
 
+    // make Next.js aware of how to import uncompiled TypeScript files
+    // from our component-library and other shared packages
+    config.resolve.extensionAlias = {
+      ".js": [".ts", ".tsx", ".js", ".jsx"],
+      ".jsx": [".tsx", ".jsx"],
+      ".mjs": [".mts", ".mjs"],
+      ".cjs": [".cts", ".cjs"],
+    };
+
     return config;
   },
 

apps/staking/next.config.js

@@ -15,8 +15,13 @@ export default {
       use: ["@svgr/webpack"],
     });
 
+    // make Next.js aware of how to import uncompiled TypeScript files
+    // from our component-library and other shared packages
     config.resolve.extensionAlias = {
-      ".js": [".js", ".ts", ".tsx"],
+      ".js": [".ts", ".tsx", ".js", ".jsx"],
+      ".jsx": [".tsx", ".jsx"],
+      ".mjs": [".mts", ".mjs"],
+      ".cjs": [".cts", ".cjs"],
     };
 
     return config;

governance/xc_admin/packages/xc_admin_frontend/next.config.js

@@ -1,4 +1,4 @@
-const path = require('path')
+const path = require('node:path')
 
 /** @type {import('next').NextConfig} */
 const nextConfig = {
@@ -21,6 +21,15 @@ const nextConfig = {
       '@images': path.resolve(__dirname, 'images/'),
     }
 
+    // make Next.js aware of how to import uncompiled TypeScript files
+    // from our component-library and other shared packages
+    config.resolve.extensionAlias = {
+      '.js': ['.ts', '.tsx', '.js', '.jsx'],
+      '.jsx': ['.tsx', '.jsx'],
+      '.mjs': ['.mts', '.mjs'],
+      '.cjs': ['.cts', '.cjs'],
+    }
+
     return config
   },
 }