Reputation: 2157

ReactJS: Unexpected Token <

TL;DR: Why am I getting the error with my code? Previous question is different (online vs desktop) and it's answers don't work for me.

Complete code here

Based on code more or less originating here (I'm not quite to the end of the "lesson"

Question: Following this "intro to ReactJS". The walkthrough has Webpack/Babel setup. It runs with plain JS, but when I switch to JSX it chokes. This is similar to this question, but none of those answers seem to work. Main difference: Web Playground vs locally on my box?

The end of the video I'm working on leads to this code - although, I'm only 3/4 of the way through so parts aren't included yet. So, I've dialed it back into this fork with my edits (Sorry if I've butchered forking and pushing my changes...)

Notes: The BEFORE and AFTER is the only things I've changed. It works with javascript/jquery - but not with JSX. I found a couple typos, case errors (thisItem vs thisitem) and some items that shouldn't have been there (brackets removed).

I've changed "my" typed out version to more closely match "their" version (Hello instead of HelloWorld) and made other minor changes... same error.

The biggest remaining changes I see other than some spacing issues is versions - minor version bumps from the recorded class.

My Code:

.babelrc

{ "presets": [ "react" ] }

package.json

 {
  "name": "github-battle",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "webpack-dev-server",
    "production": "webpack -p"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "react": "^0.14.7",
    "react-dom": "^0.14.7"
  },
  "devDependencies": {
    "babel-core": "^6.6.0",
    "babel-loader": "^6.2.4",
    "babel-preset-react": "^6.5.0",
    "html-webpack-plugin": "^2.9.0",
    "webpack": "^1.12.14",
    "webpack-dev-server": "^1.14.1"
  }
}

webpack.config.js

var HtmlWebpackPlugin = require('html-webpack-plugin')
var HtmlWebpackPluginConfig = new HtmlWebpackPlugin({
    template: __dirname + '/app/index.html',
    filename: 'index.html',
    inject: 'body'
})

module.exports = {
    entry: [
        './app/index.js'
    ],
    output: {
        path: __dirname + '/dist',
        filename: "index_bundle.js"
    },
    module: {
        loaders:[
            { test: /\.js$/,include: __dirname + '/app',loader: "babel-loader" }
        ]
    },
    plugins: [HtmlWebpackPluginConfig]
}

app\index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Github Battle</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" >
</head>
<body>
<div id="app"></div>
</body>
</html>

app\index.js BEFORE

var app = document.getElementbyid('app')
app.innerHTML = 'Hello

app\index.js AFTER

var React = require('react');
var ReactDOM = require('react-dom');

var HelloWorld = React.createClass({
    render: function () {
        return <div> Hello World </div>
    }
});

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

Result:

> B:\Users\Chris\react-js\React-Fundamentals>npm run production
> [email protected] production B:\Users\Chris\react-js\React-Fundamentals
> webpack -p

Hash: 21e367e251c35209471c
Version: webpack 1.12.14
Time: 375ms
          Asset       Size  Chunks             Chunk Names
index_bundle.js  289 bytes       0  [emitted]  main
     index.html  305 bytes          [emitted]
   [0] multi main 28 bytes {0} [built] [1 error]
   [1] ./app/index.js 0 bytes [built] [failed]

ERROR in ./app/index.js
Module parse failed: B:\Users\Chris\react-js\React-Fundamentals\app\index.js Line 6: Unexpected token <
You may need an appropriate loader to handle this file type.
| var Hello = React.createClass({
|   render: function () {
|     return <div> Hello ReactJS World! </div>
|   }
| });
 @ multi main
Child html-webpack-plugin for "index.html":
        + 3 hidden modules

B:\Users\Chris\react-js\React-Fundamentals>

webpack.config.js #2: Same rror

var HtmlWebpackPlugin = require('html-webpack-plugin');
...
module.exports = {
  ...
  module: {
    loaders: [
      {test: /\.js$/, include: __dirname + '/app', loader: "babel-loader"}
    ],
    query: {
      presets: ['react']
    }
  },
  plugins: [HTMLWebpackPluginConfig]
};

Upvotes: 1

Answers (4)

WernerCD

Reputation: 2157

Working Code here

After banging my head against the wall (which, honestly, helps beat the knowledge in - so it isn't all for naught)... I've made a couple minor changes and seem to be successful now:

changed .js to .jsx - I like the "explicit" acknowledgement that these aren't plain ole js. (not required I think, more style)
~~I've removed the babelrc file and moved query into webpack.config... seems to be easier to compartmentalize things in a single file.~~ this actually isn't working for me... se'la'vie
The "solution" seems to be the __dirname + '/dir' changed into path.join(...) - with var path = require('path') actually included. I'll research (and ask a new question if I don't find one) how/why those two aren't equal, but I can only assume it has something to do with differing operating systems (Windows 10x64 for me).

EDIT:: Just some random poking, but include:__dirname + 'app', fails... as does '\app', '\app\', '/app', '/app/'... no clue why, but path.join(...) works.

Also worth noting, is that template: __dirname + '...', seems to work, but not the parts below it. Filename vs directory, so again not sure of the difference.

webpack.config.js

var path = require('path');

var HTMLWebpackPlugin = require('html-webpack-plugin');
var HTMLWebpackPluginConfig = new HTMLWebpackPlugin({
  template: __dirname + '/app/index.html',
  filename: 'index.html',
  inject: 'body'
});

module.exports = {
  entry: [
    './app/index.jsx'
  ],
  output: {
    path: path.join(__dirname, '/dist'),
    filename: "index_bundle.js"
  },
  module: {
    loaders: [{
        test: /\.jsx?$/, 
        include: path.join(__dirname, '/app'), 
        loader: "babel-loader"},
    ]
  },
  plugins: [HTMLWebpackPluginConfig]
};

index.jsx

var React = require('react');
var ReactDOM = require('react-dom');

var HelloWorld = React.createClass({
  render: function () {
    return <div> Hello ReactJS World! </div>
  }
});

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

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Github Battle</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
</head>
<body>
  <div id="app"></div>
  <script src="index_bundle.js"></script></body>
</html>

Upvotes: 1

Eni Arinde

Reputation: 565

From your second webpack config file, query should be inside the babel loader object.

module: {
  loaders: [
    {
      test: /\.js$/, 
      include: __dirname + '/app', 
      loader: "babel-loader",
      query: {
        presets: ['react']
      } 
    }
  ]
}

Don't forget to install the babel-preset-es2015 plugin if you plan on using es6.

Upvotes: 1

JulioCT

Reputation: 1117

silly question: have you tried removing the square brackets in the "entry" declaration?

module.exports = {
    entry: './app/index.js',
    output: {
        path: __dirname + '/dist',
        filename: "index_bundle.js"
    },
    module: {
        loaders:[
            {
                test: /\.js$/,
                include: __dirname + '/app',
                loader: "babel-loader"
            }
        ]
    },
    plugins: [HtmlWebpackPluginConfig]
}

Upvotes: 1

Daniel A. White

Reputation: 190945

You need to rename index.js to index.jsx.

Upvotes: 1

ReactJS: Unexpected Token &lt;

Answers (4)

Related Questions

ReactJS: Unexpected Token <