江阴网站建设,江阴网站制作,江阴网站设计,江阴SEO优化,江阴小程序开发-江阴雨辰互联

  1. JustNews 首页
  2. questions

javascript - Module not found: Error: Can't resolve 'fs' in 'usrsrcappnode_modulesjpeg-exiflib&a

admin••questions•阅读0

When building a react app on production getting Error Module not found: Error: Can't resolve '

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 mand in Docker Production npm install --legacy-peer-deps npm run build

package.json file

"name": "dcts-client",
"version": "0.1.0",
"private": true,
"homepage": "emerce",
"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-ponent": "^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-ponents": "^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=/ && react-scripts build",
"build:testing": "export REACT_APP_API_ENDPOINT_BASE_URL=/api REACT_APP_API_ENDPOINT_REDIRECT_URL=/ && 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/emerce

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/${PAYTRACE_URL}/g" /usr/src/app/emerce/public/index.html

RUN export REACT_APP_API_ENDPOINT_BASE_URL=/em-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-emerce /usr/src/app/emerce/build/ /usr/share/nginx/html/emerce

COPY ./docker-entrypoint.sh /

RUN chmod +x /docker-entrypoint.sh

ENTRYPOINT ["/docker-entrypoint.sh"]

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

EXPOSE 80

Unexpected behavior

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 mand in Docker Production npm install --legacy-peer-deps npm run build

package.json file

"name": "dcts-client",
"version": "0.1.0",
"private": true,
"homepage": "emerce",
"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-ponent": "^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-ponents": "^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./ && 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./ && 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/emerce

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./${PAYTRACE_URL}/g" /usr/src/app/emerce/public/index.html

RUN export REACT_APP_API_ENDPOINT_BASE_URL=/em-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-emerce /usr/src/app/emerce/build/ /usr/share/nginx/html/emerce

COPY ./docker-entrypoint.sh /

RUN chmod +x /docker-entrypoint.sh

ENTRYPOINT ["/docker-entrypoint.sh"]

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

EXPOSE 80

Unexpected behavior

  • javascript
  • reactjs
Share Improve this question asked Jan 21, 2024 at 15:48 Vishal SajwanVishal Sajwan 1191 silver badge4 bronze badges 1
  • Environment variables should be set using the ENV instruction, not the export mand, since export is a shell used to define environment variables in a shell session, but it doesn't work in a Dockerfile. ENV REACT_APP_API_ENDPOINT_BASE_URL=/em-api and ENV REACT_APP_API_ENDPOINT_REDIRECT_URL=${REDIRECT_URL}. Lastly, do RUN npm run build -- --profile – Keyboard Corporation Commented Jan 22, 2024 at 6:45
Add a ment  | 

5 Answers 5

Reset to default 4

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/@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/@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/@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/@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/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/@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-patible-readable-stream": "^3.6.1"
  }
},
"node_modules/@react-pdf/png-js": {
  "version": "2.2.0",
  "resolved": "https://registry.npmjs/@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/@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/@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/@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/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/@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/@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/@react-pdf/types/-/types-2.3.1.tgz",
  "integrity": "sha512-FiwAsNp2oQ2W39xAU1PCjY6YNjEuypQykEA6VMz4WZ4ERvyOBB4M5B8063lA8YYBcjYB8xQOa9og4UH1eqMbgg=="
},
"node_modules/@react-pdf/yoga": {
  "version": "4.1.2",
  "resolved": "https://registry.npmjs/@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

This issue is related to an internal dependency, not to the @react-pdf/renderer package itself. So even downgrading it won't solve it because it's from a minor version and due to ranged versioning, package managers will automatically install the latest minor and patch version of the related internal dependency. Being fixed. See the ments of the main maintainer about the issue : https://github./diegomura/react-pdf/issues/2541#issuement-1903877355 https://github./diegomura/react-pdf/issues/2535#issuement-1907093794

For the time being here are some workarounds:

  • Yarn
// package.json

"resolutions": {
    "@react-pdf/image": "2.2.3",
    "@react-pdf/pdfkit": "3.0.4"
 }
  • Pnpm
// package.json

"pnpm": {
    "overrides": {
        "@react-pdf/image": "2.2.3",
        "@react-pdf/pdfkit": "3.0.4"
        }
},
  • Npm
// package.json

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

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": "emerce",
  "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.

If you don't want to upload package-lock.json or using npm config set package-lock false, you can try this.

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.

I encountered to this issue as well. After i checked yarn.lock i saw that dependencies of @react-pdf/[email protected] were automatically updated and had jpeg-exif as their dependency (wasn't before) that caused this error. To resolve this issue, I added the previous versions to the package.json file using the as below, which allowed me to override their versions with the previous stable version.

-Yarn

// package.json
    {
        "dependencies": {
            // ... your dependencies
        },
        "resolutions": {
            "@react-pdf/layout": "3.6.2",
            "@react-pdf/pdfkit": "3.0.2",
            "@react-pdf/image": "2.2.1"
        },
      ...
    }

-Npm

// package.json
    {
        "dependencies": {
            // ... your dependencies
        },
        "overrides": {
            "@react-pdf/layout": "3.6.2",
            "@react-pdf/pdfkit": "3.0.2",
            "@react-pdf/image": "2.2.1"
        },
      ...
    }

-Pnpm

// package.json
    {
        "dependencies": {
            // ... your dependencies
        },
        "pnpm": {
            "overrides": {
               "@react-pdf/layout": "3.6.2",
               "@react-pdf/pdfkit": "3.0.2",
               "@react-pdf/image": "2.2.1"
             }
        },
      ...
    }

then after modifying package.json rebuild your Dockerfile or Pipeline. WORKED FOR ME, hope it resolves your issue.

发布者：admin，转转请注明出处：http://www.yc00.com/questions/1744101990a4558573.html

adminadmin
0

相关推荐

发表回复

评论列表（0条）

  • 暂无评论

联系我们

400-800-8888

在线咨询： QQ交谈

邮件：admin@example.com

工作时间：周一至周五，9:30-18:30，节假日休息

关注微信