diff --git a/.yarn/versions/0acc6e0a.yml b/.yarn/versions/0acc6e0a.yml
new file mode 100644
index 0000000000..650a36929d
--- /dev/null
+++ b/.yarn/versions/0acc6e0a.yml
@@ -0,0 +1,5 @@
+declined:
+ - react-dnd-examples
+ - "@react-dnd/asap"
+ - "@react-dnd/invariant"
+ - "@react-dnd/shallowequal"
diff --git a/module_test/api.json b/module_test/api.json
index 5fa3915275..130824da3b 100644
--- a/module_test/api.json
+++ b/module_test/api.json
@@ -38,8 +38,5 @@
"tick": true,
"wrapWithBackend": true,
"wrapWithTestBackend": true
- },
- "examples": {
- "componentIndex": true
}
}
diff --git a/module_test/cjs-imports.cjs b/module_test/cjs-imports.cjs
index cd10b4ec09..b43a1ee280 100644
--- a/module_test/cjs-imports.cjs
+++ b/module_test/cjs-imports.cjs
@@ -7,6 +7,5 @@ check(require('react-dnd-html5-backend'), 'htmlBackend')
check(require('react-dnd-touch-backend'), 'touchBackend')
check(require('react-dnd-test-backend'), 'testBackend')
check(require('react-dnd-test-utils'), 'testUtils')
-check(require('react-dnd-examples'), 'examples')
console.log('👍 CommonJS Modules OK')
diff --git a/module_test/mjs-imports.mjs b/module_test/mjs-imports.mjs
index c66a294929..8b0e573dab 100644
--- a/module_test/mjs-imports.mjs
+++ b/module_test/mjs-imports.mjs
@@ -5,7 +5,6 @@ import * as htmlBackend from 'react-dnd-html5-backend'
import * as touchBackend from 'react-dnd-touch-backend'
import * as testBackend from 'react-dnd-test-backend'
import * as testUtils from 'react-dnd-test-utils'
-import * as examples from 'react-dnd-examples'
import { check } from './common.js'
check(core, 'core')
@@ -14,6 +13,5 @@ check(htmlBackend, 'htmlBackend')
check(touchBackend, 'touchBackend')
check(testBackend, 'testBackend')
check(testUtils, 'testUtils')
-check(examples, 'examples')
console.log('👍 ESModules OK')
diff --git a/packages/examples/package.json b/packages/examples/package.json
index bba243c37b..b57e7a5b30 100644
--- a/packages/examples/package.json
+++ b/packages/examples/package.json
@@ -4,12 +4,8 @@
"private": true,
"description": "Drag and Drop for React",
"main": "dist/cjs/index.js",
+ "module": "dist/esm/index.js",
"types": "dist/types/index.d.ts",
- "exports": {
- "import": "./dist/esm/index.mjs",
- "require": "./dist/cjs/index.js",
- "types": "./dist/types/index.d.ts"
- },
"sideEffects": false,
"repository": {
"type": "git",
@@ -21,10 +17,8 @@
"build_types": "tsc -b .",
"build_esm": "swc -C module.type=es6 -d dist/esm src/",
"build_cjs": "swc -C module.type=commonjs -d dist/cjs src/",
- "esm_hack": "node ../../scripts/esmify.mjs",
- "jsx_hack": "node ../../scripts/unjsxify.mjs dist/docs",
"build_docs": "tsc -b tsconfig.docs.json",
- "build": "run-s build_types build_esm build_cjs build_docs esm_hack jsx_hack"
+ "build": "run-s build_types build_esm build_cjs build_docs"
},
"dependencies": {
"dnd-core": "workspace:packages/dnd-core",
diff --git a/packages/examples/src/00-chessboard/Board.tsx b/packages/examples/src/00-chessboard/Board.tsx
index 1aa0fb398a..b91771226c 100644
--- a/packages/examples/src/00-chessboard/Board.tsx
+++ b/packages/examples/src/00-chessboard/Board.tsx
@@ -1,7 +1,7 @@
import { CSSProperties, FC, useEffect, useState } from 'react'
-import { BoardSquare } from './BoardSquare.js'
-import type { Game, Position } from './Game.js'
-import { Piece } from './Piece.js'
+import { BoardSquare } from './BoardSquare'
+import type { Game, Position } from './Game'
+import { Piece } from './Piece'
export interface BoardProps {
game: Game
diff --git a/packages/examples/src/00-chessboard/BoardSquare.tsx b/packages/examples/src/00-chessboard/BoardSquare.tsx
index 63b4d79ad7..a7fefa6cd8 100644
--- a/packages/examples/src/00-chessboard/BoardSquare.tsx
+++ b/packages/examples/src/00-chessboard/BoardSquare.tsx
@@ -1,9 +1,9 @@
import type { FC, ReactNode } from 'react'
import { useDrop } from 'react-dnd'
-import { Square } from './Square.js'
-import { ItemTypes } from './ItemTypes.js'
-import { Overlay, OverlayType } from './Overlay.js'
-import type { Game } from './Game.js'
+import { Square } from './Square'
+import { ItemTypes } from './ItemTypes'
+import { Overlay, OverlayType } from './Overlay'
+import type { Game } from './Game'
export interface BoardSquareProps {
x: number
y: number
diff --git a/packages/examples/src/00-chessboard/Knight.tsx b/packages/examples/src/00-chessboard/Knight.tsx
index 95b2a2bd47..4a76632aea 100644
--- a/packages/examples/src/00-chessboard/Knight.tsx
+++ b/packages/examples/src/00-chessboard/Knight.tsx
@@ -1,7 +1,7 @@
import type { CSSProperties, FC } from 'react'
import { DragPreviewImage, useDrag } from 'react-dnd'
-import { ItemTypes } from './ItemTypes.js'
-import { knightImage } from './knightImage.js'
+import { ItemTypes } from './ItemTypes'
+import { knightImage } from './knightImage'
const knightStyle: CSSProperties = {
fontSize: 40,
diff --git a/packages/examples/src/00-chessboard/Piece.tsx b/packages/examples/src/00-chessboard/Piece.tsx
index db84916849..9fc187cc03 100644
--- a/packages/examples/src/00-chessboard/Piece.tsx
+++ b/packages/examples/src/00-chessboard/Piece.tsx
@@ -1,5 +1,5 @@
import type { FC } from 'react'
-import { Knight } from './Knight.js'
+import { Knight } from './Knight'
export interface PieceProps {
isKnight: boolean
diff --git a/packages/examples/src/00-chessboard/TutorialApp.tsx b/packages/examples/src/00-chessboard/TutorialApp.tsx
index e46385139f..86eb651dff 100644
--- a/packages/examples/src/00-chessboard/TutorialApp.tsx
+++ b/packages/examples/src/00-chessboard/TutorialApp.tsx
@@ -1,6 +1,6 @@
import { CSSProperties, FC, useMemo } from 'react'
-import { Board } from './Board.js'
-import { Game } from './Game.js'
+import { Board } from './Board'
+import { Game } from './Game'
export interface ChessboardTutorialAppState {
knightPosition: [number, number]
diff --git a/packages/examples/src/00-chessboard/index.ts b/packages/examples/src/00-chessboard/index.ts
index ab2f28bad3..039e96a395 100644
--- a/packages/examples/src/00-chessboard/index.ts
+++ b/packages/examples/src/00-chessboard/index.ts
@@ -1 +1 @@
-export { TutorialApp as default } from './TutorialApp.js'
+export { TutorialApp as default } from './TutorialApp'
diff --git a/packages/examples/src/01-dustbin/copy-or-move/Box.tsx b/packages/examples/src/01-dustbin/copy-or-move/Box.tsx
index 6f913295ff..2bfdc362d2 100644
--- a/packages/examples/src/01-dustbin/copy-or-move/Box.tsx
+++ b/packages/examples/src/01-dustbin/copy-or-move/Box.tsx
@@ -1,5 +1,5 @@
import type { CSSProperties, FC } from 'react'
-import { ItemTypes } from './ItemTypes.js'
+import { ItemTypes } from './ItemTypes'
import { useDrag, DragSourceMonitor } from 'react-dnd'
const style: CSSProperties = {
diff --git a/packages/examples/src/01-dustbin/copy-or-move/Container.tsx b/packages/examples/src/01-dustbin/copy-or-move/Container.tsx
index 3090b6bc56..853c568895 100644
--- a/packages/examples/src/01-dustbin/copy-or-move/Container.tsx
+++ b/packages/examples/src/01-dustbin/copy-or-move/Container.tsx
@@ -1,6 +1,6 @@
import type { FC } from 'react'
-import { Dustbin } from './Dustbin.js'
-import { Box } from './Box.js'
+import { Dustbin } from './Dustbin'
+import { Box } from './Box'
export const Container: FC = () => (
diff --git a/packages/examples/src/01-dustbin/copy-or-move/Dustbin.tsx b/packages/examples/src/01-dustbin/copy-or-move/Dustbin.tsx
index 2d6fb0148d..21d43d336f 100644
--- a/packages/examples/src/01-dustbin/copy-or-move/Dustbin.tsx
+++ b/packages/examples/src/01-dustbin/copy-or-move/Dustbin.tsx
@@ -1,6 +1,6 @@
import type { CSSProperties, FC } from 'react'
import { useDrop } from 'react-dnd'
-import { ItemTypes } from './ItemTypes.js'
+import { ItemTypes } from './ItemTypes'
const style: CSSProperties = {
height: '12rem',
diff --git a/packages/examples/src/01-dustbin/copy-or-move/index.ts b/packages/examples/src/01-dustbin/copy-or-move/index.ts
index a4b4a9b31b..3213c790c0 100644
--- a/packages/examples/src/01-dustbin/copy-or-move/index.ts
+++ b/packages/examples/src/01-dustbin/copy-or-move/index.ts
@@ -1 +1 @@
-export { Container as default } from './Container.js'
+export { Container as default } from './Container'
diff --git a/packages/examples/src/01-dustbin/multiple-targets/Container.tsx b/packages/examples/src/01-dustbin/multiple-targets/Container.tsx
index 9d87a12867..4c17bf65d2 100644
--- a/packages/examples/src/01-dustbin/multiple-targets/Container.tsx
+++ b/packages/examples/src/01-dustbin/multiple-targets/Container.tsx
@@ -1,8 +1,8 @@
import { FC, useState, useCallback, memo } from 'react'
import { NativeTypes } from 'react-dnd-html5-backend'
-import { Dustbin } from './Dustbin.js'
-import { Box } from './Box.js'
-import { ItemTypes } from './ItemTypes.js'
+import { Dustbin } from './Dustbin'
+import { Box } from './Box'
+import { ItemTypes } from './ItemTypes'
import update from 'immutability-helper'
interface DustbinState {
diff --git a/packages/examples/src/01-dustbin/multiple-targets/index.ts b/packages/examples/src/01-dustbin/multiple-targets/index.ts
index a4b4a9b31b..3213c790c0 100644
--- a/packages/examples/src/01-dustbin/multiple-targets/index.ts
+++ b/packages/examples/src/01-dustbin/multiple-targets/index.ts
@@ -1 +1 @@
-export { Container as default } from './Container.js'
+export { Container as default } from './Container'
diff --git a/packages/examples/src/01-dustbin/single-target-in-iframe/Box.tsx b/packages/examples/src/01-dustbin/single-target-in-iframe/Box.tsx
index 0dc6c64259..6ab5c13b30 100644
--- a/packages/examples/src/01-dustbin/single-target-in-iframe/Box.tsx
+++ b/packages/examples/src/01-dustbin/single-target-in-iframe/Box.tsx
@@ -1,6 +1,6 @@
import type { CSSProperties, FC } from 'react'
import { useDrag } from 'react-dnd'
-import { ItemTypes } from './ItemTypes.js'
+import { ItemTypes } from './ItemTypes'
const style: CSSProperties = {
border: '1px dashed gray',
diff --git a/packages/examples/src/01-dustbin/single-target-in-iframe/Container.tsx b/packages/examples/src/01-dustbin/single-target-in-iframe/Container.tsx
index 56ada36885..8a805375ec 100644
--- a/packages/examples/src/01-dustbin/single-target-in-iframe/Container.tsx
+++ b/packages/examples/src/01-dustbin/single-target-in-iframe/Container.tsx
@@ -1,8 +1,8 @@
import type { FC, ReactNode } from 'react'
import { DndProvider } from 'react-dnd'
import { HTML5Backend } from 'react-dnd-html5-backend'
-import { Dustbin } from './Dustbin.js'
-import { Box } from './Box.js'
+import { Dustbin } from './Dustbin'
+import { Box } from './Box'
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
import Frame, { FrameContextConsumer } from 'react-frame-component'
diff --git a/packages/examples/src/01-dustbin/single-target-in-iframe/Dustbin.tsx b/packages/examples/src/01-dustbin/single-target-in-iframe/Dustbin.tsx
index 654cc6678c..67f6751093 100644
--- a/packages/examples/src/01-dustbin/single-target-in-iframe/Dustbin.tsx
+++ b/packages/examples/src/01-dustbin/single-target-in-iframe/Dustbin.tsx
@@ -1,6 +1,6 @@
import type { CSSProperties, FC } from 'react'
import { useDrop } from 'react-dnd'
-import { ItemTypes } from './ItemTypes.js'
+import { ItemTypes } from './ItemTypes'
const style: CSSProperties = {
height: '12rem',
diff --git a/packages/examples/src/01-dustbin/single-target-in-iframe/index.ts b/packages/examples/src/01-dustbin/single-target-in-iframe/index.ts
index a4b4a9b31b..3213c790c0 100644
--- a/packages/examples/src/01-dustbin/single-target-in-iframe/index.ts
+++ b/packages/examples/src/01-dustbin/single-target-in-iframe/index.ts
@@ -1 +1 @@
-export { Container as default } from './Container.js'
+export { Container as default } from './Container'
diff --git a/packages/examples/src/01-dustbin/single-target/Box.tsx b/packages/examples/src/01-dustbin/single-target/Box.tsx
index 9b45c9240d..f28f845442 100644
--- a/packages/examples/src/01-dustbin/single-target/Box.tsx
+++ b/packages/examples/src/01-dustbin/single-target/Box.tsx
@@ -1,6 +1,6 @@
import type { CSSProperties, FC } from 'react'
import { useDrag } from 'react-dnd'
-import { ItemTypes } from './ItemTypes.js'
+import { ItemTypes } from './ItemTypes'
const style: CSSProperties = {
border: '1px dashed gray',
diff --git a/packages/examples/src/01-dustbin/single-target/Container.tsx b/packages/examples/src/01-dustbin/single-target/Container.tsx
index e9f32df7fd..5951f9e3dc 100644
--- a/packages/examples/src/01-dustbin/single-target/Container.tsx
+++ b/packages/examples/src/01-dustbin/single-target/Container.tsx
@@ -1,6 +1,6 @@
import { FC, memo } from 'react'
-import { Dustbin } from './Dustbin.js'
-import { Box } from './Box.js'
+import { Dustbin } from './Dustbin'
+import { Box } from './Box'
export const Container: FC = memo(function Container() {
return (
diff --git a/packages/examples/src/01-dustbin/single-target/Dustbin.tsx b/packages/examples/src/01-dustbin/single-target/Dustbin.tsx
index 4817050458..fe7658a8ab 100644
--- a/packages/examples/src/01-dustbin/single-target/Dustbin.tsx
+++ b/packages/examples/src/01-dustbin/single-target/Dustbin.tsx
@@ -1,6 +1,6 @@
import type { CSSProperties, FC } from 'react'
import { useDrop } from 'react-dnd'
-import { ItemTypes } from './ItemTypes.js'
+import { ItemTypes } from './ItemTypes'
const style: CSSProperties = {
height: '12rem',
diff --git a/packages/examples/src/01-dustbin/single-target/index.ts b/packages/examples/src/01-dustbin/single-target/index.ts
index a4b4a9b31b..3213c790c0 100644
--- a/packages/examples/src/01-dustbin/single-target/index.ts
+++ b/packages/examples/src/01-dustbin/single-target/index.ts
@@ -1 +1 @@
-export { Container as default } from './Container.js'
+export { Container as default } from './Container'
diff --git a/packages/examples/src/01-dustbin/stress-test/Container.tsx b/packages/examples/src/01-dustbin/stress-test/Container.tsx
index a6f9e05b94..d6104e192d 100644
--- a/packages/examples/src/01-dustbin/stress-test/Container.tsx
+++ b/packages/examples/src/01-dustbin/stress-test/Container.tsx
@@ -1,10 +1,10 @@
import { FC, useState, useEffect, useCallback, memo } from 'react'
import { NativeTypes } from 'react-dnd-html5-backend'
-import { Dustbin } from './Dustbin.js'
-import { Box } from './Box.js'
-import { ItemTypes } from './ItemTypes.js'
+import { Dustbin } from './Dustbin'
+import { Box } from './Box'
+import { ItemTypes } from './ItemTypes'
import update from 'immutability-helper'
-import shuffle from 'lodash/shuffle.js'
+import shuffle from 'lodash/shuffle'
export interface SourceBox {
name: string
diff --git a/packages/examples/src/01-dustbin/stress-test/index.ts b/packages/examples/src/01-dustbin/stress-test/index.ts
index a4b4a9b31b..3213c790c0 100644
--- a/packages/examples/src/01-dustbin/stress-test/index.ts
+++ b/packages/examples/src/01-dustbin/stress-test/index.ts
@@ -1 +1 @@
-export { Container as default } from './Container.js'
+export { Container as default } from './Container'
diff --git a/packages/examples/src/02-drag-around/custom-drag-layer/BoxDragPreview.tsx b/packages/examples/src/02-drag-around/custom-drag-layer/BoxDragPreview.tsx
index 09a4ee2b1c..91a017e988 100644
--- a/packages/examples/src/02-drag-around/custom-drag-layer/BoxDragPreview.tsx
+++ b/packages/examples/src/02-drag-around/custom-drag-layer/BoxDragPreview.tsx
@@ -1,5 +1,5 @@
import { FC, CSSProperties, useEffect, useState, memo } from 'react'
-import { Box } from './Box.js'
+import { Box } from './Box'
const styles: CSSProperties = {
display: 'inline-block',
diff --git a/packages/examples/src/02-drag-around/custom-drag-layer/Container.tsx b/packages/examples/src/02-drag-around/custom-drag-layer/Container.tsx
index dc6e6fca0a..fd4ed9c438 100644
--- a/packages/examples/src/02-drag-around/custom-drag-layer/Container.tsx
+++ b/packages/examples/src/02-drag-around/custom-drag-layer/Container.tsx
@@ -1,10 +1,10 @@
import { CSSProperties, FC, useCallback, useState } from 'react'
import { useDrop } from 'react-dnd'
-import { ItemTypes } from './ItemTypes.js'
-import { DraggableBox } from './DraggableBox.js'
-import { snapToGrid as doSnapToGrid } from './snapToGrid.js'
+import { ItemTypes } from './ItemTypes'
+import { DraggableBox } from './DraggableBox'
+import { snapToGrid as doSnapToGrid } from './snapToGrid'
import update from 'immutability-helper'
-import type { DragItem } from './interfaces.js'
+import type { DragItem } from './interfaces'
const styles: CSSProperties = {
width: 300,
diff --git a/packages/examples/src/02-drag-around/custom-drag-layer/CustomDragLayer.tsx b/packages/examples/src/02-drag-around/custom-drag-layer/CustomDragLayer.tsx
index 131b60d599..51021a7e54 100644
--- a/packages/examples/src/02-drag-around/custom-drag-layer/CustomDragLayer.tsx
+++ b/packages/examples/src/02-drag-around/custom-drag-layer/CustomDragLayer.tsx
@@ -1,8 +1,8 @@
import type { CSSProperties, FC } from 'react'
import { XYCoord, useDragLayer } from 'react-dnd'
-import { ItemTypes } from './ItemTypes.js'
-import { BoxDragPreview } from './BoxDragPreview.js'
-import { snapToGrid } from './snapToGrid.js'
+import { ItemTypes } from './ItemTypes'
+import { BoxDragPreview } from './BoxDragPreview'
+import { snapToGrid } from './snapToGrid'
const layerStyles: CSSProperties = {
position: 'fixed',
diff --git a/packages/examples/src/02-drag-around/custom-drag-layer/DraggableBox.tsx b/packages/examples/src/02-drag-around/custom-drag-layer/DraggableBox.tsx
index 6b5a16630f..9c2e4cdd04 100644
--- a/packages/examples/src/02-drag-around/custom-drag-layer/DraggableBox.tsx
+++ b/packages/examples/src/02-drag-around/custom-drag-layer/DraggableBox.tsx
@@ -1,8 +1,8 @@
import { CSSProperties, FC, memo, useEffect } from 'react'
import { useDrag, DragSourceMonitor } from 'react-dnd'
-import { ItemTypes } from './ItemTypes.js'
+import { ItemTypes } from './ItemTypes'
import { getEmptyImage } from 'react-dnd-html5-backend'
-import { Box } from './Box.js'
+import { Box } from './Box'
function getStyles(
left: number,
diff --git a/packages/examples/src/02-drag-around/custom-drag-layer/Example.tsx b/packages/examples/src/02-drag-around/custom-drag-layer/Example.tsx
index 0981cd4cc7..b6caf7d22f 100644
--- a/packages/examples/src/02-drag-around/custom-drag-layer/Example.tsx
+++ b/packages/examples/src/02-drag-around/custom-drag-layer/Example.tsx
@@ -1,6 +1,6 @@
import { FC, useState, useCallback } from 'react'
-import { Container } from './Container.js'
-import { CustomDragLayer } from './CustomDragLayer.js'
+import { Container } from './Container'
+import { CustomDragLayer } from './CustomDragLayer'
export const Example: FC = () => {
const [snapToGridAfterDrop, setSnapToGridAfterDrop] = useState(false)
diff --git a/packages/examples/src/02-drag-around/custom-drag-layer/index.ts b/packages/examples/src/02-drag-around/custom-drag-layer/index.ts
index 0c75ab5870..13969a4234 100644
--- a/packages/examples/src/02-drag-around/custom-drag-layer/index.ts
+++ b/packages/examples/src/02-drag-around/custom-drag-layer/index.ts
@@ -1 +1 @@
-export { Example as default } from './Example.js'
+export { Example as default } from './Example'
diff --git a/packages/examples/src/02-drag-around/naive/Box.tsx b/packages/examples/src/02-drag-around/naive/Box.tsx
index 567b6f9e33..846fe88198 100644
--- a/packages/examples/src/02-drag-around/naive/Box.tsx
+++ b/packages/examples/src/02-drag-around/naive/Box.tsx
@@ -1,6 +1,6 @@
import type { CSSProperties, FC, ReactNode } from 'react'
import { useDrag } from 'react-dnd'
-import { ItemTypes } from './ItemTypes.js'
+import { ItemTypes } from './ItemTypes'
const style: CSSProperties = {
position: 'absolute',
diff --git a/packages/examples/src/02-drag-around/naive/Container.tsx b/packages/examples/src/02-drag-around/naive/Container.tsx
index 7dda044021..e7a0f7f1ab 100644
--- a/packages/examples/src/02-drag-around/naive/Container.tsx
+++ b/packages/examples/src/02-drag-around/naive/Container.tsx
@@ -1,9 +1,9 @@
import { CSSProperties, FC, useCallback, useState } from 'react'
import { useDrop, XYCoord } from 'react-dnd'
-import { ItemTypes } from './ItemTypes.js'
-import { Box } from './Box.js'
+import { ItemTypes } from './ItemTypes'
+import { Box } from './Box'
import update from 'immutability-helper'
-import type { DragItem } from './interfaces.js'
+import type { DragItem } from './interfaces'
const styles: CSSProperties = {
width: 300,
diff --git a/packages/examples/src/02-drag-around/naive/Example.tsx b/packages/examples/src/02-drag-around/naive/Example.tsx
index 9996c7fa47..672fbf9ff0 100644
--- a/packages/examples/src/02-drag-around/naive/Example.tsx
+++ b/packages/examples/src/02-drag-around/naive/Example.tsx
@@ -1,5 +1,5 @@
import { FC, useState, useCallback } from 'react'
-import { Container } from './Container.js'
+import { Container } from './Container'
export const Example: FC = () => {
const [hideSourceOnDrag, setHideSourceOnDrag] = useState(true)
diff --git a/packages/examples/src/02-drag-around/naive/index.ts b/packages/examples/src/02-drag-around/naive/index.ts
index 0c75ab5870..13969a4234 100644
--- a/packages/examples/src/02-drag-around/naive/index.ts
+++ b/packages/examples/src/02-drag-around/naive/index.ts
@@ -1 +1 @@
-export { Example as default } from './Example.js'
+export { Example as default } from './Example'
diff --git a/packages/examples/src/03-nesting/drag-sources/Container.tsx b/packages/examples/src/03-nesting/drag-sources/Container.tsx
index c079781df5..0da3656b2d 100644
--- a/packages/examples/src/03-nesting/drag-sources/Container.tsx
+++ b/packages/examples/src/03-nesting/drag-sources/Container.tsx
@@ -1,7 +1,7 @@
import { FC, memo } from 'react'
-import { SourceBox } from './SourceBox.js'
-import { StatefulTargetBox as TargetBox } from './TargetBox.js'
-import { Colors } from './Colors.js'
+import { SourceBox } from './SourceBox'
+import { StatefulTargetBox as TargetBox } from './TargetBox'
+import { Colors } from './Colors'
export const Container: FC = memo(function Container() {
return (
diff --git a/packages/examples/src/03-nesting/drag-sources/SourceBox.tsx b/packages/examples/src/03-nesting/drag-sources/SourceBox.tsx
index 42288a5601..b11514f891 100644
--- a/packages/examples/src/03-nesting/drag-sources/SourceBox.tsx
+++ b/packages/examples/src/03-nesting/drag-sources/SourceBox.tsx
@@ -8,7 +8,7 @@ import {
ReactNode,
} from 'react'
import { useDrag, DragSourceMonitor } from 'react-dnd'
-import { Colors } from './Colors.js'
+import { Colors } from './Colors'
const style: CSSProperties = {
border: '1px dashed gray',
diff --git a/packages/examples/src/03-nesting/drag-sources/TargetBox.tsx b/packages/examples/src/03-nesting/drag-sources/TargetBox.tsx
index 5a9679e801..d2e9c18a2c 100644
--- a/packages/examples/src/03-nesting/drag-sources/TargetBox.tsx
+++ b/packages/examples/src/03-nesting/drag-sources/TargetBox.tsx
@@ -1,7 +1,7 @@
import { CSSProperties, FC, useState, useCallback, memo } from 'react'
import { useDrop, DropTargetMonitor } from 'react-dnd'
-import { Colors } from './Colors.js'
-import type { DragItem } from './interfaces.js'
+import { Colors } from './Colors'
+import type { DragItem } from './interfaces'
const style: CSSProperties = {
border: '1px solid gray',
diff --git a/packages/examples/src/03-nesting/drag-sources/index.ts b/packages/examples/src/03-nesting/drag-sources/index.ts
index a4b4a9b31b..3213c790c0 100644
--- a/packages/examples/src/03-nesting/drag-sources/index.ts
+++ b/packages/examples/src/03-nesting/drag-sources/index.ts
@@ -1 +1 @@
-export { Container as default } from './Container.js'
+export { Container as default } from './Container'
diff --git a/packages/examples/src/03-nesting/drop-targets/Box.tsx b/packages/examples/src/03-nesting/drop-targets/Box.tsx
index aa344b066c..17505f16c3 100644
--- a/packages/examples/src/03-nesting/drop-targets/Box.tsx
+++ b/packages/examples/src/03-nesting/drop-targets/Box.tsx
@@ -1,6 +1,6 @@
import type { FC } from 'react'
import { useDrag } from 'react-dnd'
-import { ItemTypes } from './ItemTypes.js'
+import { ItemTypes } from './ItemTypes'
const style = {
display: 'inline-block',
diff --git a/packages/examples/src/03-nesting/drop-targets/Container.tsx b/packages/examples/src/03-nesting/drop-targets/Container.tsx
index 342ec7e8ce..eb5ac0c9e5 100644
--- a/packages/examples/src/03-nesting/drop-targets/Container.tsx
+++ b/packages/examples/src/03-nesting/drop-targets/Container.tsx
@@ -1,6 +1,6 @@
import type { FC } from 'react'
-import { Dustbin } from './Dustbin.js'
-import { Box } from './Box.js'
+import { Dustbin } from './Dustbin'
+import { Box } from './Box'
export const Container: FC = () => (
diff --git a/packages/examples/src/03-nesting/drop-targets/Dustbin.tsx b/packages/examples/src/03-nesting/drop-targets/Dustbin.tsx
index 195b4eeab2..4638c6ac3a 100644
--- a/packages/examples/src/03-nesting/drop-targets/Dustbin.tsx
+++ b/packages/examples/src/03-nesting/drop-targets/Dustbin.tsx
@@ -1,6 +1,6 @@
import { CSSProperties, FC, ReactNode, useState } from 'react'
import { useDrop } from 'react-dnd'
-import { ItemTypes } from './ItemTypes.js'
+import { ItemTypes } from './ItemTypes'
function getStyle(backgroundColor: string): CSSProperties {
return {
diff --git a/packages/examples/src/03-nesting/drop-targets/index.ts b/packages/examples/src/03-nesting/drop-targets/index.ts
index a4b4a9b31b..3213c790c0 100644
--- a/packages/examples/src/03-nesting/drop-targets/index.ts
+++ b/packages/examples/src/03-nesting/drop-targets/index.ts
@@ -1 +1 @@
-export { Container as default } from './Container.js'
+export { Container as default } from './Container'
diff --git a/packages/examples/src/04-sortable/cancel-on-drop-outside/Card.tsx b/packages/examples/src/04-sortable/cancel-on-drop-outside/Card.tsx
index 2c30496e00..4032a4317b 100644
--- a/packages/examples/src/04-sortable/cancel-on-drop-outside/Card.tsx
+++ b/packages/examples/src/04-sortable/cancel-on-drop-outside/Card.tsx
@@ -1,6 +1,6 @@
import { CSSProperties, FC, memo } from 'react'
import { useDrag, useDrop } from 'react-dnd'
-import { ItemTypes } from './ItemTypes.js'
+import { ItemTypes } from './ItemTypes'
const style: CSSProperties = {
border: '1px dashed gray',
diff --git a/packages/examples/src/04-sortable/cancel-on-drop-outside/Container.tsx b/packages/examples/src/04-sortable/cancel-on-drop-outside/Container.tsx
index d6b4cf49a5..e9ce59b08f 100644
--- a/packages/examples/src/04-sortable/cancel-on-drop-outside/Container.tsx
+++ b/packages/examples/src/04-sortable/cancel-on-drop-outside/Container.tsx
@@ -1,8 +1,8 @@
import { FC, memo, useCallback, useState } from 'react'
import { useDrop } from 'react-dnd'
-import { Card } from './Card.js'
+import { Card } from './Card'
import update from 'immutability-helper'
-import { ItemTypes } from './ItemTypes.js'
+import { ItemTypes } from './ItemTypes'
const style = {
width: 400,
diff --git a/packages/examples/src/04-sortable/cancel-on-drop-outside/index.ts b/packages/examples/src/04-sortable/cancel-on-drop-outside/index.ts
index a4b4a9b31b..3213c790c0 100644
--- a/packages/examples/src/04-sortable/cancel-on-drop-outside/index.ts
+++ b/packages/examples/src/04-sortable/cancel-on-drop-outside/index.ts
@@ -1 +1 @@
-export { Container as default } from './Container.js'
+export { Container as default } from './Container'
diff --git a/packages/examples/src/04-sortable/simple/Card.tsx b/packages/examples/src/04-sortable/simple/Card.tsx
index bfda0ade68..9b96fb88ad 100644
--- a/packages/examples/src/04-sortable/simple/Card.tsx
+++ b/packages/examples/src/04-sortable/simple/Card.tsx
@@ -1,6 +1,6 @@
import { FC, useRef } from 'react'
import { useDrag, useDrop } from 'react-dnd'
-import { ItemTypes } from './ItemTypes.js'
+import { ItemTypes } from './ItemTypes'
import type { XYCoord, Identifier } from 'dnd-core'
const style = {
diff --git a/packages/examples/src/04-sortable/simple/Container.tsx b/packages/examples/src/04-sortable/simple/Container.tsx
index 1a662e719b..2bce7dcc4d 100644
--- a/packages/examples/src/04-sortable/simple/Container.tsx
+++ b/packages/examples/src/04-sortable/simple/Container.tsx
@@ -1,5 +1,5 @@
import { FC, useState, useCallback } from 'react'
-import { Card } from './Card.js'
+import { Card } from './Card'
import update from 'immutability-helper'
const style = {
diff --git a/packages/examples/src/04-sortable/simple/index.ts b/packages/examples/src/04-sortable/simple/index.ts
index a4b4a9b31b..3213c790c0 100644
--- a/packages/examples/src/04-sortable/simple/index.ts
+++ b/packages/examples/src/04-sortable/simple/index.ts
@@ -1 +1 @@
-export { Container as default } from './Container.js'
+export { Container as default } from './Container'
diff --git a/packages/examples/src/04-sortable/stress-test/Card.tsx b/packages/examples/src/04-sortable/stress-test/Card.tsx
index 8a8d9a6a55..de657a861e 100644
--- a/packages/examples/src/04-sortable/stress-test/Card.tsx
+++ b/packages/examples/src/04-sortable/stress-test/Card.tsx
@@ -1,6 +1,6 @@
import { CSSProperties, FC, memo, useMemo, useRef } from 'react'
import { useDrag, useDrop } from 'react-dnd'
-import { ItemTypes } from './ItemTypes.js'
+import { ItemTypes } from './ItemTypes'
const style: CSSProperties = {
border: '1px dashed gray',
diff --git a/packages/examples/src/04-sortable/stress-test/Container.tsx b/packages/examples/src/04-sortable/stress-test/Container.tsx
index 9ed677be7f..8151ac1711 100644
--- a/packages/examples/src/04-sortable/stress-test/Container.tsx
+++ b/packages/examples/src/04-sortable/stress-test/Container.tsx
@@ -1,6 +1,6 @@
import { CSSProperties, Component } from 'react'
import Faker from 'faker'
-import { Card } from './Card.js'
+import { Card } from './Card'
import update from 'immutability-helper'
const style: CSSProperties = {
diff --git a/packages/examples/src/04-sortable/stress-test/SortableStressTest.tsx b/packages/examples/src/04-sortable/stress-test/SortableStressTest.tsx
index 6e4678a72f..493e148864 100644
--- a/packages/examples/src/04-sortable/stress-test/SortableStressTest.tsx
+++ b/packages/examples/src/04-sortable/stress-test/SortableStressTest.tsx
@@ -1,5 +1,5 @@
import { FC, useState, useEffect } from 'react'
-import { Container } from './Container.js'
+import { Container } from './Container'
export const SortableStressTest: FC = () => {
// Avoid rendering on server because the big data list is generated
diff --git a/packages/examples/src/04-sortable/stress-test/index.ts b/packages/examples/src/04-sortable/stress-test/index.ts
index 80d3053e44..683eac389c 100644
--- a/packages/examples/src/04-sortable/stress-test/index.ts
+++ b/packages/examples/src/04-sortable/stress-test/index.ts
@@ -1 +1 @@
-export { SortableStressTest as default } from './SortableStressTest.js'
+export { SortableStressTest as default } from './SortableStressTest'
diff --git a/packages/examples/src/05-customize/drop-effects/Container.tsx b/packages/examples/src/05-customize/drop-effects/Container.tsx
index 1a1ff9c942..08893a2cd7 100644
--- a/packages/examples/src/05-customize/drop-effects/Container.tsx
+++ b/packages/examples/src/05-customize/drop-effects/Container.tsx
@@ -1,6 +1,6 @@
import type { FC } from 'react'
-import { SourceBox } from './SourceBox.js'
-import { TargetBox } from './TargetBox.js'
+import { SourceBox } from './SourceBox'
+import { TargetBox } from './TargetBox'
export const Container: FC = () => {
return (
diff --git a/packages/examples/src/05-customize/drop-effects/SourceBox.tsx b/packages/examples/src/05-customize/drop-effects/SourceBox.tsx
index 4144c33a0a..acb5a2fd83 100644
--- a/packages/examples/src/05-customize/drop-effects/SourceBox.tsx
+++ b/packages/examples/src/05-customize/drop-effects/SourceBox.tsx
@@ -1,6 +1,6 @@
import type { CSSProperties, FC } from 'react'
import { useDrag } from 'react-dnd'
-import { ItemTypes } from './ItemTypes.js'
+import { ItemTypes } from './ItemTypes'
const style: CSSProperties = {
border: '1px dashed gray',
diff --git a/packages/examples/src/05-customize/drop-effects/TargetBox.tsx b/packages/examples/src/05-customize/drop-effects/TargetBox.tsx
index d9b572f746..5341b3a1c0 100644
--- a/packages/examples/src/05-customize/drop-effects/TargetBox.tsx
+++ b/packages/examples/src/05-customize/drop-effects/TargetBox.tsx
@@ -1,6 +1,6 @@
import type { CSSProperties, FC } from 'react'
import { useDrop } from 'react-dnd'
-import { ItemTypes } from './ItemTypes.js'
+import { ItemTypes } from './ItemTypes'
const style: CSSProperties = {
border: '1px solid gray',
diff --git a/packages/examples/src/05-customize/drop-effects/index.ts b/packages/examples/src/05-customize/drop-effects/index.ts
index a4b4a9b31b..3213c790c0 100644
--- a/packages/examples/src/05-customize/drop-effects/index.ts
+++ b/packages/examples/src/05-customize/drop-effects/index.ts
@@ -1 +1 @@
-export { Container as default } from './Container.js'
+export { Container as default } from './Container'
diff --git a/packages/examples/src/05-customize/handles-and-previews/BoxWithHandle.tsx b/packages/examples/src/05-customize/handles-and-previews/BoxWithHandle.tsx
index e9a364fe98..4c6cb6dfd4 100644
--- a/packages/examples/src/05-customize/handles-and-previews/BoxWithHandle.tsx
+++ b/packages/examples/src/05-customize/handles-and-previews/BoxWithHandle.tsx
@@ -1,6 +1,6 @@
import type { CSSProperties, FC } from 'react'
import { useDrag } from 'react-dnd'
-import { ItemTypes } from './ItemTypes.js'
+import { ItemTypes } from './ItemTypes'
const style: CSSProperties = {
border: '1px dashed gray',
diff --git a/packages/examples/src/05-customize/handles-and-previews/BoxWithImage.tsx b/packages/examples/src/05-customize/handles-and-previews/BoxWithImage.tsx
index 3de96e1205..6a0d4cb594 100644
--- a/packages/examples/src/05-customize/handles-and-previews/BoxWithImage.tsx
+++ b/packages/examples/src/05-customize/handles-and-previews/BoxWithImage.tsx
@@ -1,7 +1,7 @@
import type { CSSProperties, FC } from 'react'
import { DragPreviewImage, useDrag } from 'react-dnd'
-import { ItemTypes } from './ItemTypes.js'
-import { boxImage } from './boxImage.js'
+import { ItemTypes } from './ItemTypes'
+import { boxImage } from './boxImage'
const style: CSSProperties = {
border: '1px dashed gray',
diff --git a/packages/examples/src/05-customize/handles-and-previews/Container.tsx b/packages/examples/src/05-customize/handles-and-previews/Container.tsx
index 85fcdd26c0..8297e7689d 100644
--- a/packages/examples/src/05-customize/handles-and-previews/Container.tsx
+++ b/packages/examples/src/05-customize/handles-and-previews/Container.tsx
@@ -1,6 +1,6 @@
import type { FC } from 'react'
-import { BoxWithImage } from './BoxWithImage.js'
-import { BoxWithHandle } from './BoxWithHandle.js'
+import { BoxWithImage } from './BoxWithImage'
+import { BoxWithHandle } from './BoxWithHandle'
export const Container: FC = () => {
return (
diff --git a/packages/examples/src/05-customize/handles-and-previews/index.ts b/packages/examples/src/05-customize/handles-and-previews/index.ts
index a4b4a9b31b..3213c790c0 100644
--- a/packages/examples/src/05-customize/handles-and-previews/index.ts
+++ b/packages/examples/src/05-customize/handles-and-previews/index.ts
@@ -1 +1 @@
-export { Container as default } from './Container.js'
+export { Container as default } from './Container'
diff --git a/packages/examples/src/06-other/native-files/Container.tsx b/packages/examples/src/06-other/native-files/Container.tsx
index 2eb9c8bb8f..a3d56dccbe 100644
--- a/packages/examples/src/06-other/native-files/Container.tsx
+++ b/packages/examples/src/06-other/native-files/Container.tsx
@@ -1,7 +1,7 @@
import type { FC } from 'react'
import { useState, useCallback } from 'react'
-import { TargetBox } from './TargetBox.js'
-import { FileList } from './FileList.js'
+import { TargetBox } from './TargetBox'
+import { FileList } from './FileList'
export const Container: FC = () => {
const [droppedFiles, setDroppedFiles] = useState
([])
diff --git a/packages/examples/src/06-other/native-files/index.ts b/packages/examples/src/06-other/native-files/index.ts
index a4b4a9b31b..3213c790c0 100644
--- a/packages/examples/src/06-other/native-files/index.ts
+++ b/packages/examples/src/06-other/native-files/index.ts
@@ -1 +1 @@
-export { Container as default } from './Container.js'
+export { Container as default } from './Container'
diff --git a/packages/examples/src/06-other/native-html/Container.tsx b/packages/examples/src/06-other/native-html/Container.tsx
index 98009bd33d..2a6d713f5b 100644
--- a/packages/examples/src/06-other/native-html/Container.tsx
+++ b/packages/examples/src/06-other/native-html/Container.tsx
@@ -1,7 +1,7 @@
import type { FC } from 'react'
import { useState, useCallback } from 'react'
-import { TargetBox } from './TargetBox.js'
-import { HTMLContent } from './HTMLContent.js'
+import { TargetBox } from './TargetBox'
+import { HTMLContent } from './HTMLContent'
export const Container: FC = () => {
const [droppedHTML, setDroppedHTML] = useState('')
diff --git a/packages/examples/src/06-other/native-html/index.ts b/packages/examples/src/06-other/native-html/index.ts
index a4b4a9b31b..3213c790c0 100644
--- a/packages/examples/src/06-other/native-html/index.ts
+++ b/packages/examples/src/06-other/native-html/index.ts
@@ -1 +1 @@
-export { Container as default } from './Container.js'
+export { Container as default } from './Container'
diff --git a/packages/examples/src/07-regression/chained-connectors/BoxWithHandle.tsx b/packages/examples/src/07-regression/chained-connectors/BoxWithHandle.tsx
index d347e265f4..692f1ca7a8 100644
--- a/packages/examples/src/07-regression/chained-connectors/BoxWithHandle.tsx
+++ b/packages/examples/src/07-regression/chained-connectors/BoxWithHandle.tsx
@@ -1,6 +1,6 @@
import type { CSSProperties, FC } from 'react'
import { useDrop, useDrag } from 'react-dnd'
-import { ItemTypes } from './ItemTypes.js'
+import { ItemTypes } from './ItemTypes'
const style: CSSProperties = {
border: '1px dashed gray',
diff --git a/packages/examples/src/07-regression/chained-connectors/Container.tsx b/packages/examples/src/07-regression/chained-connectors/Container.tsx
index 444c35fb5a..dc6f1d3ee7 100644
--- a/packages/examples/src/07-regression/chained-connectors/Container.tsx
+++ b/packages/examples/src/07-regression/chained-connectors/Container.tsx
@@ -1,5 +1,5 @@
import type { CSSProperties, FC } from 'react'
-import { BoxWithHandle } from './BoxWithHandle.js'
+import { BoxWithHandle } from './BoxWithHandle'
const style: CSSProperties = {
width: 400,
diff --git a/packages/examples/src/07-regression/chained-connectors/index.ts b/packages/examples/src/07-regression/chained-connectors/index.ts
index a4b4a9b31b..3213c790c0 100644
--- a/packages/examples/src/07-regression/chained-connectors/index.ts
+++ b/packages/examples/src/07-regression/chained-connectors/index.ts
@@ -1 +1 @@
-export { Container as default } from './Container.js'
+export { Container as default } from './Container'
diff --git a/packages/examples/src/07-regression/drag-source-rerender/Container.tsx b/packages/examples/src/07-regression/drag-source-rerender/Container.tsx
index c77f8b8929..ff2e8ed9bc 100644
--- a/packages/examples/src/07-regression/drag-source-rerender/Container.tsx
+++ b/packages/examples/src/07-regression/drag-source-rerender/Container.tsx
@@ -1,5 +1,5 @@
import type { FC } from 'react'
-import { Example } from './Example.js'
+import { Example } from './Example'
export const Container: FC = () => {
return (
diff --git a/packages/examples/src/07-regression/drag-source-rerender/index.ts b/packages/examples/src/07-regression/drag-source-rerender/index.ts
index a4b4a9b31b..3213c790c0 100644
--- a/packages/examples/src/07-regression/drag-source-rerender/index.ts
+++ b/packages/examples/src/07-regression/drag-source-rerender/index.ts
@@ -1 +1 @@
-export { Container as default } from './Container.js'
+export { Container as default } from './Container'
diff --git a/packages/examples/src/07-regression/previews-memory-leak/App.tsx b/packages/examples/src/07-regression/previews-memory-leak/App.tsx
index 65e370eb62..fe9b167962 100644
--- a/packages/examples/src/07-regression/previews-memory-leak/App.tsx
+++ b/packages/examples/src/07-regression/previews-memory-leak/App.tsx
@@ -1,6 +1,6 @@
import type { FC } from 'react'
-import { Example } from './example.js'
-import { Profiler } from './Profiler.js'
+import { Example } from './example'
+import { Profiler } from './Profiler'
export const App: FC = () => {
return (
diff --git a/packages/examples/src/07-regression/previews-memory-leak/BoxWithHandle.tsx b/packages/examples/src/07-regression/previews-memory-leak/BoxWithHandle.tsx
index a88fcfbf5b..4a4efc13cf 100644
--- a/packages/examples/src/07-regression/previews-memory-leak/BoxWithHandle.tsx
+++ b/packages/examples/src/07-regression/previews-memory-leak/BoxWithHandle.tsx
@@ -1,6 +1,6 @@
import type { CSSProperties, FC } from 'react'
import { useDrag } from 'react-dnd'
-import { ItemTypes } from './ItemTypes.js'
+import { ItemTypes } from './ItemTypes'
const style: CSSProperties = {
border: '1px dashed gray',
diff --git a/packages/examples/src/07-regression/previews-memory-leak/BoxWithImage.tsx b/packages/examples/src/07-regression/previews-memory-leak/BoxWithImage.tsx
index db9f29b89b..fd94e18173 100644
--- a/packages/examples/src/07-regression/previews-memory-leak/BoxWithImage.tsx
+++ b/packages/examples/src/07-regression/previews-memory-leak/BoxWithImage.tsx
@@ -1,7 +1,7 @@
import type { CSSProperties, FC } from 'react'
import { DragPreviewImage, useDrag } from 'react-dnd'
-import { ItemTypes } from './ItemTypes.js'
-import { boxImage } from './boxImage.js'
+import { ItemTypes } from './ItemTypes'
+import { boxImage } from './boxImage'
const style: CSSProperties = {
border: '1px dashed gray',
diff --git a/packages/examples/src/07-regression/previews-memory-leak/example.tsx b/packages/examples/src/07-regression/previews-memory-leak/example.tsx
index 262a2ee3aa..937ca64121 100644
--- a/packages/examples/src/07-regression/previews-memory-leak/example.tsx
+++ b/packages/examples/src/07-regression/previews-memory-leak/example.tsx
@@ -1,6 +1,6 @@
import { FC, useState, useEffect } from 'react'
-import { BoxWithImage } from './BoxWithImage.js'
-import { BoxWithHandle } from './BoxWithHandle.js'
+import { BoxWithImage } from './BoxWithImage'
+import { BoxWithHandle } from './BoxWithHandle'
export const Example: FC = () => {
const [key, setKey] = useState(0)
diff --git a/packages/examples/src/07-regression/previews-memory-leak/index.ts b/packages/examples/src/07-regression/previews-memory-leak/index.ts
index 9e20091c86..796fc1492d 100644
--- a/packages/examples/src/07-regression/previews-memory-leak/index.ts
+++ b/packages/examples/src/07-regression/previews-memory-leak/index.ts
@@ -1 +1 @@
-export { App as default } from './App.js'
+export { App as default } from './App'
diff --git a/packages/examples/src/07-regression/remount-with-correct-props/Container.tsx b/packages/examples/src/07-regression/remount-with-correct-props/Container.tsx
index a69828adf5..a0bc8592f7 100644
--- a/packages/examples/src/07-regression/remount-with-correct-props/Container.tsx
+++ b/packages/examples/src/07-regression/remount-with-correct-props/Container.tsx
@@ -1,6 +1,6 @@
import { FC, useState, useEffect, useCallback } from 'react'
-import { SourceBox } from './SourceBox.js'
-import { TargetBox } from './TargetBox.js'
+import { SourceBox } from './SourceBox'
+import { TargetBox } from './TargetBox'
export const Container: FC = () => {
const [isMounted, setIsMounted] = useState(true)
diff --git a/packages/examples/src/07-regression/remount-with-correct-props/SourceBox.tsx b/packages/examples/src/07-regression/remount-with-correct-props/SourceBox.tsx
index dbf24c8d4d..f0f01ef3d3 100644
--- a/packages/examples/src/07-regression/remount-with-correct-props/SourceBox.tsx
+++ b/packages/examples/src/07-regression/remount-with-correct-props/SourceBox.tsx
@@ -1,6 +1,6 @@
import type { FC, CSSProperties } from 'react'
import { useDrag } from 'react-dnd'
-import { ItemTypes } from './ItemTypes.js'
+import { ItemTypes } from './ItemTypes'
const getStyle = (isDragging: boolean): CSSProperties => {
const result: CSSProperties = {
diff --git a/packages/examples/src/07-regression/remount-with-correct-props/TargetBox.tsx b/packages/examples/src/07-regression/remount-with-correct-props/TargetBox.tsx
index a0a0e7c64d..a358adb726 100644
--- a/packages/examples/src/07-regression/remount-with-correct-props/TargetBox.tsx
+++ b/packages/examples/src/07-regression/remount-with-correct-props/TargetBox.tsx
@@ -1,6 +1,6 @@
import type { FC, CSSProperties } from 'react'
import { useDrop } from 'react-dnd'
-import { ItemTypes } from './ItemTypes.js'
+import { ItemTypes } from './ItemTypes'
const style: CSSProperties = {
border: '1px solid gray',
diff --git a/packages/examples/src/07-regression/remount-with-correct-props/index.ts b/packages/examples/src/07-regression/remount-with-correct-props/index.ts
index a4b4a9b31b..3213c790c0 100644
--- a/packages/examples/src/07-regression/remount-with-correct-props/index.ts
+++ b/packages/examples/src/07-regression/remount-with-correct-props/index.ts
@@ -1 +1 @@
-export { Container as default } from './Container.js'
+export { Container as default } from './Container'
diff --git a/packages/examples/src/index.ts b/packages/examples/src/index.ts
index de36954084..bc57675f3e 100644
--- a/packages/examples/src/index.ts
+++ b/packages/examples/src/index.ts
@@ -1,25 +1,25 @@
import type { ComponentClass, FunctionComponent } from 'react'
-import chessboard from './00-chessboard/index.js'
-import dustbinCopyOrMove from './01-dustbin/copy-or-move/index.js'
-import dustbinMultipleTargets from './01-dustbin/multiple-targets/index.js'
-import dustbinSingleTarget from './01-dustbin/single-target/index.js'
-import dustbinSingleTargetInIframe from './01-dustbin/single-target-in-iframe/index.js'
-import dustbinStressTest from './01-dustbin/stress-test/index.js'
-import dragAroundCustomDragLayer from './02-drag-around/custom-drag-layer/index.js'
-import dragAroundNaive from './02-drag-around/naive/index.js'
-import nestingDragSources from './03-nesting/drag-sources/index.js'
-import nestingDropTargets from './03-nesting/drop-targets/index.js'
-import sortableCancelOnDropOutside from './04-sortable/cancel-on-drop-outside/index.js'
-import sortableSimple from './04-sortable/simple/index.js'
-import sortableStressTest from './04-sortable/stress-test/index.js'
-import customizeDropEffects from './05-customize/drop-effects/index.js'
-import customizeHandlesAndPreviews from './05-customize/handles-and-previews/index.js'
-import otherNativeFiles from './06-other/native-files/index.js'
-import otherNativeHtml from './06-other/native-html/index.js'
-import dragSourceRerender from './07-regression/drag-source-rerender/index.js'
-import remountWithCorrectProps from './07-regression/remount-with-correct-props/index.js'
-import otherChainedConnectors from './07-regression/chained-connectors/index.js'
-import otherPreviewsMemoryLeak from './07-regression/previews-memory-leak/index.js'
+import chessboard from './00-chessboard/index'
+import dustbinCopyOrMove from './01-dustbin/copy-or-move/index'
+import dustbinMultipleTargets from './01-dustbin/multiple-targets/index'
+import dustbinSingleTarget from './01-dustbin/single-target/index'
+import dustbinSingleTargetInIframe from './01-dustbin/single-target-in-iframe/index'
+import dustbinStressTest from './01-dustbin/stress-test/index'
+import dragAroundCustomDragLayer from './02-drag-around/custom-drag-layer/index'
+import dragAroundNaive from './02-drag-around/naive/index'
+import nestingDragSources from './03-nesting/drag-sources/index'
+import nestingDropTargets from './03-nesting/drop-targets/index'
+import sortableCancelOnDropOutside from './04-sortable/cancel-on-drop-outside/index'
+import sortableSimple from './04-sortable/simple/index'
+import sortableStressTest from './04-sortable/stress-test/index'
+import customizeDropEffects from './05-customize/drop-effects/index'
+import customizeHandlesAndPreviews from './05-customize/handles-and-previews/index'
+import otherNativeFiles from './06-other/native-files/index'
+import otherNativeHtml from './06-other/native-html/index'
+import dragSourceRerender from './07-regression/drag-source-rerender/index'
+import remountWithCorrectProps from './07-regression/remount-with-correct-props/index'
+import otherChainedConnectors from './07-regression/chained-connectors/index'
+import otherPreviewsMemoryLeak from './07-regression/previews-memory-leak/index'
export const componentIndex: {
[key: string]: ComponentClass | FunctionComponent
diff --git a/packages/test-suite-next/package.json b/packages/test-suite-next/package.json
index 194973593e..7afba57679 100644
--- a/packages/test-suite-next/package.json
+++ b/packages/test-suite-next/package.json
@@ -3,7 +3,8 @@
"private": true,
"scripts": {
"start:next": "next dev",
- "build": "next build",
+ "//build-about": "next build isn't working atm, need to investigate why",
+ "//build": "next build",
"lint": "next lint"
},
"dependencies": {
diff --git a/packages/util-asap/package.json b/packages/util-asap/package.json
index 589709aa8c..8b72662ca4 100644
--- a/packages/util-asap/package.json
+++ b/packages/util-asap/package.json
@@ -1,7 +1,6 @@
{
"name": "@react-dnd/asap",
"version": "4.0.0",
- "private": false,
"description": "High-priority task queue for Node.js and browsers",
"keywords": [
"event",
diff --git a/packages/util-invariant/package.json b/packages/util-invariant/package.json
index 8c664afd78..b8060e7214 100644
--- a/packages/util-invariant/package.json
+++ b/packages/util-invariant/package.json
@@ -1,7 +1,6 @@
{
"name": "@react-dnd/invariant",
"version": "3.0.0",
- "private": false,
"description": "invariantx",
"keywords": [
"test",
diff --git a/packages/util-shallowequal/package.json b/packages/util-shallowequal/package.json
index ea83a1ae6c..0fe6250d59 100644
--- a/packages/util-shallowequal/package.json
+++ b/packages/util-shallowequal/package.json
@@ -1,7 +1,6 @@
{
"name": "@react-dnd/shallowequal",
"version": "3.0.0",
- "private": false,
"description": "Like lodash isEqualWith but for shallow equal.",
"keywords": [
"shallowequal",