Uncaught TypeError: Failed to resolve module specifier "react". Relative references must start with either "/", "./", or "../" with esbuild

Question

I'm working on a web app and trying to migrate the bundler from Webpack to esbuild(for learning purposes). My esbuild build script is supposed to bundle and minify the code, and we will have another task runner upload the bundled resources to our CDN. The application is using React, while I done configured and start to test it, this error shows up in browser when the page try to load the JS script: "Uncaught TypeError: Failed to resolve module specifier "react". Relative references must start with either "/", "./", or "../"." form.html:1.

I can't figure out what went wrong and hoping I can get some tips here!

form.html


    <html>
        <head>
            <!-- HEAD -->
            <meta charset="UTF-8">
            <meta http-equiv="X-UA-Compatible" content="IE=edge">
            <title>Dashboard Setting Form</title>
            <script src="https://connect-cdn.atl-paas.net/all.js" type="text/javascript"></script>
    
            <!--  Frontend CSS Core -->
            <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" type="text/javascript"></script>
            <script src="//cdnjs.cloudflare.com/ajax/libs/aui/9.4.5/aui/aui-prototyping.min.js" type="text/javascript"></script>
            <link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/aui/9.4.5/aui/aui-prototyping.min.css" media="all">
    
        </head>
        <body class="dashboard-form">
            <div class="form-content" id="formContainer"></div>
            <script src="/static/js/forms.js" type="module"></script>
        </body>
    </html>

build.mjs

    import {build} from 'esbuild';
    import babel from 'esbuild-plugin-babel';
    import {nodeExternalsPlugin} from 'esbuild-node-externals';
    import cssModulesPlugin from 'esbuild-css-modules-plugin';
    import GlobalsPlugin from 'esbuild-plugin-globals';
    import manifestPlugin from 'esbuild-plugin-manifest';
    import { globalExternals } from "@fal-works/esbuild-plugin-global-externals";
    
    build({
        entryPoints: {
            adminpage: './src/main/frontend/public/js/modules/admin/adminpage.js',
            forms: './src/main/frontend/public/js/modules/form/forms.js',
        },
        outdir: "static/js",
        minify: true,
        sourcemap: true,
        bundle: true,
        format: 'esm',
        target: ['es2020'],
        external: ['react', 'react-dom'],
        write: true,
        plugins: [
            cssModulesPlugin({
                v2: true,
                filter: /\.css$/i,
            }),
            nodeExternalsPlugin(),
            GlobalsPlugin({
                AP: 'window.AP'
            }),
            babel({
                config: {
                    presets: ['@babel/preset-react', '@babel/preset-env'],
                }
            })
        ],
        logLevel: 'debug'
    }).then(() => console.log("⚡ Done")).catch(error => console.log(error))

forms.js(unbundled)


        import React from "react";
        import ReactDOM from "react-dom";
        import {Provider} from 'react-redux';
        import parse from "html-react-parser";
        import { AllHtmlEntities } from 'html-entities';
        
    ReactDOM.render(
        <Provider store={store}>
            <! -- some react component here -->
        </Provider>,
        document.getElementById('formContainer')
    );

Any advice would be appreciated!

Uncaught TypeError: Failed to resolve module specifier "react". Relative references must start with either "/", "./", or "../" with esbuild

0 Answers0