CODEWITHSUNDEEP
javascriptreactjsbabeljs
Kishan Mehta
Kishan Mehta

Reputation: 2678

Not able to transpile jsx to js using babel

I am learning react and here is my simple project sturcture:

my_project
 --node_modules
 --index.js
 --index.html
 --package.json
 --.babelrc

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="root"></div>

<script src="index.js"></script>
</body>
</html>

index.js

import React from 'react';
import ReactDOM from 'react-dom';

ReactDOM.render(
  <h1>Hello, world!</h1>,
  document.getElementById('root')
);

package.json

{
  "name": "my_project",
  "version": "1.0.0",
  "description": "frontend using react js",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "babel src -d dist"
  },
  "scripts": {
    "build": "babel --presets es2015 -d dist"
  },
  "author": "kishan",
  "license": "ISC",
  "dependencies": {
    "react": "^15.4.2",
    "react-dom": "^15.4.2"
  },
  "devDependencies": {
    "babel-cli": "^6.23.0",
    "babel-core": "^6.23.1",
    "babel-loader": "^6.4.0",
    "babel-preset-es2015": "^6.22.0",
    "babel-preset-react": "^6.23.0",
    "webpack": "^2.2.1"
  },
  "babel": {
    "plugins": ["transform-react-jsx"],
    "ignore": [
      "foo.js",
      "bar/**/*.js"
    ]
  }
}

webpack.config.js

var debug = process.env.NODE_ENV !== "production";
var webpack = require('webpack');

config = {
  context: __dirname,
  devtool: debug ? "inline-sourcemap" : null,
  entry: "./index.js",
  output: {
    path: __dirname + "/build",
    filename: "bundle.js"
  },
  plugins: debug ? [] : [
    new webpack.optimize.DedupePlugin(),
    new webpack.optimize.OccurenceOrderPlugin(),
    new webpack.optimize.UglifyJsPlugin({ mangle: false, sourcemap: false }),
  ],
};

module.exports = config;

I am getting following error in console in browser for index.js line 1:

Uncaught SyntaxError: Unexpected token import

Please help me what is wrong with this code?

Upvotes: 0

Views: 538

Answers (2)

Shubham Khatri
Shubham Khatri

Reputation: 282000

Add babel-loader in webpack to transpile jsx or js

var debug = process.env.NODE_ENV !== "production";
var webpack = require('webpack');

config = {
  context: __dirname,
  devtool: debug ? "inline-sourcemap" : null,
  entry: "./index.js",
  output: {
    path: __dirname + "/build",
    filename: "bundle.js"
  },
  module: {
      loaders: [
         {
            test: /\.jsx?$/,
            exclude: /node_modules/,
            loader: 'babel-loader',

            query: {
               presets: ['es2015', 'react']
            }
         }
      ]
   }
  plugins: debug ? [] : [
    new webpack.optimize.DedupePlugin(),
    new webpack.optimize.OccurenceOrderPlugin(),
    new webpack.optimize.UglifyJsPlugin({ mangle: false, sourcemap: false }),
  ],
};

module.exports = config;

Starting the webpack in watch mode and will not require you to build again to do that add the followign in your package.json

"scripts": {
    "build": "webpack --progress --color --config  webpack.config.js --watch",
}

You may also use webpack-dev-server in hot-loading mode

Upvotes: 1

Mayank Shukla
Mayank Shukla

Reputation: 104499

You forgot to define the babel-loader in webpack file, put this part:

module: {
      loaders: [
         {
            test: /\.jsx?$/,
            exclude: /node_modules/,
            loader: 'babel',

            query: {
               presets: ['es2015', 'react']
            }
         }
      ]
   }

Use this webpack file:

var debug = process.env.NODE_ENV !== "production";
var webpack = require('webpack');

var config = {
   context: __dirname,
   devtool: debug ? "inline-sourcemap" : null,
   entry: "./index.js",
   output: {
      path: __dirname + "/build",
      filename: "bundle.js"
   },
   module: {
      loaders: [
         {
            test: /\.jsx?$/,
            exclude: /node_modules/,
            loader: 'babel',

            query: {
               presets: ['es2015', 'react']
            }
         }
      ]
   },
   plugins: debug ? [] : [
      new webpack.optimize.DedupePlugin(),
      new webpack.optimize.OccurenceOrderPlugin(),
      new webpack.optimize.UglifyJsPlugin({ mangle: false, sourcemap: false }),
   ],   
}

module.exports = config;

Update:

From Webpack Doc:

When using watch mode, webpack installs file watchers to all files, which were used in the compilation process. If any change is detected, it’ll run the compilation again. When caching is enabled, webpack keeps each module in memory and will reuse it if it isn’t changed.

Upvotes: 1

Related Questions