Javascript Question posted in
A very good W3school tutorial can be found here.

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

When building a react app on production getting Error Module not found: Error: Can't resolve 'fs' in '/usr/src/app/node_modules/jpeg-exif/lib'

Node Version
Node version 18

Running command in Docker Production
npm install --legacy-peer-deps
npm run build

package.json file

"name": "dcts-client",
"version": "0.1.0",
"private": true,
"homepage": "ecommerce",
"dependencies": {
"@emotion/react": "^11.10.0",
"@emotion/styled": "^11.10.0",
"@fortawesome/fontawesome-svg-core": "^6.1.2",
"@fortawesome/free-brands-svg-icons": "^6.1.2",
"@fortawesome/free-solid-svg-icons": "^6.1.2",
"@fortawesome/react-fontawesome": "^0.2.0",
"@hookform/error-message": "^2.0.0",
"@mui/icons-material": "^5.11.0",
"@mui/material": "^5.10.2",
"@mui/x-date-pickers": "^5.0.0",
"@react-pdf/renderer": "^3.0.1",
"@testing-library/jest-dom": "^5.16.5",
"@testing-library/react": "^13.3.0",
"@testing-library/user-event": "^13.5.0",
"axios": "^0.27.2",
"bootstrap": "^5.2.0",
"card-validator": "^8.1.1",
"cross-domain-storage": "^2.0.7",
"dayjs": "^1.11.5",
"env-cmd": "^10.1.0",
"js-cookie": "^3.0.1",
"lodash.isequal": "^4.5.0",
"payment": "^2.4.6",
"query-string": "^7.1.1",
"react": "^18.2.0",
"react-bootstrap": "^2.5.0",
"react-confirm-alert": "^3.0.6",
"react-credit-cards": "^0.8.3",
"react-csv": "^2.2.2",
"react-data-table-component": "^7.5.3",
"react-datepicker": "^4.8.0",
"react-dom": "^18.2.0",
"react-hook-form": "^7.36.1",
"react-input-range": "^1.3.0",
"react-medium-image-zoom": "^5.0.2",
"react-phone-input-2": "^2.15.1",
"react-router-dom": "^6.3.0",
"react-scripts": "^5.0.1",
"react-select": "^5.5.9",
"react-slick": "^0.29.0",
"react-to-print": "^2.14.8",
"react-toastify": "^9.0.8",
"simplebar-react": "^2.4.1",
"slick-carousel": "^1.8.1",
"styled-components": "^5.3.6",
"web-vitals": "^2.1.4"
},
"scripts": {
"start": "set PORT=3000 && react-scripts start",
"build": "react-scripts build",
"build:production": "set REACT_APP_API_ENDPOINT_BASE_URL=/api && set REACT_APP_API_ENDPOINT_REDIRECT_URL=http://alb-dct-prd-1561780064.us-east-2.elb.amazonaws.com/ && react-scripts build",
"build:testing": "export REACT_APP_API_ENDPOINT_BASE_URL=/api REACT_APP_API_ENDPOINT_REDIRECT_URL=http://dctalb-1569668697.us-east-2.elb.amazonaws.com/ && react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}

docker File


WORKDIR /usr/src/app/ecommerce

ARG PAYTRACE_URL

ARG REDIRECT_URL

COPY ./DCT-ECOMMERCE/package.json ./

RUN npm install --legacy-peer-deps

COPY ./DCT-ECOMMERCE .

RUN sed -i "s/protect.sandbox.paytrace.com/${PAYTRACE_URL}/g" /usr/src/app/ecommerce/public/index.html

RUN export REACT_APP_API_ENDPOINT_BASE_URL=/ecomm-api REACT_APP_API_ENDPOINT_REDIRECT_URL=${REDIRECT_URL} && npm run build -- --profile

FROM nginx:1.24.0-alpine

COPY ./ngnix/nginx-default.conf.template /etc/nginx/conf.d/default.conf.template
COPY --from=build-ecommerce /usr/src/app/ecommerce/build/ /usr/share/nginx/html/ecommerce

COPY ./docker-entrypoint.sh /

RUN chmod +x /docker-entrypoint.sh

ENTRYPOINT ["/docker-entrypoint.sh"]

CMD ["nginx", "-g", "daemon off;"]

EXPOSE 80

Unexpected behavior

enter image description here

Tags:

3

Answers


  1. 0

    Based on the error message, "Module not found: Error: Can’t resolve ‘fs’ in ‘/usr/src/app/node_modules/jpeg-exif/lib’", and your provided package.json, it seems you have a FE project designed for browser environments. The error indicates that jpeg-exif is trying to use Node.js‘s fs module, which isn’t available in browsers.

    To resolve this, consider adding a browser: { fs: false } setting in your package.json. This tells the bundler (like Webpack or Browserify) to ignore fs module references for browser builds. Add this to your package.json:

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

    Alternatively, if you’re using a build tool like Webpack in react-scripts, modify its configuration:

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

  resolve: {
    fallback: {
      fs: false // This line is added to handle 'fs' module for browser
    }
  }
};

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

    Login or Signup to reply.
  2. 0

    I have the same issue, for me its because @react-pdf/renderer
    So i’m uninstalling @react-pdf/renderer, and then add again manually
    in package.json

    "dependencies": {

  "@react-pdf/renderer": "^3.1.9",
},

    then go to package-lock.json and add this

        "node_modules/@react-pdf/fns": {
  "version": "2.0.1",
  "resolved": "https://registry.npmjs.org/@react-pdf/fns/-/fns-2.0.1.tgz",
  "integrity": "sha512-/vgecczzFYBQFkgUupH+sxXhLWQtBwdwCgweyh25XOlR4NZuaMD/UVUDl4loFHhRQqDMQq37lkTcchh7zzW6ug==",
  "dependencies": {
    "@babel/runtime": "^7.20.13"
  }
},
"node_modules/@react-pdf/font": {
  "version": "2.3.4",
  "resolved": "https://registry.npmjs.org/@react-pdf/font/-/font-2.3.4.tgz",
  "integrity": "sha512-ICvVH0GW3kgocxVfE0mFY3EcnAoxRolkOfhPCfLu8mRbwJaHRiKX5+8SRKbPADZNdHrF9ngt4LpUxThy+bdZXg==",
  "dependencies": {
    "@babel/runtime": "^7.20.13",
    "@react-pdf/types": "^2.3.1",
    "cross-fetch": "^3.1.5",
    "fontkit": "^2.0.2",
    "is-url": "^1.2.4"
  }
},
"node_modules/@react-pdf/image": {
  "version": "2.2.1",
  "resolved": "https://registry.npmjs.org/@react-pdf/image/-/image-2.2.1.tgz",
  "integrity": "sha512-f0+cEP6pSBmk8eS/wP2tMsJcv2c7xjzca6cr1kwcapr1nzkPrh6fMdEeFl6kR2/HlJK/JoHo+xxlzRiQ8V2lrw==",
  "dependencies": {
    "@babel/runtime": "^7.20.13",
    "@react-pdf/png-js": "^2.2.0",
    "cross-fetch": "^3.1.5"
  }
},
"node_modules/@react-pdf/layout": {
  "version": "3.6.0",
  "resolved": "https://registry.npmjs.org/@react-pdf/layout/-/layout-3.6.0.tgz",
  "integrity": "sha512-xrcVWxtXpobW0iqTd8OmMCVMmeGUM46PYq7B1MGR1fI1QG/EKe4HzFdhSdd0werZYj+t1TRC8+tVSX5POs5SYA==",
  "dependencies": {
    "@babel/runtime": "^7.20.13",
    "@react-pdf/fns": "2.0.1",
    "@react-pdf/image": "^2.2.1",
    "@react-pdf/pdfkit": "^3.0.2",
    "@react-pdf/primitives": "^3.0.0",
    "@react-pdf/stylesheet": "^4.1.5",
    "@react-pdf/textkit": "^4.2.0",
    "@react-pdf/types": "^2.3.1",
    "@react-pdf/yoga": "^4.1.2",
    "cross-fetch": "^3.1.5",
    "emoji-regex": "^10.2.1",
    "queue": "^6.0.1"
  }
},
"node_modules/@react-pdf/layout/node_modules/emoji-regex": {
  "version": "10.2.1",
  "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-10.2.1.tgz",
  "integrity": "sha512-97g6QgOk8zlDRdgq1WxwgTMgEWGVAQvB5Fdpgc1MkNy56la5SKP9GsMXKDOdqwn90/41a8yPwIGk1Y6WVbeMQA=="
},
"node_modules/@react-pdf/pdfkit": {
  "version": "3.0.2",
  "resolved": "https://registry.npmjs.org/@react-pdf/pdfkit/-/pdfkit-3.0.2.tgz",
  "integrity": "sha512-+m5rwNCwyEH6lmnZWpsQJvdqb6YaCCR0nMWrc/KKDwznuPMrGmGWyNxqCja+bQPORcHZyl6Cd/iFL0glyB3QGw==",
  "dependencies": {
    "@babel/runtime": "^7.20.13",
    "@react-pdf/png-js": "^2.2.0",
    "browserify-zlib": "^0.2.0",
    "crypto-js": "^4.0.0",
    "fontkit": "^2.0.2",
    "vite-compatible-readable-stream": "^3.6.1"
  }
},
"node_modules/@react-pdf/png-js": {
  "version": "2.2.0",
  "resolved": "https://registry.npmjs.org/@react-pdf/png-js/-/png-js-2.2.0.tgz",
  "integrity": "sha512-csZU5lfNW73tq7s7zB/1rWXGro+Z9cQhxtsXwxS418TSszHUiM6PwddouiKJxdGhbVLjRIcuuFVa0aR5cDOC6w==",
  "dependencies": {
    "browserify-zlib": "^0.2.0"
  }
},
"node_modules/@react-pdf/primitives": {
  "version": "3.0.1",
  "resolved": "https://registry.npmjs.org/@react-pdf/primitives/-/primitives-3.0.1.tgz",
  "integrity": "sha512-0HGcknrLNwyhxe+SZCBL29JY4M85mXKdvTZE9uhjNbADGgTc8wVnkc5+e4S/lDvugbVISXyuIhZnYwtK9eDnyQ=="
},
"node_modules/@react-pdf/render": {
  "version": "3.2.4",
  "resolved": "https://registry.npmjs.org/@react-pdf/render/-/render-3.2.4.tgz",
  "integrity": "sha512-lnef097Dx2vHKpY9OHHNmV+nsG5vpd33h76tCzdlbijj+TyVm1j7ZQ5qadGq1uMOFAU6lp0hEo7VoDk7XnjmFw==",
  "dependencies": {
    "@babel/runtime": "^7.20.13",
    "@react-pdf/fns": "2.0.1",
    "@react-pdf/primitives": "^3.0.0",
    "@react-pdf/textkit": "^4.2.0",
    "@react-pdf/types": "^2.3.1",
    "abs-svg-path": "^0.1.1",
    "color-string": "^1.5.3",
    "normalize-svg-path": "^1.1.0",
    "parse-svg-path": "^0.1.2",
    "svg-arc-to-cubic-bezier": "^3.2.0"
  }
},
"node_modules/@react-pdf/renderer": {
  "version": "3.1.9",
  "resolved": "https://registry.npmjs.org/@react-pdf/renderer/-/renderer-3.1.9.tgz",
  "integrity": "sha512-kfEH7O+Jy7aihbUqrT9Ej1gx8/twRWvFMfHlACr29QsN+s+w0XzWpHCvbjkinVFABYcvsenluiirik6mf4qwRQ==",
  "dependencies": {
    "@babel/runtime": "^7.20.13",
    "@react-pdf/font": "^2.3.4",
    "@react-pdf/layout": "^3.6.0",
    "@react-pdf/pdfkit": "^3.0.2",
    "@react-pdf/primitives": "^3.0.0",
    "@react-pdf/render": "^3.2.4",
    "@react-pdf/types": "^2.3.1",
    "events": "^3.3.0",
    "object-assign": "^4.1.1",
    "prop-types": "^15.6.2",
    "queue": "^6.0.1",
    "scheduler": "^0.17.0"
  },
  "peerDependencies": {
    "react": "^16.8.6 || ^17.0.0 || ^18.0.0"
  }
},
"node_modules/@react-pdf/renderer/node_modules/scheduler": {
  "version": "0.17.0",
  "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.17.0.tgz",
  "integrity": "sha512-7rro8Io3tnCPuY4la/NuI5F2yfESpnfZyT6TtkXnSWVkcu0BCDJ+8gk5ozUaFaxpIyNuWAPXrH0yFcSi28fnDA==",
  "dependencies": {
    "loose-envify": "^1.1.0",
    "object-assign": "^4.1.1"
  }
},
"node_modules/@react-pdf/stylesheet": {
  "version": "4.1.5",
  "resolved": "https://registry.npmjs.org/@react-pdf/stylesheet/-/stylesheet-4.1.5.tgz",
  "integrity": "sha512-8sP+4KD3cAfBEsZBQeJC7GUC0vkCLiAc6kZaGX0dXaBR3nZO2TaCD8+ZuezokZi+ARp/yvWJqR2vIX8ra7X1xA==",
  "dependencies": {
    "@babel/runtime": "^7.20.13",
    "@react-pdf/fns": "2.0.1",
    "@react-pdf/types": "^2.3.1",
    "color-string": "^1.5.3",
    "hsl-to-hex": "^1.0.0",
    "media-engine": "^1.0.3",
    "postcss-value-parser": "^4.1.0"
  }
},
"node_modules/@react-pdf/textkit": {
  "version": "4.2.0",
  "resolved": "https://registry.npmjs.org/@react-pdf/textkit/-/textkit-4.2.0.tgz",
  "integrity": "sha512-R90pEOW6NdhUx4p99iROvKmwB06IRYdXMhh0QcmUeoPOLe64ZdMfs3LZliNUWgI5fCmq71J+nv868i/EakFPDg==",
  "dependencies": {
    "@babel/runtime": "^7.20.13",
    "@react-pdf/fns": "2.0.1",
    "hyphen": "^1.6.4",
    "unicode-properties": "^1.4.1"
  }
},
"node_modules/@react-pdf/types": {
  "version": "2.3.1",
  "resolved": "https://registry.npmjs.org/@react-pdf/types/-/types-2.3.1.tgz",
  "integrity": "sha512-FiwAsNp2oQ2W39xAU1PCjY6YNjEuypQykEA6VMz4WZ4ERvyOBB4M5B8063lA8YYBcjYB8xQOa9og4UH1eqMbgg=="
},
"node_modules/@react-pdf/yoga": {
  "version": "4.1.2",
  "resolved": "https://registry.npmjs.org/@react-pdf/yoga/-/yoga-4.1.2.tgz",
  "integrity": "sha512-OlMZkFrJDj4GyKZ70thiObwwPVZ52B7mlPyfzwa+sgwsioqHXg9nMWOO+7SQFNUbbOGagMUu0bCuTv+iXYZuaQ==",
  "dependencies": {
    "@babel/runtime": "^7.20.13"
  }
},

    then on terminal

    npm i --legacy-peer-deps
    Login or Signup to reply.
  3. 0

    I think is because of inside your @react-pdf/renderer package.json
    dependencies is using ^x.x.x in @react-pdf/pdfkit and @react-pdf/image (You can check by package-lock.json), so the version is not same as before.
    Try add "@react-pdf/pdfkit": "3.0.0" and "@react-pdf/image": "2.3.0" in your package.json and remove node_modules to reinstall. (You might check the version of @react-pdf/image and @react-pdf/pdfkit have no jpeg-exif in their package.json)

    And use npm install --legacy-peer-deps might solve your problem.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search