jpeg-exif: can't resolve 'fs'

[arobert93]

Describe the bug

./node_modules/.pnpm/jpeg-exif@1.1.4/node_modules/jpeg-exif/lib/index.js:3:10
Module not found: Can't resolve 'fs'

https://nextjs.org/docs/messages/module-not-found

Import trace for requested module:
./node_modules/.pnpm/@react-pdf+pdfkit@3.1.1/node_modules/@react-pdf/pdfkit/lib/pdfkit.browser.js
./node_modules/.pnpm/@react-pdf+renderer@3.3.0_react@18.2.0/node_modules/@react-pdf/renderer/lib/react-pdf.browser.js
./src/components/core/pdf-viewer.tsx

To Reproduce

// page.tsx

import * as React from 'react';

import { config } from '@/config';
import { PDFViewer } from '@/components/core/pdf-viewer';

export default function Page(): React.JSX.Element {
  return (
    <PDFViewer>
      {/* Document here */}
    </PDFViewer>
  );
}

/// pdf-viewer.tsx

'use client';

import dynamic from 'next/dynamic';
import type ReactPDF from '@react-pdf/renderer';

export const PDFViewer = dynamic<ReactPDF.PDFViewerProps>(
  () => import('@react-pdf/renderer').then((m) => m.PDFViewer),
  {
    ssr: false,
    loading: () => null,
  }
);

Expected behavior
I expect it to not use any Node.js functions because if I remove the use client I get this error:

Error: PDFViewer is a web specific API. You're either using this component on Node, or your bundler is not loading react-pdf from the appropriate web build.

Screenshots

Desktop (please complete the following information):

• OS: MacOS
• Browser: -
• React-pdf version: v3.3.0

[genius-autos-admin]

I have the same issue. It only started today. I'm also using "@react-pdf/renderer": "3.1.9"

[mcewball13]

I have the same issue that also started today or just super recently. When I try to build, I get that error. I'm using 3.1.14

[arobert93]

Everybody who's using this in Next.js app dir will have this issue because the bug was introduced in an internal dependency, not in the renderer package. Even downgrading isn't an option because it's a minor version and package managers will install automatically the latest minor (and patch) version of pdfkit.

[mcewball13]

Yeah, I was trying to track down the dep that was just recently updated to see if I could find it, but I couldn't find it. It says the issue is with jpeg-exif, but that package hasn't been updated in a million years.

Everybody who's using this in Next.js app dir will have this issue because the bug was introduced in an internal dependency, not in the renderer package. Even downgrading isn't an option because it's a minor version and package managers will install automatically the latest minor (and patch) version of pdfkit.

[mcewball13]

I copied the contents of my yarn.lock file from a commit where I could build. I found that jpeg-exif was introduced at some point in the versioning. My working build has no reference to jpeg-exit anywhere in the yarn.lock file at all. Here are some examples of the downgrade.

[airtonix]

as a work around both yarn@4 and pnpm should be able to provide you a way to override the version of any transient dependancy you feel like you've no control over:

• https://pnpm.io/package_json#pnpmoverrides
• https://yarnpkg.com/configuration/manifest#resolutions

[genius-autos-admin]

i found that you can add craco to override the node modules and it works with both start and build.

1. add craco using yarn add @craco/craco
2. add craco.config.js file into the root of your project.

module.exports = {
webpack: {
configure: (webpackConfig, { env, paths }) => {
// Customize the webpack configuration here
webpackConfig.resolve.fallback = {
'fs': false,
'os': false,
'path': false,
};
return webpackConfig;
},
},
};

3. update your scripts in package.json file.

   "start": "NODE_OPTIONS='--max-old-space-size=4096' craco start",
   "build": "NODE_OPTIONS='--max-old-space-size=4096' craco build",
   "test": "craco test",
   "eject": "react-scripts eject",

4. Delete yarn lock and node modules.

5. yarn install

6. done

[Taofeeq-deru]

I had the same issue, using just the webpack fallback without craco worked for me.

Just added this to my nextConfig

  webpack5: true,
  webpack: (config) => {
    config.resolve.fallback = { fs: false, os: false, path: false };
    return config;
  },

[farreldarian]

This is working for me

	"dependencies": {
		"@react-pdf/renderer": "^3.3.3",
	},
	"pnpm": {
		"overrides": {
			"@react-pdf/image": "2.2.3",
			"@react-pdf/pdfkit": "3.0.4"
		}
	},

[vasco3]

This works for me as well! thanks
Next.js v14.0.4

This is working for me

	"dependencies": {
		"@react-pdf/renderer": "^3.3.3",
	},
	"pnpm": {
		"overrides": {
			"@react-pdf/image": "2.2.3",
			"@react-pdf/pdfkit": "3.0.4"
		}
	},

[Suduki]

This seems to have been introduced in a35b1ba

It would be great if you could revert it and not release it in a minor version in the future.

[farce1]

if you are using yarn, you can add to your package.json:

  "resolutions": {
    "@react-pdf/image": "2.2.3",
    "@react-pdf/pdfkit": "3.0.4"
  }

it should work as a workaround for the time being

[Kiborgik]

for npm fix

"overrides": {
		"@react-pdf/image": "2.2.3",
		"@react-pdf/pdfkit": "3.0.4"
	},

but yes, we should wait a fix from author

[diegomura]

Submitted a change in failing lib zhso/jpeg-exif#36

Hopefully will be included soon, otherwise I might need to fork it or find another solution

[Kiborgik]

Submitted a change in failing lib zhso/jpeg-exif#36

Hopefully will be included soon, otherwise I might need to fork it or find another solution

it has 2y ago last commit and owner has last commit at April, looks like create you own modern version of this will be better solution. Thank you for fast responding!

[diegomura]

I still need to give him a chance

