Not working with React - Githubissues

serg06 commented 2 years ago

I did the following:

Set everything up with the default config
Created a single React page src/index.tsx (see code below)
Changed the config with entryPoints: ["src/index.tsx"].
Ran node config/esbuild.config.js

Expected result:

The page loads.

Actual result:

The page is blank.
In the console it says Uncaught SyntaxError: Unexpected token '<'
In the network tab I see that it has fetched index.js, but the response body was just the text inside the index.html

src/index.tsx:

import React, { useCallback, useState } from "react";
import ReactDOM from "react-dom";

const App = (props: { message: string }) => {
    const [count, setCount] = useState(0);
    const increment = useCallback(() => {
        setCount(count => count + 1);
    }, [count]);
    return(<>
        <h1>{props.message}</h1>
        <h2>Count: {count}</h2>
        <button onClick={increment}>Increment</button>
    </>)
};

window.addEventListener('load', () => {
    console.log('Loaded!');
    ReactDOM.render(
        <App message="Hello World! Simple Counter App built on ESBuild + React + Typescript"/>,
        document.getElementById('root')
    );
}, {
    once: true
});

Falldot commented 2 years ago

Hello, thank you for the issue.

Change esbuild.config.js like this

const {build} = require("esbuild")
const esBuildDevServer = require("esbuild-dev-server")

esBuildDevServer.start(
    build({
        entryPoints: ["src/index.tsx"],
        outdir: "dist/js",
        incremental: true,
                bundle: true,
                minify: true,
                sourcemap: true,
        // and more options ...
    }),
    {
        port:      "8080", // optional, default: 8080
        watchDir:  "src", // optional, default: "src"
        index:     "dist/index.html", // optional
        staticDir: "dist", // optional
        onBeforeRebuild: {}, // optional
        onAfterRebuild:  {}, // optional
    }
)

and index.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    <body>
        <div id="root"></div>
        <script src="js/index.js"></script>
    </body>
</html>

everything should be working.

serg06 commented 2 years ago

@Falldot It works, thank you!

Falldot / esbuild-dev-server

Not working with React #3