Webpack error bundle.js:1 Uncaught SyntaxError: Unexpected token <

Question

I running server localhost and get error bundle.js:1 Uncaught SyntaxError: Unexpected token < In output bundle.js is html code of index.html file. This is setting my webpack.config file. Can you please tell me what wrong with setting?

import path from 'path';
import webpack from 'webpack';

export default {
  devtool: 'eval-source-map',
  entry: [
    'webpack-hot-middleware/client',
    path.join(__dirname, '/client/index.js' )
    ],
  output: {
    path: '/',
    publicPath: '/'
  },
  plugins: [
    new webpack.NoEmitOnErrorsPlugin(),
    new webpack.optimize.OccurrenceOrderPlugin(),
    new webpack.HotModuleReplacementPlugin()
  ],
  module: {
    loaders: [
      {
        test: /\.js$/,
        include: path.join(__dirname, 'client'),
        loaders: ['react-hot-loader', 'babel-loader' ]
      }
    ]
  },
  resolve: {
    extensions: ['.js']
  }    
}

index.html

<html>

 <head>
   <meta charset="UTF-8">
   <title>Site</title>
   <meta content="width=device-width, initial-scale=1" name="viewport" />
 </head>

 <body>
   <h1>Hello bla bla bla</h1>
   <div id="app"></div>

   <script src="bundle.js"></script>
 </body>

 </html>

server/index.js

import express from 'express';
import path from 'path';

import webpack from 'webpack';
import webpackMiddeleware from 'webpack-dev-middleware';
import webpackHotMiddleware from 'webpack-hot-middleware';
import webpackConfig from '../webpack.config';


let app = express();

const compiler = webpack(webpackConfig);

app.use(webpackMiddeleware(compiler, {
  hot: true,
  publicPath: webpackConfig.output.publicPath,
  noInfo: true
}));
app.use(webpackHotMiddleware(compiler));

app.get('/*', (req, res)=>{
  res.sendFile(path.join(__dirname, './index.html'));
});

app.listen('3000', ()=>{console.log('Running on port 3000')});

client/index.js

import React from 'react';
import { render } from 'react-dom';
import App from './components/App';

render(<App/>, document.getElementById('app'));

components/App.js

import React from 'react';

class App extends React.Component {
  render(){
    return (
      <h1>Hello</h1>
    );
  }
}

export default App;

package.json:

