'npm run build' failed in AWS CodeBuild but succeeded locally

Question

I have a ReactJS application deployed to AWS using CodePipline and CodeBuild. However, in the AWS CodeBuild stage the 'npm run build' always failed with error:

> 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

However, on my local PC, when I run 'npm run build', the build is successful. I have tried deleted node_modules folder and package-lock.json and run 'npm install' & 'npm run build'. All builds were successful. I just couldn't duplicate the error locally. Here is my package.json dependency:

"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"
  }

Does anyone encounter this issue before? I really appreciate any help!

Answer 1

Just overriding the types manually worked for me:

Change this:

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

With this:

{/* 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 2

I had a problem similar this recently, but with Next.js

The Error that I was getting was:

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

I feel like your question isn't easy to answer without more info on your deployment itself. But what helped me was changing the dev-dependencies to normal dependencies in the package.json file. The Build worked after that.