Not working with React
serg06 opened this issue · comments
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 theindex.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
});
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.