Upgrade react-dnd to v16 and react-dnd-html5-backend to v9 #322
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
- Upgrade react-dnd from ^14.0.3 to ^16.0.0 - Upgrade react-dnd-html5-backend from ^14.0.3 to ^9.0.0 - Update HTML5Backend import to default export (v9 API change) - Update DndProvider usage for v16 API compatibility - Add Jest configuration for ESM module support (babel-jest) - Add exports field to package.json for proper ESM/CommonJS resolution - Update Next.js config to transpile react-arborist and prefer ESM build - Fix viewport meta tag warning in _document.tsx All tests pass and TypeScript compilation succeeds. Maintains full backwards compatibility.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Summary
This PR upgrades
react-arboristto be compatible withreact-dndv16 andreact-dnd-html5-backendv9, which are ESM-only packages.Changes
Dependencies
react-dndfrom^14.0.3to^16.0.0react-dnd-html5-backendfrom^14.0.3to^9.0.0Code Changes
src/components/provider.tsx: UpdatedHTML5Backendimport from named to default export (v9 API change)src/components/provider.tsx: UpdatedDndProviderusage to pass backend class directly with options (v16 API)Build Configuration
package.json: Addedexportsfield to help bundlers choose ESM vs CommonJS buildsjest.config.js: Addedbabel-jestand@babel/preset-envto transform ESM modules for Jest compatibilityjest.config.js: UpdatedtransformIgnorePatternsto include react-dnd packages and nested dependencies@babel/core,@babel/preset-env,babel-jestShowcase App Updates
next.config.js: AddedtranspilePackagesto transpile react-arborist from sourcenext.config.js: Configured webpack to prefer ESM build (modulefield)pages/_document.tsx: Removed viewport meta tag (moved to_app.tsxper Next.js best practices)Testing
✅ All tests pass (
yarn test)✅ TypeScript compilation succeeds (
yarn build)✅ No linting errors
✅ Showcase app runs successfully
✅ Backwards compatible - all existing APIs remain unchanged
Backwards Compatibility
This upgrade maintains full backwards compatibility:
TreeProps,TreeApi, hooks) remain unchangeddist/main) and ESM (dist/module) outputs as beforeNotes
exportsfield inpackage.jsonensures bundlers use the correct build format