I am trying to use AWS Amplify UI in a React project. However, I receive the following errors after bundling the project with WebPack: Uncaught SyntaxError: Invalid or unexpected token (in Chrome) & SyntaxError: Invalid character '\u00b0' (in Safari). The error does not appear in Firefox.

This occurs when I load the bundled HTML file, after bundling with the webpack command. However, when using webpack serve, I have observed that the page renders as expected, in all the above browsers, with no errors.

package.json

{
    "devDependencies": {
        "@babel/core": "^7.17.9",
        "@babel/preset-env": "^7.16.11",
        "@babel/preset-react": "^7.17.12",
        "babel-jest": "^27.5.1",
        "babel-loader": "^8.2.5",
        "copy-webpack-plugin": "^10.2.4",
        "css-loader": "^6.7.1",
        "eslint": "^8.14.0",
        "html-webpack-plugin": "^5.5.0",
        "identity-obj-proxy": "^3.0.0",
        "jest": "^27.5.1",
        "node-polyfill-webpack-plugin": "^1.1.4",
        "pa11y": "^6.2.3",
        "style-loader": "^3.3.1",
        "terser-webpack-plugin": "^5.3.1",
        "webpack": "^5.72.0",
        "webpack-cli": "^4.9.2",
        "webpack-dev-server": "^4.8.1"
    },
    "dependencies": {
        "@aws-amplify/ui-react": "^3.0.1",
        "@fontsource/poppins": "^4.5.8",
        "aws-amplify": "^4.3.26",
        "jquery": "^3.6.0",
        "react": "^18.2.0",
        "react-dom": "^18.2.0"
    }
}

webpack.config.js

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const NodePolyfillPlugin = require("node-polyfill-webpack-plugin");

module.exports = (env, argv) => {
    let filename = "[name]-bundle.js";
    if (argv.mode == "production") {
        filename = "[name]-bundle-[contenthash].js";
    }
    
    let config = {
        entry: {
            app: './src/app.js'
        },
        output: {
            filename,
            path: path.resolve(__dirname, 'dist'),
        },
        module: {
            rules: [
                {
                    test: /\.(js|jsx)$/,
                    exclude: /(node_modules|bower_components)/,
                    use: {
                        loader: 'babel-loader',
                        options: {
                            presets: ['@babel/preset-env', '@babel/preset-react']
                        }
                    }
                },
                {
                    test: /\.css$/,
                    use: [
                        {
                            loader: "style-loader"
                        },
                        {
                            loader: "css-loader",
                            options: {
                                importLoaders: 1,
                                sourceMap: true
                            }
                        }
                    ]
                }
            ]
        },
        resolve: {
            extensions: ['.js', '.jsx'],
        },
        plugins: [
            new HtmlWebpackPlugin({
                template: './src/index.html',
                filename: "index.html",
                chunks: ["app"]
            }),
            new NodePolyfillPlugin()
        ],
        devtool: 'inline-source-map',
        devServer: {
            static: './dist',
            allowedHosts: "all"
        }
    };
    
    return config;
};

app.js

import React from 'react';
import ReactDOM from 'react-dom/client';

import { Button } from '@aws-amplify/ui-react';

import '@aws-amplify/ui-react/styles.css';
import "@fontsource/poppins/index.css";

function App() {
    return (
        <div>
            <p>Testing</p>
            <Button variation="primary">Hello world</Button>
        </div>
    );
}

const domContainer = document.getElementById("container");
const root = ReactDOM.createRoot(domContainer);
root.render(<App />);

CodePudding user response：

This is a character encoding issue.

It worked with the WebPack DevServer because charset=utf-8 is automatically appended to the Content-Type header of the response.

Setting the character encoding in the head of the HTML file, as below, resolved this issue.

<meta charset="utf-8" />