From 2d488c1f02055af5c47c8578b20d4594088d4e25 Mon Sep 17 00:00:00 2001
From: Wojciech Maj <kontakt@wojtekmaj.pl>
Date: Tue, 14 May 2024 11:27:33 +0200
Subject: [PATCH] Improve Turbopack compatibility, update docs on Turbopack

---
 packages/react-pdf/README.md      | 25 +++++++++++++++++++++++--
 sample/next-app/empty-module.ts   |  1 +
 sample/next-app/next.config.js    | 13 +++++++++++++
 sample/next-pages/empty-module.ts |  1 +
 sample/next-pages/next.config.js  | 13 +++++++++++++
 5 files changed, 51 insertions(+), 2 deletions(-)
 create mode 100644 sample/next-app/empty-module.ts
 create mode 100644 sample/next-pages/empty-module.ts

diff --git a/packages/react-pdf/README.md b/packages/react-pdf/README.md
index ea8b4bb7c..b9dd4461d 100644
--- a/packages/react-pdf/README.md
+++ b/packages/react-pdf/README.md
@@ -74,7 +74,7 @@ Add React-PDF to your project by executing `npm install react-pdf` or `yarn add
 
 #### Next.js
 
-If you use Next.js, you may need to add the following to your `next.config.js`:
+If you use Next.js without Turbopack enabled, add the following to your `next.config.js`:
 
 ```diff
 module.exports = {
@@ -86,6 +86,27 @@ module.exports = {
 }
 ```
 
+If you use Next.js with Turbopack enabled, add `empty-module.ts` file:
+
+```ts
+export default {};
+```
+
+and add the following to your `next.config.js`:
+
+````diff
+
+module.exports = {
++ experimental: {
++   turbo: {
++     resolveAlias: {
++       canvas: './empty-module.ts',
++     },
++   },
++ },
+};
+```
+
 ### Configure PDF.js worker
 
 For React-PDF to work, PDF.js worker needs to be provided. You have several options.
@@ -101,7 +122,7 @@ pdfjs.GlobalWorkerOptions.workerSrc = new URL(
   'pdfjs-dist/build/pdf.worker.min.js',
   import.meta.url,
 ).toString();
-```
+````
 
 > **Note**
 > In Next.js:
diff --git a/sample/next-app/empty-module.ts b/sample/next-app/empty-module.ts
new file mode 100644
index 000000000..cb0ff5c3b
--- /dev/null
+++ b/sample/next-app/empty-module.ts
@@ -0,0 +1 @@
+export {};
diff --git a/sample/next-app/next.config.js b/sample/next-app/next.config.js
index aa0e1b6f7..92157b19b 100644
--- a/sample/next-app/next.config.js
+++ b/sample/next-app/next.config.js
@@ -1,5 +1,18 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {
+  experimental: {
+    turbo: {
+      resolveAlias: {
+        // Turbopack does not support standard ESM import paths yet
+        './Sample.js': './app/Sample.tsx',
+        /**
+         * Critical: prevents " ⨯ ./node_modules/canvas/build/Release/canvas.node
+         * Module parse failed: Unexpected character '�' (1:0)" error
+         */
+        canvas: './empty-module.ts',
+      },
+    },
+  },
   webpack: (config) => {
     /**
      * Critical: prevents " ⨯ ./node_modules/canvas/build/Release/canvas.node
diff --git a/sample/next-pages/empty-module.ts b/sample/next-pages/empty-module.ts
new file mode 100644
index 000000000..cb0ff5c3b
--- /dev/null
+++ b/sample/next-pages/empty-module.ts
@@ -0,0 +1 @@
+export {};
diff --git a/sample/next-pages/next.config.js b/sample/next-pages/next.config.js
index aa0e1b6f7..a76a8e99e 100644
--- a/sample/next-pages/next.config.js
+++ b/sample/next-pages/next.config.js
@@ -1,5 +1,18 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {
+  experimental: {
+    turbo: {
+      resolveAlias: {
+        // Turbopack does not support standard ESM import paths yet
+        './Sample.js': './pages/Sample.tsx',
+        /**
+         * Critical: prevents " ⨯ ./node_modules/canvas/build/Release/canvas.node
+         * Module parse failed: Unexpected character '�' (1:0)" error
+         */
+        canvas: './empty-module.ts',
+      },
+    },
+  },
   webpack: (config) => {
     /**
      * Critical: prevents " ⨯ ./node_modules/canvas/build/Release/canvas.node