Can't find the JS file
ThiagoFacchini opened this issue · comments
I'm not sure what am I doing wrong, but the point is I can't figure.
Here's my directory structure:
/utils/devServer.js - contains the esbuildDevServer configuration file
/src/app.tsx - my 'app'
/public/dist/index.html - html file exactly as per example
When I run the esbuildDevServer everything goes well... when I try to browse my application I get:
Uncaught SyntaxError: Unexpected token '<' (at app.js:1:1)
Which points to the HTML file as far as I know this error could mean it can't find the .js file.
Here's my esbuildevserver configuration:
const {build} = require("esbuild")
const esBuildDevServer = require("esbuild-dev-server")
esBuildDevServer.start(
build({
entryPoints: ['./src/app.tsx'],
bundle: true,
minify: false,
sourcemap: true,
incremental: true,
metafile: true,
target: ['chrome58', 'safari11'],
outdir: './public/dist'
}),
{
port: '8080',
watchDir: './src',
index: 'public/dist/index.html',
staticDir: 'public/dist',
onBeforeRebuild: {},
onAfterRebuild: {}
}
)
here is my 'app'
import React from 'react';
import { createRoot } from 'react-dom/client'
const App = () => {
return (
<div>
Hello World!
</div>
)
}
const root = createRoot(document.getElementById('root'))
root.render(<App/>)
here is my html file
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<title>Esbuild & React bundle</title>
</head>
<body>
<div id="root"></div>
HTML
<script src="app.js"></script>
</body>
</html>
What can i possibly be doing wrong?
It turned out the js file can't be at index level, otherwise it fails.