Блог

У нас есть приложение NextJS, которое работает в производстве уже пару лет.

Недавно я добавил storybook-addon-pseudo-states аддон, запустил код локально, протестировал и запустил в производство. Приложение отлично работало локально. хотите верьте, хотите нет, но после запуска в производство производство полностью прекратилось из-за этой странной ошибки.

 {"statusCode":500,"code":"MODULE_NOT_FOUND","error":"Internal Server Error","message":"Cannot find module 'react-is'nRequire stack:n- /opt/webapp/node_modules/styled-components/dist/styled-components.cjs.jsn- /opt/webapp/.next/server/pages/_document.jsn- /opt/webapp/node_modules/next/dist/next-server/server/require.jsn- /opt/webapp/node_modules/next/dist/next-server/server/load-components.jsn- /opt/webapp/node_modules/next/dist/next-server/server/api-utils.jsn- /opt/webapp/node_modules/next/dist/next-server/server/next-server.jsn- /opt/webapp/node_modules/next/dist/server/next.jsn- /opt/webapp/server.js"}  

Это наш пакет.json.

 {  "license": "UNLICENSED",  "private": true,  "scripts": {  "dev": "NODE_ENV=development yarn server-remove-types amp;amp; yarn server-watch",  "build": "yarn server-remove-types amp;amp; yarn server-compile amp;amp; yarn server-copy amp;amp; next build",  "server-remove-types": "flow-remove-types --all --pretty src/server --out-dir .untyped/server",  "server-compile": "ncc build .untyped/server/index.js --out .dist --minify --external next --external grpc",  "server-copy": "node ./util/copy.js --from .dist/index.js --to server.js",  "server-watch": "yarn server-watch-remove-types amp; yarn server-watch-compile amp; yarn server-watch-nodemon",  "server-watch-nodemon": "node .dist/index.js",  "server-watch-remove-types": "node util/watch-flow-remove-types.js --from src/server --to .untyped/server",  "server-watch-compile": "yarn server-compile --watch",  "lint-javascript": "eslint src",  "format": "eslint src --fix",  "type-install": "flow-typed install",  "type-upgrade": "flow-typed update",  "type-check": "flow check --color=always --show-all-errors",  "test-unit": "NODE_ENV=test jest --config ./config/jest.unit.config.js --colors",  "test-unit-watch": "yarn test-unit --watchAll --coverage false",  "test-unit-update-snapshots": "yarn test-unit --updateSnapshot",  "test-endpoints": "NODE_ENV=test jest --config ./config/jest.endpoints.config.js src/test/endpoints.spec.js",  "test-bdd": "echo 'Not implemented.'",  "test-contract": "echo 'Not implemented.'",  "test-e2e": "echo 'Not implemented.'",  "test-e2e-debug": "echo 'Not implemented.'",  "storybook": "start-storybook -p 3001",  "build-storybook": "build-storybook -o ./src/stories/storybook"  },  "engines": {  "node": "gt;=12"  },  "browserslist": [  "extends @dpgr/browserslist-config"  ],  "dependencies": {  "@dpgr/browserslist-config": "^1.1.0",  "@dpgr/react-components": "^3.7.0",  "@sentry/browser": "6.10.0",  "@sentry/node": "6.10.0",  "@sentry/tracing": "6.10.0",  "@tippy.js/react": "^2.2.3",  "@vercel/ncc": "^0.31",  "axios": "0.18.1",  "babel-plugin-superjson-next": "^0.3.1",  "chart.js": "^2.9.4",  "chokidar": "^3.3.1",  "color": "^3.1.0",  "convert-array-to-csv": "^1.0.9",  "cookie": "^0.4.0",  "date-fns": "^2.4.1",  "dompurify": "^2.0.2",  "draft-js": "^0.11.0",  "draft-js-export-html": "^1.3.3",  "draft-js-import-html": "^1.3.3",  "fastify": "^2.0.0",  "fastify-cookie": "^3.0.2",  "flow-remove-types": "^2.115.0",  "focus-visible": "^5.0.0",  "formik": "^1.3.2",  "fs": "^0.0.1-security",  "google-protobuf": "^3.14.0",  "grpc": "^1.24.4",  "grpc-web": "^1.2.1",  "http-status-codes": "^1.3.0",  "iban": "^0.0.14",  "jsonwebtoken": "^8.5.1",  "lodash": "^4.17.11",  "minimist": "^1.2.0",  "mkdirp": "^0.5.1",  "next": "^10.0.0",  "next-cookies": "^2.0.3",  "next-redux-wrapper": "^7.0.0",  "node-xlsx": "^0.15.0",  "nodemon": "^2.0.2",  "nprogress": "^0.2.0",  "openid-client": "^3.13.0",  "p-queue": "^6.2.1",  "path-to-regexp": "^6.2.0",  "re-reselect": "^3.0.0",  "react": "^17.0.1",  "react-aria-modal": "^4.0.0",  "react-chartjs-2": "^2.11.1",  "react-copy-to-clipboard": "^5.0.1",  "react-datepicker": "^3.0",  "react-dom": "^17.0.1",  "react-paginate": "^6.3.0",  "react-redux": "^7.2.2",  "react-select": "^3.0.8",  "redux": "^4.0.0",  "redux-saga": "^1.1.1",  "regenerator-runtime": "^0.13.3",  "reselect": "^4.0.0",  "styled-components": "^5.0.0",  "styled-reboot": "^4.0.1",  "superjson": "^1.7.5",  "uuid": "^3.3.2",  "xlsx": "^0.17.1",  "yup": "^0.28.0"  },  "devDependencies": {  "@babel/core": "^7.13.15",  "@babel/eslint-parser": "^7.13.14",  "@babel/helper-builder-react-jsx": "^7.15.4",  "@babel/helper-builder-react-jsx-experimental": "^7.12.11",  "@babel/plugin-transform-flow-strip-types": "^7.4.4",  "@storybook/addon-actions": "6.3.12",  "@storybook/addon-controls": "^6.3.12",  "@storybook/addon-essentials": "6.3.12",  "@storybook/addon-links": "6.3.12",  "@storybook/react": "6.3.12",  "@testing-library/jest-dom": "^5.11.9",  "@testing-library/react": "12.0.0",  "@testing-library/react-hooks": "7.0.1",  "@wojtekmaj/enzyme-adapter-react-17": "^0.4.1",  "babel-loader": "^8.0.5",  "babel-plugin-inline-react-svg": "^1.1.1",  "babel-plugin-module-resolver": "^4.0",  "babel-plugin-styled-components": "^1.10.0",  "css-loader": "6.4.0",  "enzyme": "^3.11.0",  "enzyme-to-json": "^3.6.1",  "eslint": "^7.24.0",  "eslint-config-airbnb": "^18.0.1",  "eslint-import-resolver-babel-module": "^5.3.0",  "eslint-plugin-flowtype": "^4.3.0",  "eslint-plugin-import": "^2.14.0",  "eslint-plugin-jest": "^23.1.1",  "eslint-plugin-jsx-a11y": "^6.0.3",  "eslint-plugin-react": "^7.11.1",  "eslint-plugin-react-hooks": "^4.2",  "fastify-http-proxy": "^2.1.0",  "flow-bin": "^0.110.0",  "flow-typed": "^2.4.0",  "jest": "^26.6.3",  "jest-styled-components": "^7.0.5",  "mockdate": "^2.0.5",  "pretty": "^2.0.0",  "redux-devtools-extension": "^2.13.9",  "redux-mock-store": "^1.5.3",  "redux-saga-test-plan": "^4.0.1",  "redux-testkit": "^1.0.6",  "storybook-addon-designs": "6.2.0",  "storybook-addon-next-router": "3.0.8",  "style-loader": "3.3.0",  "supertest": "^6.1.6"  },  "peerDependencies": {} }  

Это единственные изменения, внесенные в package.json, плюс несколько небольших изменений в сборниках рассказов.

Изменения в файле package.json

Есть идеи, в чем основная причина этой фатальной производственной ошибки?

Ошибка говорит о том, что вам не хватает библиотеки react-is , и, судя по вашему package.json , она не установлена.

Два сценария, которые приходят на ум, чтобы объяснить ошибки после установки пакета / только в рабочей среде.

Сценарий 1

Кто-то мог вручную удалить react-is из системы package.json в какой-то момент времени после последней синхронизации диспетчера пакетов и до вашего снимка экрана.

Менеджеры пакетов синхронизируют изменения package.json при выполнении установок, обновлений и удалений. Это означает, что когда вы добавили плагин для сборника рассказов, он удалил react-is пакет, потому что он больше не был указан в package.json файле.

Сценарий 2

Поскольку это происходит только в рабочей среде, приложение может не использоваться react-is , но оно все равно включено в файл.

 import ReactIs from 'react-is'  

Найдите в своем приложении react-is — если оно не используется, удалите неиспользуемые инструкции — если оно используется, вам необходимо установить пакет.