Uncaught SyntaxError: Unexpected token '<' (at bundle.[hash].js:1:1)

Hello Everyone :slight_smile:

New to Java script so appologies if this is a dumb question, I am trying to deploy my webpage and it is building sucessfully however whenever I visit the webpage I get:

The website can be found here: https://main--aom-swgoh.netlify.app/

404 Not Found

I belive this is because my bundle.js is returning error 404 when it shouldnt be. When I deploy the site locally with npm build or npx serve it works fine and everything is where it should be. When deployed locally the public folder has the correct index.html file and the build folder has the correct bundle[hash].js

Any advice would be appriciated as I am completly lost at this point. The site is currently hosted at

Here is index.html

<!DOCTYPE html>
<html lang="en">
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width,initial-scale=1">

	<title>SWGoH Status</title>

	<link rel="icon" type="image/png" href="/favicon_chewie.png">
	<link rel="stylesheet" href="/bundle.[hash].css">

	<script defer="" src="/bundle.[hash].js"></script>


Here is Rollup.config.js

import fs from 'fs';
import svelte from 'rollup-plugin-svelte';
import resolve from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';
import livereload from 'rollup-plugin-livereload';
import { terser } from 'rollup-plugin-terser';
import sveltePreprocess from 'svelte-preprocess';
import typescript from '@rollup/plugin-typescript';
import posthtml from 'posthtml';
import { hash } from 'posthtml-hash';
import rimraf from 'rimraf';
import copy from 'rollup-plugin-copy';

const production = !process.env.ROLLUP_WATCH;

function serve() {
	let server;
	function toExit() {
		if (server) server.kill(0);

	return {
		writeBundle() {
			if (server) return;
			server = require('child_process').spawn('npm', ['run', 'start', '--', '--dev'], {
				stdio: ['ignore', 'inherit', 'inherit'],
				shell: true

			process.on('SIGTERM', toExit);
			process.on('exit', toExit);

function hashAssets() {
	return {
		name: 'hash-assets',
		buildStart() {
		writeBundle() {
				hash({ path: 'build/' }),
			.then((result) => fs.writeFileSync('./build/index.html', result.html));

export default {
	input: 'src/main.ts',
	output: {
		sourcemap: !production,
		format: 'iife',
		name: 'app',
		file: 'build/bundle.[hash].js'
	plugins: [
			targets: [{
				src: 'public/*',
				dest: 'build',
			// enable run-time checks when not in production
			dev: !production,
			// we'll extract any component CSS out into
			// a separate file - better for performance
			css: css => {
				css.write('bundle.[hash].css', !production);
			preprocess: sveltePreprocess(),

		// If you have external dependencies installed from
		// npm, you'll most likely need these plugins. In
		// some cases you'll need additional configuration -
		// consult the documentation for details:
		// https://github.com/rollup/plugins/tree/master/packages/commonjs
			browser: true,
			dedupe: ['svelte']
			sourceMap: !production,
			inlineSources: !production

		// In dev mode, call `npm run start` once
		// the bundle has been generated
		!production && serve(),

		// Watch the `public` directory and refresh the
		// browser on changes when not in production
		!production && livereload('build'),

		// If we're building for production (npm run build
		// instead of npm run dev), minify
		production && terser(),

		production && hashAssets()
	watch: {
		clearScreen: false

lastly here is tsconfig.json

  "extends": "@tsconfig/svelte/tsconfig.json",

  "include": ["src/**/*"],
  "exclude": ["node_modules/*", "__sapper__/*", "public/*"],

I’m not sure if what I’ve provided here is enough to give a detailed answer so if I can provided anything further please let me know.

It would be useful to see your site so we can see where the 404 is coming from.

Appologies, here is the link and I shall edit the origional post to inclide the link


I believe you expect the [hash] to be replaced by the actual value? If yes, right now, that doesn’t seem to be happening. Unfortunately, I cannot say why as your setup is not something I have seen before. But if you’re using Svelte, I’d recommend using Svelte with Vite or SvelteKit directly.

Thank you for the reply, so it turns out there are 2 issues. The error 404 was a cahcing issue which ive since fixed, the issue I’m having now is the

Uncaught SyntaxError: Unexpected token '<' (at bundle.[hash].js:1:1)

seems bundle.[hash].js is copying the code in index.html

Problem is, I am not sure why this is happening, it also happens when the site is desployed to AWS as well so its definitly something I am doing wrong.

Sadly we don’t provide code-level troubleshooting. As you’ve discovered, this is not related to Netlify. I have also mentioned some better approaches you can take (and you probably should). If you’d wish to stick to your current approach, share your repo so someone can check.