Uncaught SyntaxError: Unexpected token '<' in bundle.js:1

uncaught syntaxerror unexpected token ' ' react
uncaught syntaxerror unexpected token ' ' jquery
uncaught syntaxerror: unexpected token javascript
uncaught syntaxerror unexpected token ' ' doctype html
uncaught syntaxerror: unexpected token chrome
uncaught syntaxerror unexpected token ' ' angular
uncaught syntaxerror unexpected token
uncaught syntaxerror: unexpected token mvc

I'm setting up boilerplate for react web apps and getting a blank page with the above console error when navigating to http://localhost:3000. I am a fresh bootcamp student and my knowledge of webpack config is very shallow, especially with lots of dependencies/babel setup in play. I reviewed responses to other users posting this issue, but it seems it can be caused by any number of issues around webpack config, and I'm worried about breaking things further while under a tight time constraint.

So I posted some of my code below. I am quite stuck- thanks for any pointers!

public/index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>-= PROJECT TITLE PLACEHOLDER =-</title>
  <script src="/bundle.js" defer></script>
</head>
<body>
  <div id="app"></div>
</body>
</html>

app/index.js

import '../public/style.css'
import React from 'react'
import ReactDOM from 'react-dom'
import { Provider } from 'react-redux'
import store from './redux'
import Users from './components/Users'

ReactDOM.render(
  <Provider store={store}>
    <Users />
  </Provider>,
  document.getElementById('app')
)

webpack.config.js

'use strict'

const { resolve } = require('path')

module.exports = {
  entry: ['babel-polyfill', './app/index'],
  output: {
    path: __dirname,
    filename: './public/bundle.js'
  },
  mode: 'development',
  context: __dirname,
  devtool: 'source-map',
  resolve: {
    extensions: ['.js', '.jsx']
  },
  module: {
    rules: [
      {
        test: /jsx?$/,
        include: resolve(__dirname, './app'),
        loader: 'babel-loader',
        options: {
          presets: ['react']
        }
      },
      {
        test: /\.css$/,
        use: [
          'style-loader',
          'css-loader'
        ]
      }
    ]
  }
}

package.json

{
  "name": "boilermaker",
  "version": "0.0.1",
  "description": "boilerplate for react-redux-express-sequelize app",
  "main": "server/index.js",
  "scripts": {
    "start-dev": "npm run build-watch & npm run start-server",
    "start-server": "nodemon --watch server -e js,html --ignore public server/index.js",
    "build-watch": "webpack -w",
    "start": "echo 'Running server for production - developers, use npm run start-dev for development' && node server/index.js",
    "seed": "node seed.js"
  },
  "keywords": [
    "react",
    "redux",
    "skeleton"
  ],
  "dependencies": {
    "axios": "^0.18.0",
    "body-parser": "^1.18.2",
    "chalk": "^2.4.1",
    "connect-session-sequelize": "^6.0.0",
    "crypto": "^1.0.1",
    "express": "^4.14.0",
    "express-session": "^1.17.0",
    "lodash": "^4.17.15",
    "morgan": "^1.9.1",
    "passport": "^0.4.0",
    "passport-google-oauth": "^2.0.0",
    "pg": "^7.4.3",
    "react": "^16.8.6",
    "react-dom": "^16.8.6",
    "react-redux": "^5.0.7",
    "react-router": "^4.3.1",
    "react-router-dom": "^4.2.2",
    "redux": "^4.0.0",
    "redux-logger": "^3.0.6",
    "redux-thunk": "^2.2.0",
    "sequelize": "^4.37.8"
  },
  "devDependencies": {
    "babel-core": "^6.26.3",
    "babel-eslint": "^8.2.3",
    "babel-loader": "^7.1.4",
    "babel-polyfill": "^6.26.0",
    "babel-preset-env": "^1.7.0",
    "babel-preset-react": "^6.24.1",
    "babel-preset-stage-2": "^6.24.1",
    "babel-register": "^6.26.0",
    "css-loader": "^2.1.1",
    "eslint": "^4.19.1",
    "eslint-config-fullstack": "^5.0.0",
    "eslint-plugin-react": "^7.8.2",
    "nodemon": "^1.19.1",
    "redux-devtools-extension": "^2.13.8",
    "style-loader": "^0.21.0",
    "webpack": "^4.39.2",
    "webpack-cli": "^3.3.7"
  }
}

