React error while deploying to AWS Amplify

Question

I am trying to deploy a react application to aws amplify that uses webpack. After the push to the github repo, the deploy begins as expected but fails on the build step when it tries to execute the npm run build command. I am getting the following error in the aws amplify console log:

>     ./src/App.js 40.8 KiB [built] [code generated] [1 error]
>     ERROR in ./src/App.js 111:6
>     Module parse failed: Unexpected token (111:6)
>     You may need an appropriate loader to handle this file type, 
>     currently no loaders are configured to process this file. 
>     See https://webpack.js.org/concepts#loaders

babel.config.json:

{
  "presets": [
    "@babel/preset-env"
  ]
}

webpack.config.json:

module.exports = (env, argv) => {
const config = {
    mode: 'development',
    entry: path.join(__dirname, 'src', 'App.js'),
    output: {
        filename: '[name].bundle.js',
        path: path.resolve(__dirname, 'dist')
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /(node_modules|bower_components|build)/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['env']
                    }
                }
            },
            {
                test: /\.css$/,
                use: [
                    {loader: 'raw-loader'},
                    {loader: 'css-loader'},
                ]
            },
            {
                test: /\.scss$/,
                use: [
                    {
                        loader: 'file-loader',
                        options: {
                            name: 'css/[name].css'
                        }
                    },
                    {
                        loader: 'sass-loader'
                    }
                ]
            },
            {
                test: /\.(woff|woff2|eot|ttf|png|svg|jpg|jpeg|gif|ico)$/,
                exclude: /node_modules/,
                loader: 'url-loader'
            }
        ],
    },
    devServer: {
        client: {
            overlay: true
        },
        hot: true,
        watchFiles: ['src/*', 'index.html']
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './src/index.htm',
            favicon: './public/favicon.ico'
        })
    ],
    resolve: {
        modules: [__dirname, "src", "node_modules"],
        extensions: ["*", ".js", ".jsx", ".scss"]
    }
}

return config;
};

package.json script entries:

"scripts": {
  "start": "webpack serve --config webpack.config.js --env ENVIRONMENT=dev --mode none",
  "build": "webpack --config webpack.config.js"
}

amplify.yml:

version: 1
frontend:
  phases:
    preBuild:
      commands:
        - npm install
    build:
      commands:
        - REACT_APP_NODE_ENV=${REACT_APP_NODE_ENV}
        - npm run build --verbose
  artifacts:
    baseDirectory: build
    files:
      - '**/*'
  cache:
    paths:
      - node_modules/**/*

This seems to work when I run build from my local machine but not deploying to amplify. This also works if I deploy and take the web.config.js file out of the equation, except the css does not work in that case but it does deploy.

byk · Accepted Answer · 2022-10-01 09:53:13Z

0

You do not need webpack.config.js in order to deploy your app on Amplify amplify publish

In package.json your script should be:

 "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },

Then, rerun amplify publish and it should work. (At least for me).

answered Oct 1, 2022 at 9:53

byk

192 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Dreamer Over a year ago

I followed your code but then amplify publish prompted for index.html not found in public/ and index.js not found in src. How to get those?

Collectives™ on Stack Overflow

React error while deploying to AWS Amplify

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related