austin austin - 3 months ago 36
Node.js Question

Why is a bracket '{' an unexpected token when trying to import in react?

I am trying to use Facebook's fixed-data-table module, simply following the basic example on this page:
https://facebook.github.io/fixed-data-table/

However, I am getting the following error when I try to use webpack to bundle my files using 'npm run prod', which runs 'npm webpack -p':

SyntaxError: Unexpected token: punc ({) [./app/index.js:1,0]


These is only one line in index.js:

import {Table, Column, Cell} from 'fixed-data-table';


This is what my package.json file looks like:

{
"name": "datatables",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"prod": "webpack -p",
"start": "webpack-dev-server"
},
"author": "",
"license": "ISC",
"dependencies": {
"fixed-data-table": "^0.6.3",
"react": "^15.3.1",
"react-dom": "^15.3.1"
},
"devDependencies": {
"babel-core": "^6.13.2",
"babel-loader": "^6.2.5",
"babel-preset-react": "^6.11.1",
"css-loader": "^0.23.1",
"html-webpack-plugin": "^2.22.0",
"style-loader": "^0.13.1",
"webpack": "^1.13.2",
"webpack-dev-server": "^1.15.0"
}
}


I'm just trying to get the basic example code working. Thanks.

edit: add webpack:

var HtmlWebpackPlugin = require('html-webpack-plugin');
var HtmlWebpackPluginConfig = new HtmlWebpackPlugin({
template: __dirname + '/app/index.html',
filename: 'index.html',
inject: 'body'
});
var CssWebpack = new HtmlWebpackPlugin({
template: __dirname + '/app/fixed-data-table.css',
filename: 'fixed-data-table.css',
inject: 'head'
});

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: /\.css$/, loader: "style-loader!css-loader" }
]
},
plugins: [HtmlWebpackPluginConfig]
}

Answer

Node doesn't currently support import statements. Should just have to add the presets to your webpack loader configuration and it will transpile properly

npm install babel-preset-es2015 babel-preset-react

module: {
    loaders: [
        { 
            test: /\.js$/,
            exclude: /node_modules/,
            loader: "babel-loader",
            presets: ["es2015", "react"]
        },
        { test: /\.css$/, loader: "style-loader!css-loader" }
    ]
},
Comments