{
  "name": "xxxxx",
  "version": "1.0.0",
  "description": "xxxxxxxxxx",
  "main": "index.js",
  "scripts": {
    "server": "nodemon --watch server --exec babel-node -- server/index.js",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "repository": {
    "type": "git",
    "url": "xxxxxxxxxxxxx"
  },
  "keywords": [
    "
  ],
  "author": "xxxxxxxxx",
  "license": "ISC",
  "bugs": {
    "url": "xxxxxxxxxxxxxxxxxxxxxxx"
  },
  "homepage": "xxxxxxxxxxxxxxxxxxxx",
  "dependencies": {
    "babel-cli": "^6.24.1",
    "express": "^4.15.3",
    "react": "^15.5.4",
    "react-dom": "^15.5.4"
  },
  "devDependencies": {
    "babel-loader": "^7.0.0",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "nodemon": "^1.11.0",
    "react-hot-loader": "^1.3.1",
    "webpack": "^2.6.1",
    "webpack-dev-middleware": "^1.10.2",
    "webpack-hot-middleware": "^2.18.0"
  }
}

.babelrc

{
  "presets": [ "es2015", "react" ]
}

Thank you.

Nope. Bundle contains all the JS from the entry point and beyond. You index.html is just the startup file that will reference the bundle. If you can't access it on the filesystem you can get it from developer tools ou source tab. — enapupe, Jun 14 '17 at 12:44
yea, i know it. I checked now with dev tools google chome, in tab source open bundle.js and there code my index.html file and on 1 line( ) display error - unespected token — Stefan Hansch, Jun 14 '17 at 12:51
You must share its contents otherwise won't be easy to help. We also need to see your babel config file. — enapupe, Jun 14 '17 at 12:56

score 21 · Answer 1 · answered Jun 14 '17 at 13:31

21

Your bundle.js src in your script tag is wrong. It's returning your main index.html, that's why you are getting that error - the JS parser is trying to parse a HTML file.

You must add a slash to your script src: <script src="/bundle.js"></script>

If that doesn't work you must double-check your output config.

answered Jun 14 '17 at 13:31

enapupe

15,691
3
29
45

I have same issue and I think you pointed in right direction. I double-checked script tag in html file as you can everything looks fine. I wonder If I configured webpack to put bundle into `public` folder what value `publicPath` should contain? Current I have `publicPath: '/'` – SuperManEver Mar 08 '18 at 16:47
@SuperManEver you should open a new question and share your webpack config, etc. – enapupe Mar 08 '18 at 17:14

score 1 · Answer 2 · answered Sep 13 '20 at 18:25

1

I ended up putting the explicit path to the bundle.js file in the index.html:

from: <script src="bundle.js"></script>

to: <script src="public/bundle.js"></script>

answered Sep 13 '20 at 18:25

Mike Kane

13
3

MG Developer · Answer 3 · 2021-08-04T15:55:38.373

One possible fix for this issue in Webpack version 5.46.0. Node 14.x. I am posting this in a hope help others incase if they reach this far and still have not found a fix. So along with many other issues, one possibility is if you are using html-webpack-plugin where the publicPath attribute needed to be explicitly set in the properties, which was not the case with the former webpack < 5 versions of the plugin, where it was supposedly inheriting the property from the output/devServer. After adding the property to the plugin, it worked in webpack 5 with the latest html-webpack-plugin.

Here is the relevant config.

module.exports = {
  mode: 'development',
entry: ['@babel/polyfill', './config/polyfills', './src/index.js'],
  output: {
    hotUpdateMainFilename: '[id].hot-update.[fullhash].json',
    hotUpdateChunkFilename: '[id].hot-update.[fullhash].js',
    path: resolve(__dirname, '..', 'dist'),
    filename: '[name].[fullhash].js',
  },
  optimization: {
    moduleIds: 'named',
  },
  devtool: 'eval-cheap-module-source-map',
  plugins: [
    new webpack.HotModuleReplacementPlugin(),
    new HtmlWebpackPlugin({
      hash: true,
      publicPath: '/yourPath',
      template: resolve(__dirname, '..', 'src', 'index.html'),
      alwaysWriteToDisk: true,
    }),
    new HtmlWebpackHarddiskPlugin({
      outputPath: resolve(__dirname, '..', 'dist'),
    }),
  ],
};

score 1 · Answer 4 · edited Jan 23 '23 at 16:16

1

After a long if it helps ,

You just need to add <base href="/" /> into the <head> of your index.html. Please see this comment on this thread

edited Jan 23 '23 at 16:16

Lucasbk38

499
1
14

answered Jan 20 '23 at 16:45

Mallikarjun M G

509
4
9

score 0 · Answer 5 · edited May 02 '18 at 19:47

0

You are using multiple entry points but not setting up the output.

https://github.com/webpack/docs/wiki/configuration#entry

edited May 02 '18 at 19:47

HoCo_

1,302
4
16
33

answered Jun 14 '17 at 12:25

Tuko90

59
5

Sorry, but how setting output? I added output: { path: '/' publicPath: '/' } – Stefan Hansch Jun 14 '17 at 13:08
Try adding filename to your output: { path: '/' publicPath: '/' filename: 'bundle.js' } And check If you are setting the path routes correctly as enapupe said on the comment. And why do you need 'webpack-hot-middleware/client' as entry point ? – Tuko90 Jun 14 '17 at 13:53
hm... yea, i added filename: 'bundle.js', now work. I need webpack-hot-middleware/client for change data on browser without reload page – Stefan Hansch Jun 15 '17 at 11:16

score 0 · Answer 6 · answered Mar 06 '22 at 15:17

Solution: use middleware "app.use(express.static('./'));" to provide the location of the static resource file 'bundle.js'. A simplified version of server/index.js, which contain this fix, is:

import express from 'express';
import path from 'path';
const __dirname = path.resolve();

let app = express();

app.use(express.static('./'));

app.get('/*', (req, res)=>{
    res.sendFile(path.join(__dirname, './index.html'));
});

app.listen('3000', ()=>{console.log('Running on port 3000')});

I could reproduce the problem. I have tested the fix with the files and the directory structure you provided. However, I disabled babel and I commented out webpack related contents.

Shah Vipul · Answer 7 · 2023-02-01T05:16:09.753

0

In my scenario homepage: <path> was issue

package.json

{
    "homepage":  '<path>',  // removed this 
    .....
}

edited Feb 01 '23 at 05:16

answered Jan 18 '23 at 08:03

Shah Vipul

625
7
11

score 0 · Answer 8 · answered Aug 15 '23 at 11:41

None of the suggestions worked for me.

When I tried to add <base href="/" /> to my index.html file, the error started showing 2 times in the console.

Finally, this worked for me:

I removed the /<username>/<app-name> part from the URL in the browser and instead just used:

http://localhost:3000/

This silenced the error.

Not sure how this worked though.

score -1 · Answer 9 · edited Aug 29 '17 at 21:54

-1

I've solved this issue by adding filename item to object output:

output: {
 path: '/',
 filename: 'bundle.js'
},

edited Aug 29 '17 at 21:54

C. Helling

1,394
6
20
34

answered Aug 29 '17 at 20:49

Oleg Rostov

1

Webpack error bundle.js:1 Uncaught SyntaxError: Unexpected token <

9 Answers9

Linked