I have a react app and Im trying to create a dynamic form using react-jsonschema-form, I have the below index.js file below is the .babelrc file and I've the webpack config like below package.json once I run the app I'm getting console error Uncaught SyntaxError: Unexpected token import in reactjs app Can anyone help to resolve this issue, since I'm

Uncaught SyntaxError: Unexpected token import in reactjs app

I have a react app and Im trying to create a dynamic form using react-jsonschema-form, I have the below index.js file

import React, { Component } from "react";
import { render } from "react-dom";

import Form from "react-jsonschema-form";

const schema = {
  title: "Todo",
  type: "object",
  required: ["title"],
  properties: {
    title: {type: "string", title: "Title", default: "A new task"},
    done: {type: "boolean", title: "Done?", default: false}
  }
};


const log = (type) => console.log.bind(console, type);

render((
<Form schema={schema}
    onChange={log("changed")}
    onSubmit={log("submitted")}
    onError={log("errors")} />), document.getElementById("app"));

below is the .babelrc file

{
  "presets": ["react"]
}

and I’ve the webpack config like below

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$/, 
            exclude: /node_modules/, 
            loader: "babel-loader"
        },
        {
            test: /.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)$/,
            loader: 'file?name=assets/[name].[hash].[ext]'
        },
        {
            test: /.html$/,
            loader: 'html'
        }
    ]
},
plugins: [HtmlWebpackPluginConfig]
}

package.json

{
  "name": "Sample",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "production": "webpack -p",
    "start": "webpack-dev-server"
   },
  "author": "Sample",
  "license": "ISC",
  "dependencies": {
    "react": "^15.4.2",
    "react-bootstrap": "^0.30.7",
    "react-dom": "^15.4.2",
    "react-router": "^2.0.0-rc5"
   },
  "devDependencies": {
    "babel-core": "^6.22.1",
    "babel-loader": "^6.2.10",
    "babel-preset-react": "^6.22.0",
    "html-webpack-plugin": "^2.28.0",
    "html-loader": "^0.4.3",
    "file-loader": "^0.8.5",
    "webpack": "^1.14.0",
    "webpack-dev-server": "^1.16.2",
    "axios":"0.15.3",
    "bootstrap":"3.3.7",
    "jquery":"3.1.1"
  }
}

once I run the app I’m getting console error

Uncaught SyntaxError: Unexpected token import in reactjs app

Can anyone help to resolve this issue, since I’m new to react, facing difficulties here. Thanks!

Answer

ECMAScript modules aren’t something that any browser supports natively yet. I believe Webpack 2 handles them out-of-the-box, but from your config, it seems like you are using Webpack 1, so you need to install a plugin for that:

npm install --save-dev babel-plugin-transform-es2015-modules-commonjs

and extend your .babelrc:

{
  "presets": ["react"],
  "plugins": ["transform-es2015-modules-commonjs"]
}

Advertisement

Answer