AWS Amplify : Babel error building React.JS app
Is it possible you may have an error with babel on AWS Amplify, while deploying your React.JS app:
If you click on Frontend you should be able to see the logs :
01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 | 2022-01-14T17:18:36.441Z [INFO]: $ react-scripts build 2022-01-14T17:18:37.352Z [INFO]: Creating an optimized production build... 2022-01-14T17:18:38.431Z [INFO]: Failed to compile. 2022-01-14T17:18:38.433Z [INFO]: . /src/index .js Error: [BABEL] /codebuild/output/src483533555/src/app/src/index .js: Cannot find module '@babel/helper-define-map' Require stack: - /codebuild/output/src483533555/src/app/node_modules/babel-preset-react-app/node_modules/ @babel /plugin-transform-classes/lib/transformClass .js - /codebuild/output/src483533555/src/app/node_modules/babel-preset-react-app/node_modules/ @babel /plugin-transform-classes/lib/index .js - /codebuild/output/src483533555/src/app/node_modules/babel-preset-react-app/node_modules/ @babel /preset-env/lib/available-plugins .js - /codebuild/output/src483533555/src/app/node_modules/babel-preset-react-app/node_modules/ @babel /preset-env/lib/plugins-compat-data .js - /codebuild/output/src483533555/src/app/node_modules/babel-preset-react-app/node_modules/ @babel /preset-env/lib/normalize-options .js - /codebuild/output/src483533555/src/app/node_modules/babel-preset-react-app/node_modules/ @babel /preset-env/lib/index .js - /codebuild/output/src483533555/src/app/node_modules/babel-preset-react-app/create .js - /codebuild/output/src483533555/src/app/node_modules/babel-preset-react-app/index .js - /codebuild/output/src483533555/src/app/node_modules/react-scripts/node_modules/ @babel /core/lib/config/files/plugins .js - /codebuild/output/src483533555/src/app/node_modules/react-scripts/node_modules/ @babel /core/lib/config/files/index .js - /codebuild/output/src483533555/src/app/node_modules/react-scripts/node_modules/ @babel /core/lib/index .js - /codebuild/output/src483533555/src/app/node_modules/react-scripts/node_modules/babel-loader/lib/index .js - /codebuild/output/src483533555/src/app/node_modules/loader-runner/lib/loadLoader .js - /codebuild/output/src483533555/src/app/node_modules/loader-runner/lib/LoaderRunner .js - /codebuild/output/src483533555/src/app/node_modules/webpack/lib/NormalModule .js - /codebuild/output/src483533555/src/app/node_modules/webpack/lib/NormalModuleFactory .js - /codebuild/output/src483533555/src/app/node_modules/webpack/lib/Compiler .js - /codebuild/output/src483533555/src/app/node_modules/webpack/lib/webpack .js - /codebuild/output/src483533555/src/app/node_modules/react-scripts/scripts/build .js (While processing: "/codebuild/output/src483533555/src/app/node_modules/babel-preset-react-app/index.js" ) 2022-01-14T17:18:38.451Z [WARNING]: error Command failed with exit code 1. 2022-01-14T17:18:38.451Z [INFO]: info Visit https: //yarnpkg .com /en/docs/cli/run for documentation about this command . 2022-01-14T17:18:38.461Z [ERROR]: !!! Build failed 2022-01-14T17:18:38.461Z [ERROR]: !!! Non-Zero Exit Code detected 2022-01-14T17:18:38.461Z [INFO]: # Starting environment caching... 2022-01-14T17:18:38.461Z [INFO]: # Uploading environment cache artifact... 2022-01-14T17:18:38.534Z [INFO]: # Environment caching completed Terminating logging... |
In order to solve the @babel errors, you will need to install all the @babel packages:
NPM
1 2 3 4 | npm install babel-core babel-loader babel-preset- env babel-preset-react babel-polyfill babel-runtime @babel /helpers @babel /helper-builder-react-jsx-experimental @babel /helper-builder-react-jsx @babel /helper-define-map @babel /helper-plugin-utils @babel /helper-regex |
YARN
1 2 3 4 | yarn add babel-core babel-loader babel-preset-env babel-preset-react babel-polyfill babel-runtime @babel/helpers @babel/helper-builder-react-jsx-experimental @babel/helper-builder-react-jsx @babel/helper-define-map @babel/helper-plugin-utils @babel/helper-regex |
In order to run your React.JS project on Amplify, here is all the babel packages I installed to solve all problems:
- babel-core
- babel-loader
- babel-preset-env
- babel-preset-react
- babel-polyfill
- babel-runtime
- @babel/helpers
- @babel/helper-builder-react-jsx
- @babel/helper-builder-react-jsx-experimental
- @babel/helper-define-map
- @babel/helper-plugin-utils
- @babel/helper-regex
After, that, you should be able to see your React.JS app online with Amplify: