'npm run build'在 AWS CodeBuild 中失败，但在本地成功

Question

我使用 CodePipline 和 CodeBuild 将 ReactJS 应用程序部署到 AWS。但是，在 AWS CodeBuild 阶段，“npm run build”总是失败并出现错误：

> next build
info  - Loaded env from /app/.env.production
info  - Loaded env from /app/.env
info  - Using webpack 5. Reason: Enabled by default https://nextjs.org/docs/messages/webpack5
Attention: Next.js now collects completely anonymous telemetry regarding usage.
This information is used to shape Next.js' roadmap and prioritize features.
You can learn more, including how to opt-out if you'd not like to participate in this anonymous program, by visiting the following URL:
https://nextjs.org/telemetry

info  - Checking validity of types...
Failed to compile.

./pages/_app.tsx:28:12
Type error: 'SnackbarProvider' cannot be used as a JSX component.
  Its instance type 'SnackbarProvider' is not a valid JSX element.
    The types returned by 'render()' are incompatible between these types.
      Type 'React.ReactNode' is not assignable to type 'import("/app/node_modules/@types/styled-jsx/node_modules/@types/react/index").ReactNode'.

  26 |       <ThemeProvider theme={getTheme()}>
  27 |         <MuiPickersUtilsProvider utils={DateFnsUtils}>
> 28 |           <SnackbarProvider maxSnack={5}>
     |            ^
  29 |             <Component {...pageProps} />
  30 |           </SnackbarProvider>
  31 |         </MuiPickersUtilsProvider>
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] build: `next build`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the [email protected] build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /root/.npm/_logs/2022-04-08T06_42_37_976Z-debug.log
The command '/bin/sh -c npm run build' returned a non-zero code: 1

然而，在我的本地 PC 上，当我运行“npm run build”时，构建成功。我尝试删除 node_modules 文件夹和 package-lock.json 并运行 'npm install' & “npm 运行构建”。所有构建均成功。我只是无法在本地复制该错误。这是我的 package.json 依赖项：

"dependencies": {
    "@date-io/date-fns": "1.3.13",
    "@material-ui/core": "4.12.3",
    "@material-ui/data-grid": "4.0.0-alpha.37",
    "@material-ui/icons": "4.11.2",
    "@material-ui/lab": "4.0.0-alpha.60",
    "@material-ui/pickers": "3.3.10",
    "@material-ui/styles": "4.11.4",
    "@stripe/react-stripe-js": "1.6.0",
    "@stripe/stripe-js": "1.20.3",
    "amazon-cognito-identity-js": "5.0.4",
    "autosuggest-highlight": "3.2.0",
    "axios": "0.21.4",
    "babel-plugin-styled-components": "1.13.2",
    "clsx": "1.1.1",
    "date-fns": "2.28.0",
    "global": "4.4.0",
    "html-pdf": "3.0.1",
    "html2canvas-objectfit-fix": "1.2.0",
    "jose": "4.6.0",
    "jspdf": "2.4.0",
    "mobx": "6.3.2",
    "mobx-react-lite": "3.2.0",
    "mobx-state-tree": "5.0.2",
    "next": "11.1.0",
    "notistack": "1.0.10",
    "nrm": "1.2.1",
    "react": "17.0.2",
    "react-dom": "17.0.2",
    "react-google-autocomplete": "2.6.1",
    "react-input-mask": "2.0.4",
    "react-number-format": "4.7.3",
    "react-pdf": "5.4.1",
    "react-use": "17.3.1",
    "react-verification-code-input": "1.2.9",
    "types-registry": "0.1.553",
    "uac-client": "0.1.11",
    "validate.js": "0.13.1",
    "yrm": "1.0.6"
  },
  "devDependencies": {
    "@next/eslint-plugin-next": "12.1.0",
    "@types/react": "17.0.15",
    "@typescript-eslint/eslint-plugin": "4.29.0",
    "@typescript-eslint/parser": "4.29.0",
    "eslint": "7.32.0",
    "eslint-config-next": "11.0.1",
    "eslint-config-prettier": "8.3.0",
    "eslint-plugin-react": "7.24.0",
    "prettier": "2.3.2",
    "typescript": "4.3.5"
  }

以前有人遇到过这个问题吗？我真的很感谢任何帮助！

Answer 1

我最近有一个类似的问题，但是下一步。JS

我遇到的错误是：

COMMAND_EXECUTION_ERROR: Error while executing command: npm run build. Reason: exit status 1

我觉得您的问题并不容易回答，而没有更多有关部署本身的信息。但是，帮助我的是将dev依赖性更改为package.json文件中的正常依赖项。此后构建工作。

Answer 2

只需重写对我来说手动工作的类型：

更改此：

<ThemeProvider theme={getTheme()}>
  <MuiPickersUtilsProvider utils={DateFnsUtils}>
    <SnackbarProvider maxSnack={5}>
      <Component {...pageProps} />
    </SnackbarProvider>
  </MuiPickersUtilsProvider>
  ...

使用此：

{/* Otherwise SnackbarProvider doesn't build with correct type */}
<ThemeProvider theme={getTheme()}>
  <MuiPickersUtilsProvider utils={DateFnsUtils}>
    {React.createElement(SnackbarProvider as React.ElementType, { maxSnack: 5 },
      <Component {...pageProps} />
    )}
  </MuiPickersUtilsProvider>
  ...

Answer 3

以下是您需要了解的一些事实。

1. 您可以验证本地的节点版本、npm 版本与 AWS 中的版本。

2. 确保确认代码是在应构建的版本下构建的，并且本地和 AWS 中的版本相同。
   例如

3. 仔细检查构建管道的脚本并查找包含的用于构建代码的命令。