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

Question

我有一个使用CodePipline和CodeBuild部署到AWS的ReactJS应用程序。然而，在AWS CodeBuild阶段，"npm运行构建"总是失败，并出现错误：

> 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! pos-application-process@0.1.0 build: `next build`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the pos-application-process@0.1.0 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

我最近遇到了类似的问题，但使用Next.js

我得到的错误是：

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

我觉得如果没有更多关于部署本身的信息，你的问题就不容易回答。但帮助我的是将package.json文件中的dev依赖项更改为普通依赖项。"构建"在那之后发挥了作用。

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. 仔细地浏览构建管道的脚本，并查找用于构建代码的命令。