[ThomasRedstone]

If jpeg-exif is stable there's absolutely no reason to be jumping to fork it right away.

The fact that it's had a total of 9 issues in its life, and this is one of them, suggests it's a tightly scoped package that does a good job (though it's only recently that the number of installs has jumped up!)

[diegomura]

Agree @ThomasRedstone ! That lib does way more that what it's used for in here though. So if my PR does not get reviewed in time I might just port the only bit we need to pdfkit (both our fork and the original repo). Can't be halted forever. As said above I still want to give it a chance

[sebastiannoguera]

any solve?

[felipehv]

@diegomura no creo que sea buena idea que utilices una librería sin mantenimiento desde 2019, y con 12 estrellas en github, le bajas el nivel a esta tremenda librería que es react-pdf.
Lo más razonable en mi opinión es que hagas el fork o agregues el código que uses directamente dentro de la tuya, así no disminuyes la mantenibilidad de react-pdf.

Abrazo

[diegomura]

@felipehv gracias por el feedback. Esta libreria la usa pdfkit desde hace ya un tiempo. Si quiero eventualmente usar el proyecto original (lo cual es deseable) tengo que lentamente solucionar las diferencias. El hecho de que no se mantenga desde el 2019 o mucho menos las estrellas que tenga no hace una libreria mejor o peor. En este caso lo importante es simplemente que utiliza una dependencia de Node que no vi al integrarlo

[satu-jovanhartono]

up up

[IIlllllII]

This works for me as well! thanks Next.js v14.0.4

This is working for me

	"dependencies": {
		"@react-pdf/renderer": "^3.3.3",
	},
	"pnpm": {
		"overrides": {
			"@react-pdf/image": "2.2.3",
			"@react-pdf/pdfkit": "3.0.4"
		}
	},

I tried this workaround and it works fine in development mode, but I got this error when attempting to run pnpm build:

Attempted import error: 'Text' is not exported from '@react-pdf/renderer' (imported as 'Text').

(Likewise with other components I used: View, Page, Image, BlobProvider)

My dependencies:

"next": "14.0.2",
"@react-pdf/renderer": "^3.3.3",

[kepope3]

I'm using react-pdf in a library and using rollup to build it, all users of the library are facing the same error (Module not found: Error: Can't resolve 'fs'). I'm using rollup, any ideas if I can fix the issue? Can I add something in the rollup config?

Listed below:

import resolve from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';
import typescript from '@rollup/plugin-typescript';
import { terser } from 'rollup-plugin-terser';
import external from 'rollup-plugin-peer-deps-external';
import postcss from 'rollup-plugin-postcss';
import dts from 'rollup-plugin-dts';
import image from '@rollup/plugin-image';
import babel from '@rollup/plugin-babel';
import svgr from '@svgr/rollup';
import pkg from './package.json';
import copy from 'rollup-plugin-copy';
import url from '@rollup/plugin-url';
import json from '@rollup/plugin-json';

export default [
  {
    input: 'src/index-rollup.ts',
    external: ['@react-pdf/renderer', '@datapunt/matomo-tracker-js'],
    output: [
      {
        file: pkg.main,
        format: 'cjs',
        sourcemap: true,
        name: 'react-ts-lib'
      },
      {
        file: pkg.module,
        format: 'esm',
        sourcemap: true
      }
    ],
    plugins: [
      external(),
      resolve(),
      commonjs(),
      typescript({ tsconfig: './tsconfig.json' }),
      babel({
        exclude: [
          'node_modules/**',
          'node_modules/@datapunt/matomo-tracker-js/**'
        ],
        babelHelpers: 'bundled'
      }),
      image(),
      svgr({ icon: true }),
      postcss(),
      terser(),
      json(),
      url({
        limit: 150000,
        include: ['**/*.ttf', '**/*.woff', '**/*.woff2'],
        emitFiles: true
      }),
      copy({
        targets: [{ src: 'src/assets/*', dest: 'dist/esm/assets' }]
      })
    ]
  },
  {
    input: 'dist/esm/index-rollup.d.ts',
    output: [{ file: 'dist/index-rollup.d.ts', format: 'esm' }],
    external: [/\.css$/],
    plugins: [dts()]
  }
];

[chandanaswal18]

Issue with exceljs after updating dependencies

I attempted to fix issue by updating dependencies in my project's package.json (we are using npm):
"overrides": {
"@react-pdf/image": "2.2.3",
"@react-pdf/pdfkit": "3.0.4"
}

However, after making these changes, I encountered a new problem with exceljs, resulting in the error: "Uncaught SyntaxError: Invalid or unexpected token (at exceljs.bundle).

This issue is critical as it affects our production build. Can someone please provide guidance or a fix for resolving this?

[SUBstylee]

This works with yarn:

"resolutions": {
    "@react-pdf/image": "2.2.3",
    "@react-pdf/pdfkit": "3.0.4",
    "@react-pdf/layout": "3.5.0"
  },

This may work for npm, however I have not personally tested it:

"overrides": {
    "@react-pdf/image": "2.2.3",
    "@react-pdf/pdfkit": "3.0.4",
    "@react-pdf/layout": "3.5.0"
  },

[dharaneem]

for npm fix

"overrides": {
		"@react-pdf/image": "2.2.3",
		"@react-pdf/pdfkit": "3.0.4"
	},

but yes, we should wait a fix from author

@Kiborgik Thanks, this is working in local , but fails in Azure CI pipeline, Any fix for it?

[arobert93]

@diegomura can you please create your own fork until they respond to your pull request? We are building a software that is installed by developers using either pnpm, yarn, npm or bun. We cannot have a quick fix to match them all.

[klingat]

+1 Experiencing the same issues. Using the resolutions partially works. Was working fine on version 3.1.12