.babelrc

{
  "presets": ["babel-preset-react", "react", "env", "stage-2"]
}

You need to update your babel-loader rule:

{
  test: /(jsx|js)?$/, // you have app/index.js not app/index.jsx
  include: resolve(__dirname, './app'),
  loader: 'babel-loader',
  options: {
    presets: ['react']
  }
},

EDIT: Also I don't see the babel config in your package.json nor do I see a .babelrc so this is assuming that the config is in a .babelrc and properly set up for React/JSX (I see babel-preset-react in package.json; I am pretty sure you need that in your babel config).

Uncaught SyntaxError: Unexpected token < - JavaScript, Uncaught SyntaxError: Unexpected token <. Aug 24 2016 Ibrahim Diallo. This is a common error in JavaScript, and it is hard to understand at first why it happens � Firstly my map is working fine but when i used use-supercluster npm then my map is not working just showing Uncaught SyntaxError: Unexpected token '!'. Guys please

This was ultimately due to a naive error where I put my static middleware after my HTML send in my Express router. I spotted it when a classmate asked to see my routing setup, at which point it jumped out at me. Thanks for reviewing, and sorry for the rookie mistake!

SyntaxError: Unexpected token, The JavaScript exceptions "unexpected token" occur when a specific language construct was expected, but something else was provided. Uncaught SyntaxError: Unexpected token u in JSON at position 0 at JSON.parse (<anonymous>) at <anonymous>:1:6 In other words, your app is attempting to parse undefined, which is not valid JSON. There are two common causes for this.

I believe your problem may be the ordering of your babel presets. They get applied from right to left.

So for example a .babelrc file in one of my projects looks like this:

{
  "presets": ["@babel/preset-env", "@babel/preset-react"]
}

JavaScript Error Handling: Unexpected Token, A deep look at the Unexpected Token Error in JavaScript, including a short CHROME Uncaught SyntaxError: Unexpected token ) // FIREFOX� Uncaught SyntaxError: Unexpected token < in your Chrome developer's console tab is an indication of HTML in the response body. What you're actually seeing is your browser's reaction to the unexpected top line <!DOCTYPE html> from the server.

[Solved] Uncaught syntaxerror: invalid or unexpected token , That's a javascript error and javascript runs off what is sent to the browser (not what is in your cshtml file) so look at the page source. Hide Copy� The JavaScript exceptions "unexpected token" occur when a specific language construct was expected, but something else was provided. This might be a simple typo.

Code Passes but I got "Uncaught SyntaxError: Unexpected token , I put in my code and according to the system it passes however I did got this syntax error “Uncaught SyntaxError: Unexpected token )” here is my code from the� Unexpected Token errors are a subset of SyntaxErrors and, thus, will only appear when attempting to execute code that has an extra (or missing) character in the syntax, different from what JavaScript expects.

“Uncaught SyntaxError: Unexpected token , The error Uncaught SyntaxError: Unexpected token < is most commonly caused by your site's code referring to an asset that is no longer� Uncaught SyntaxError: Unexpected token < in your Chrome developer’s console tab is often an indication of 301 Redirects that could be caused by having a strange rule in your.htaccess file. What you’re actually seeing is your browser’s reaction to the unexpected top line <!DOCTYPE html> from the server.

Comments
  • Your page is trying to load http://localhost:3000/bundle.js. What do you see when you visit that url in your browser? I suspect it's not the bundle, but an HTML response.
  • Thanks for responding @hughes - I managed to resolve this, it was a silly beginner's error (see my answer). But I reverted my fix temporarily to test your suggestion and let you know what I saw- it was the same issue, a blank page with the Unexpected Token error in console. Have a good weekend!
  • Thank you and sorry- I neglected to post my .babelrc, it is added now. i updated the babel-loader rule as you indicated, but am still having the issue. I am honestly confused at how the various babel dependencies work with webpack, it feels like I am chasing my tail at times :) EDIT: I added babel-preset-react to .babelrc, but still receive the error in console. I will update my .babelrc in the original post to reflect what's in it now after adding this.
  • Was the change to the babel-loader rule required as well?
  • Hi @user1538301 - thanks for checking back in! I reverted the change to the babel-loader rule you recommended, and did not have any issues, so it doesn't appear to have been required to resolve this specific issue.