Improve Turbopack compatibility, update docs on Turbopack

wojtekmaj · May 14, 2024 · 2d488c1 · 2d488c1
1 parent 057a928
commit 2d488c1
Show file tree

Hide file tree

Showing 5 changed files with 51 additions and 2 deletions.
diff --git 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
@@ -0,0 +1 @@
+export {};
diff --git 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
@@ -0,0 +1 @@
+export {};
diff --git 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