Upgrade react-dnd to v16 and react-dnd-html5-backend to v9

modules/react-arborist/jest.config.js

@@ -102,6 +102,29 @@ const config = {
 
   // A preset that is used as a base for Jest's configuration
   preset: "ts-jest",
+
+  // Transform configuration for ts-jest and ESM modules
+  transform: {
+    "^.+\\.tsx?$": [
+      "ts-jest",
+      {
+        useESM: false,
+      },
+    ],
+    "^.+\\.(js|mjs)$": [
+      "babel-jest",
+      {
+        presets: [
+          [
+            "@babel/preset-env",
+            {
+              modules: "commonjs",
+            },
+          ],
+        ],
+      },
+    ],
+  },
 
   // Run tests from one or more projects
   // projects: undefined,
@@ -173,14 +196,10 @@ const config = {
   // This option allows use of a custom test runner
   // testRunner: "jest-circus/runner",
 
-  // A map from regular expressions to paths to transformers
-  // transform: undefined,
-
   // An array of regexp pattern strings that are matched against all source file paths, matched files will skip transformation
-  // transformIgnorePatterns: [
-  //   "/node_modules/",
-  //   "\\.pnp\\.[^\\/]+$"
-  // ],
+  transformIgnorePatterns: [
+    "node_modules/(?!(react-dnd|react-dnd-html5-backend|@react-dnd|dnd-core)/)",
+  ],
 
   // An array of regexp pattern strings that are matched against all modules before the module loader will automatically return a mock for them
   // unmockedModulePathPatterns: undefined,

modules/react-arborist/package.json

@@ -6,6 +6,13 @@
   "main": "dist/main/index.js",
   "module": "dist/module/index.js",
   "types": "dist/module/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/module/index.js",
+      "require": "./dist/main/index.js",
+      "types": "./dist/module/index.d.ts"
+    }
+  },
   "sideEffects": false,
   "scripts": {
     "build:cjs": "tsc --outDir dist/main",
@@ -38,8 +45,8 @@
     "filterable"
   ],
   "dependencies": {
-    "react-dnd": "^14.0.3",
-    "react-dnd-html5-backend": "^14.0.3",
+    "react-dnd": "^16.0.0",
+    "react-dnd-html5-backend": "^9.0.0",
     "react-window": "^1.8.11",
     "redux": "^5.0.0",
     "use-sync-external-store": "^1.2.0"
@@ -49,10 +56,13 @@
     "react-dom": ">= 16.14"
   },
   "devDependencies": {
+    "@babel/core": "^7.23.0",
+    "@babel/preset-env": "^7.23.0",
     "@types/jest": "^29.5.11",
     "@types/react": "^18.2.43",
     "@types/react-window": "^1.8.8",
     "@types/use-sync-external-store": "^0.0.6",
+    "babel-jest": "^29.7.0",
     "jest": "^29.7.0",
     "npm-run-all": "^4.1.5",
     "rimraf": "^5.0.5",

modules/react-arborist/src/components/provider.tsx

@@ -16,7 +16,7 @@ import {
 import { TreeApi } from "../interfaces/tree-api";
 import { initialState } from "../state/initial";
 import { Actions, rootReducer, RootState } from "../state/root-reducer";
-import { HTML5Backend } from "react-dnd-html5-backend";
+import HTML5Backend from "react-dnd-html5-backend";
 import { DndProvider } from "react-dnd";
 import { TreeProps } from "../types/tree-props";
 import { createStore, Store } from "redux";
@@ -84,8 +84,12 @@ export function TreeProvider<T>({
         <NodesContext.Provider value={state.nodes}>
           <DndContext.Provider value={state.dnd}>
             <DndProvider
-              backend={HTML5Backend}
-              options={{ rootElement: api.props.dndRootElement || undefined }}
+              backend={HTML5Backend as any}
+              options={
+                treeProps.dndRootElement
+                  ? { rootElement: treeProps.dndRootElement }
+                  : undefined
+              }
               {...(treeProps.dndManager && { manager: treeProps.dndManager })}
             >
               {children}

modules/showcase/next.config.js

@@ -3,6 +3,21 @@ const nextConfig = {
   output: "export",
   reactStrictMode: true,
   swcMinify: true,
+  transpilePackages: ["react-arborist"],
+  webpack: (config, { isServer }) => {
+    // Prefer ESM build for react-arborist
+    config.resolve.mainFields = ["module", "main"];
+
+    // Handle ESM-only packages
+    if (!isServer) {
+      config.resolve.extensionAlias = {
+        ".js": [".js", ".ts", ".tsx"],
+        ".jsx": [".jsx", ".tsx"],
+      };
+    }
+
+    return config;
+  },
 };
 
 module.exports = nextConfig;

modules/showcase/pages/_document.tsx

@@ -8,7 +8,6 @@ export default function Document() {
           href="https://fonts.googleapis.com/css2?family=Roboto&display=optional"
           rel="stylesheet"
         />
-        <meta name="viewport" content="width=device-width, initial-scale=1" />
       </Head>
       <body>
         <Main />