[Fixed] Module not found: Error: Can't resolve 'fs' in '/usr/src/app/node_modules/jpeg-exif/lib' – Javascript

The Problem:

When building a React application in a production environment using Docker, the error Module not found: Error: Can't resolve 'fs' in '/usr/src/app/node_modules/jpeg-exif/lib' occurs during the build process. This issue arises specifically when running the npm run build command, hindering the deployment of the application.

The Solutions:

Solution 1: Residual Package Issue Fix

Title: Fix Residual Package Issue

Solution:

To resolve the "Module not found: Error: Can’t resolve ‘fs’ in ‘/usr/src/app/node_modules/jpeg-exif/lib’" error, follow these steps:

1. Open your package.json file and locate the "@react-pdf/renderer" dependency.

2. Uninstall "@react-pdf/renderer" from your project using the command:

npm uninstall @react-pdf/renderer

3. Add "@react-pdf/renderer" back to your package.json file manually, ensuring that you specify a specific version. For example:

{
  "dependencies": {
    "@react-pdf/renderer": "^3.1.9"
  }
}

4. Open your package-lock.json file and locate the entries related to "@react-pdf/renderer" and its dependencies.

5. Copy the "version" and "resolved" fields for each of these entries and add them manually to your package-lock.json file, ensuring that the versions match the ones you specified in package.json.

6. Save the package-lock.json file.

7. Run the following command to install the dependencies:

npm install --legacy-peer-deps

This should resolve the issue and allow you to build your React app successfully. The specific version of "@react-pdf/renderer" that you specify may vary depending on your project’s requirements.

Solution 2: Overriding Internal Dependencies

This issue is primarily related to an internal dependency, not to the @react-pdf/renderer package itself. It arises due to an internal dependency that is not handled correctly. The problem is beyond the scope of the @react-pdf/renderer package and stems from a minor version update and ranged versioning.

Even downgrading @react-pdf/renderer may not resolve the issue, as the package managers would automatically install the latest minor and patch versions of the related internal dependency, perpetuating the problem.

To address this issue, you can employ the following workarounds:

Yarn

Add the following to your package.json file:

// package.json

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

Pnpm

Add the following to your package.json file:

// package.json

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

Npm

Add the following to your package.json file:

// package.json

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

By implementing one of these workarounds, you can override the version of the internal dependency, effectively resolving the issue.

Solution 3: Adjust Your Build Configuration

Based on the error message, “Module not found: Error: Can’t resolve ‘fs’ in ‘/usr/src/app/node_modules/jpeg-exif/lib'”, it seems that your frontend project, designed for browser environments, is trying to use Node.js’s `fs` module, which is unavailable in browsers. To resolve this issue, you can make changes to your build configuration:

package.json modification:

In your package.json file, add the following lines to ignore `fs` module references for browser builds:

{
  "name": "dcts-client",
  "version": "0.1.0",
  "private": true,
  "homepage": "ecommerce",
  "dependencies": {
    // ... your dependencies
  },
  "browser": {
    "fs": false
  }
}

Webpack configuration adjustment:

If you’re using a build tool like Webpack, modify its configuration as follows:

module.exports = {
  // ... other configuration settings ...

  resolve: {
    fallback: {
      fs: false // This line handles the 'fs' module for browsers
    }
  }
};

Rebuild your project:

After making these changes, rebuild your project to check if the issue is resolved.

Additional considerations:

• Ensure that your build tool is correctly configured to handle browser-specific dependencies.
• If you’re using a library that relies on Node.js modules, verify if it provides a browser-compatible version or alternative.
• Alternatively, you might consider using a headless browser or a Node.js-based server-side rendering solution to handle file system operations.

By adjusting your build configuration and considering these points, you should be able to resolve the “Module not found: Error: Can’t resolve ‘fs’ in ‘/usr/src/app/node_modules/jpeg-exif/lib'” error.

Solution 4: Legacy peer dependency installation

If you are unable to upload the `package-lock.json` file or disable it using `npm config set package-lock false`, you can try the following solution:

1. Inside your `@react-pdf/renderer` package.json file, check the dependencies for `@react-pdf/pdfkit` and `@react-pdf/image`. Often, these dependencies will have a version range specified using `^x.x.x`, which can lead to different versions being installed compared to your previous setup. To ensure consistency, explicitly specify the versions of these dependencies in your package.json file, such as:

"@react-pdf/pdfkit": "3.0.0",
"@react-pdf/image": "2.3.0",

Replace the versions with the appropriate ones based on your requirements.

2. Delete the `node_modules` directory to remove any existing installations.

3. Run the following command to reinstall the dependencies, including the legacy peer dependencies:

npm install --legacy-peer-deps

This should resolve the issue caused by the missing `fs` module in the `jpeg-exif` package.

Video Explanation: