diff --git a/test/e2e/react-dnd-compile/next.config.js b/test/e2e/react-dnd-compile/next.config.js
new file mode 100644
index 0000000000000..6b0a63a93f620
--- /dev/null
+++ b/test/e2e/react-dnd-compile/next.config.js
@@ -0,0 +1,7 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  reactStrictMode: true,
+  transpilePackages: ['@react-dnd/invariant'],
+}
+
+module.exports = nextConfig
diff --git a/test/e2e/react-dnd-compile/pages/DragDropProvider.js b/test/e2e/react-dnd-compile/pages/DragDropProvider.js
new file mode 100644
index 0000000000000..81c743af9c294
--- /dev/null
+++ b/test/e2e/react-dnd-compile/pages/DragDropProvider.js
@@ -0,0 +1,34 @@
+import * as React from 'react'
+import { createDragDropManager } from 'dnd-core'
+import { HTML5Backend } from 'react-dnd-html5-backend'
+import { DndContext } from 'react-dnd'
+
+let dndHTML5BackendContext = null
+
+function getOrCreateDndContext() {
+  if (dndHTML5BackendContext) {
+    return dndHTML5BackendContext
+  }
+
+  function simpleBackend(manager) {
+    return HTML5Backend(manager)
+  }
+
+  const dndContext = {
+    dragDropManager: createDragDropManager(simpleBackend),
+  }
+
+  dndHTML5BackendContext = dndContext
+
+  return dndContext
+}
+
+export default function DragDropProvider(props) {
+  const dndContextValue = getOrCreateDndContext()
+
+  return (
+    <DndContext.Provider value={dndContextValue}>
+      {props.children}
+    </DndContext.Provider>
+  )
+}
diff --git a/test/e2e/react-dnd-compile/pages/_app.js b/test/e2e/react-dnd-compile/pages/_app.js
new file mode 100644
index 0000000000000..cf06318a0f30f
--- /dev/null
+++ b/test/e2e/react-dnd-compile/pages/_app.js
@@ -0,0 +1,3 @@
+export default function App({ Component, pageProps }) {
+  return <Component {...pageProps} />
+}
diff --git a/test/e2e/react-dnd-compile/pages/index.js b/test/e2e/react-dnd-compile/pages/index.js
new file mode 100644
index 0000000000000..6d312c3fb6ece
--- /dev/null
+++ b/test/e2e/react-dnd-compile/pages/index.js
@@ -0,0 +1,3 @@
+export default function Page() {
+  return <h1 id="index-page-title">Hello, Next.js!</h1>
+}
diff --git a/test/e2e/react-dnd-compile/pages/oom.js b/test/e2e/react-dnd-compile/pages/oom.js
new file mode 100644
index 0000000000000..ea1301b91f7f5
--- /dev/null
+++ b/test/e2e/react-dnd-compile/pages/oom.js
@@ -0,0 +1,9 @@
+import DragDropProvider from './DragDropProvider'
+
+export default function Page() {
+  return (
+    <DragDropProvider>
+      <h1 id="oom-page-title">Hello, Next.js!</h1>
+    </DragDropProvider>
+  )
+}
diff --git a/test/e2e/react-dnd-compile/react-dnd-compile.test.ts b/test/e2e/react-dnd-compile/react-dnd-compile.test.ts
new file mode 100644
index 0000000000000..339237974bf8b
--- /dev/null
+++ b/test/e2e/react-dnd-compile/react-dnd-compile.test.ts
@@ -0,0 +1,26 @@
+import { createNextDescribe } from 'e2e-utils'
+
+createNextDescribe(
+  'react-dnd-compile',
+  {
+    files: __dirname,
+    dependencies: {
+      '@react-dnd/asap': '^5.0.1',
+      '@react-dnd/invariant': '^4.0.2',
+      'dnd-core': '14.0.1',
+      'react-dnd': '^16.0.1',
+      'react-dnd-html5-backend': '^16.0.1',
+    },
+  },
+  ({ next }) => {
+    it('should work', async () => {
+      const $ = await next.render$('/')
+      expect($('#index-page-title').text()).toBe('Hello, Next.js!')
+    })
+
+    it('should work on react-dnd import page', async () => {
+      const $ = await next.render$('/oom')
+      expect($('#oom-page-title').text()).toBe('Hello, Next.js!')
+    })
+  }
+)