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

Asked 14/6, 2017 at 9:47 Answered 17/7 at 9:4

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.

Jessamyn answered 14/6, 2017 at 9:47 Comment(9)

how is your client/index.js? – Jesus 14/6, 2017 at 12:27

i added in body of the question. – Jessamyn 14/6, 2017 at 12:33

It is very likely you are missing support to JSX. – Jesus 14/6, 2017 at 12:36

Could you also paste your bundle file? – Jesus 14/6, 2017 at 12:39

bundle.js contains code of index.html file. – Jessamyn 14/6, 2017 at 12:43

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. – Jesus 14/6, 2017 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( <html>) display error - unespected token – Jessamyn 14/6, 2017 at 12:51

You must share its contents otherwise won't be easy to help. We also need to see your babel config file. – Jesus 14/6, 2017 at 12:56

i added screenshot add .babelrc – Jessamyn 14/6, 2017 at 13:6

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.

Jesus answered 14/6, 2017 at 13:31 Comment(2)

I have same issue and I think you pointed in right direction. I double-checked script tag in html file <script type="text/javascript" src="/bundle.js"></script> 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: '/' – Fillin 8/3, 2018 at 16:47

@Fillin you should open a new question and share your webpack config, etc. – Jesus 8/3, 2018 at 17:14

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>

Towroy answered 13/9, 2020 at 18:25 Comment(0)

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'),
    }),
  ],
};

Trichomoniasis answered 4/8, 2021 at 15:29 Comment(0)

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.

Quagga answered 6/3, 2022 at 15:17 Comment(0)

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

Wrapping answered 20/1, 2023 at 16:45 Comment(0)

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

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

Filipe answered 14/6, 2017 at 12:25 Comment(3)

Sorry, but how setting output? I added output: { path: '/' publicPath: '/' } – Jessamyn 14/6, 2017 at 13:8

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 ? – Filipe 14/6, 2017 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 – Jessamyn 15/6, 2017 at 11:16

In my scenario homepage: <path> was issue

package.json

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

Colossal answered 18/1, 2023 at 8:3 Comment(0)

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.

Dhammapada answered 15/8, 2023 at 11:41 Comment(0)

Check the value of homepage in package.json and verify in the network tab that all the generated JS files are being loaded. In my case, the issue was that the homepage value was incorrect, so bundle.js was not being loaded into the browser.

Whatever answered 17/7 at 9:4 Comment(0)

-1

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

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

Iridectomy answered 29/8, 2017 at 20:49 Comment(0)

Hot tags

Godot Unity Godot Help Programming Godot 4.X GUI GDScript 3D 2D Physics CSharp Godot 3.X VR XR Projects C++

Recommended topics

Hot tags