chore: upgrade to next 14 (#1952)

Author: hshoff

package.json

@@ -122,8 +122,8 @@
   },
   "resolutions": {
     "handlebars": "4.5.3",
-    "react": "18.0.0",
-    "react-dom": "18.0.0",
+    "react": "18.3.1",
+    "react-dom": "18.3.1",
     "@types/react": "18.3.26",
     "@types/react-dom": "18.3.7",
     "wrap-ansi": "7.0.0",

packages/visx-demo/next-env.d.ts

@@ -2,4 +2,4 @@
 /// <reference types="next/image-types/global" />
 
 // NOTE: This file should not be edited
-// see https://nextjs.org/docs/basic-features/typescript for more information.
+// see https://nextjs.org/docs/pages/building-your-application/configuring/typescript for more information.

packages/visx-demo/next.config.js

@@ -1,6 +1,7 @@
 const isProd = process.env.NODE_ENV === 'production';
 
 const nextConfig = {
+  output: 'export',
   basePath: isProd ? '/visx' : '',
   ...(isProd && { assetPrefix: '/visx/' }),
   typescript: {
@@ -11,44 +12,52 @@ const nextConfig = {
     // Don't run ESLint during builds (it's run at the root level)
     ignoreDuringBuilds: true,
   },
+  // Handle ESM packages that are imported by visx
   experimental: {
-    // note: this can be removed in future next versions
     esmExternals: 'loose',
   },
-  webpack: (config) => {
-    // add visx-*/src/* to be parsed by babel
-    // Find all rules that handle JS/TS files and add visx source files to their include
-    config.module.rules.forEach((rule) => {
-      // Check if this rule handles .tsx/.ts files
-      if (rule.test && (rule.test.test?.('.tsx') || rule.test.test?.('.ts'))) {
-        // Expand include to also handle visx packages' src directories
-        if (Array.isArray(rule.include)) {
-          rule.include.push(/visx-.*\/src/);
-        } else if (rule.include) {
-          rule.include = [rule.include, /visx-.*\/src/];
-        } else {
-          rule.include = /visx-.*\/src/;
-        }
-      }
-
-      // Also check nested rules
-      if (rule.oneOf) {
-        rule.oneOf.forEach((oneOfRule) => {
-          if (oneOfRule.test && (oneOfRule.test.test?.('.tsx') || oneOfRule.test.test?.('.ts'))) {
-            if (Array.isArray(oneOfRule.include)) {
-              oneOfRule.include.push(/visx-.*\/src/);
-            } else if (oneOfRule.include) {
-              oneOfRule.include = [oneOfRule.include, /visx-.*\/src/];
-            } else {
-              oneOfRule.include = /visx-.*\/src/;
-            }
-          }
-        });
-      }
-    });
-
-    return config;
-  },
+  // In Next.js 13+, use transpilePackages to transpile visx source files
+  // This is simpler and more reliable than custom webpack config
+  transpilePackages: [
+    '@visx/annotation',
+    '@visx/axis',
+    '@visx/bounds',
+    '@visx/brush',
+    '@visx/chord',
+    '@visx/clip-path',
+    '@visx/curve',
+    '@visx/delaunay',
+    '@visx/drag',
+    '@visx/event',
+    '@visx/geo',
+    '@visx/glyph',
+    '@visx/gradient',
+    '@visx/grid',
+    '@visx/group',
+    '@visx/heatmap',
+    '@visx/hierarchy',
+    '@visx/legend',
+    '@visx/marker',
+    '@visx/mock-data',
+    '@visx/network',
+    '@visx/pattern',
+    '@visx/point',
+    '@visx/react-spring',
+    '@visx/responsive',
+    '@visx/sankey',
+    '@visx/scale',
+    '@visx/shape',
+    '@visx/stats',
+    '@visx/text',
+    '@visx/threshold',
+    '@visx/tooltip',
+    '@visx/vendor',
+    '@visx/visx',
+    '@visx/voronoi',
+    '@visx/wordcloud',
+    '@visx/xychart',
+    '@visx/zoom',
+  ],
 };
 
 // eslint-disable-next-line no-undef

packages/visx-demo/package.json

@@ -4,7 +4,7 @@
   "description": "visx demo",
   "repository": "https://github.com/airbnb/visx",
   "scripts": {
-    "build": "next build && next export",
+    "build": "next build",
     "deploy": "rm -rf out && yarn build && cd out && touch .nojekyll && git init && git add . && git commit -m \"Deploy commit\" && git remote add origin git@github.com:airbnb/visx.git && git push -f origin master:gh-pages",
     "dev": "next",
     "preview": "yarn build && cd ./out && npx serve",
@@ -69,7 +69,6 @@
     "@visx/wordcloud": "3.13.0-alpha.0",
     "@visx/xychart": "3.13.2-alpha.0",
     "@visx/zoom": "3.13.0-alpha.0",
-    "@zeit/next-css": "^1.0.1",
     "babel-loader": "^8.2.2",
     "classnames": "^2.3.1",
     "d3-collection": "^1.0.4",
@@ -78,12 +77,12 @@
     "d3-shape": "^1.0.6",
     "lodash": "^4.17.21",
     "markdown-loader": "^5.1.0",
-    "next": "^13.0.0",
+    "next": "^14.2.0",
     "nprogress": "^0.2.0",
     "prismjs": "^1.19.0",
     "raw-loader": "^4.0.0",
-    "react": "^18.0.0",
-    "react-dom": "^18.0.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "react-github-button": "^0.1.10",
     "react-markdown": "^4.3.1",
     "topojson-client": "^3.0.0"