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.

Answer 1

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).