Improve Turbopack compatibility, update docs on Turbopack

Author: wojtekmaj

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,26 @@ 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.

sample/next-app/empty-module.ts

@@ -0,0 +1 @@
+export {};

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

sample/next-pages/empty-module.ts

@@ -0,0 +1 @@
+export {};

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