Error on import?

Question

I'm setting up a phoenix server and I'm planning to use React on the front-end.

I'm running into the problem when I try to import React that webpack can't compile the js.

This is the error that I get and I hope you guys can help me out.

ERROR in ./web/static/js/app.js Module parse failed: /home/steelo/node_modules/babel-loader/index.js!/home/steelo/node_modules/eslint-loader/index.js!/home/steelo/web/static/js/app.js Line 1: Unexpected token You may need an appropriate loader to handle this file type. | import React from 'react';

My package.json look like this

{
  "name": "steelo",
  "version": "0.0.0",
  "description": "",
  "main": "webpack.config.js",
  "scripts": {},
  "author": "",
  "dependencies": {
    "brunch": "^1.8.5",
    "babel-brunch": "^5.1.1",
    "sass-brunch": "~1.9.1",
    "clean-css-brunch": ">= 1.0 < 1.8",
    "css-brunch": ">= 1.0 < 1.8",
    "javascript-brunch": ">= 1.0 < 1.8",
    "uglify-js-brunch": ">= 1.0 < 1.8",
    "eslint-plugin-react": "~3.8.0",
    "react": "~0.14.2",
    "react-dom": "~0.14.2",
    "rx-dom": "~7.0.3",
    "rx": "~4.0.6"
  },
  "devDependencies": {
    "webpack": "~1.12.3",
    "babel": "~6.0.15",
    "babel-loader": "~6.1.0",
    "babel-core": "~6.1.2",
    "babel-eslint": "~4.1.4",
    "eslint": "~1.9.0",
    "eslint-loader": "~1.1.1",
    "node-sass": "~3.4.1",
    "style-loader": "~0.13.0",
    "postcss-loader": "~0.7.0",
    "css-loader": "~0.22.0",
    "sass-loader": "~3.1.1",
    "autoprefixer": "~6.1.0"
  }
}

And my webpack.config.js looks like this

var autoprefixer = require('autoprefixer');
var webpack = require('webpack');

module.exports = {
    entry: "./web/static/js/app.js",
    output: {
        path: "./priv/static/js",
        filename: "app.js"
    },
    eslint: {
        configFile: '.eslintrc'
    },
    module: {
        preLoaders: [
            {test: /\.js$/, loader: 'eslint-loader', exclude: [/node_modules/, /web\/static\/vendor/]}
        ],
        loaders: [
            {test: /\.js$/, exclude: [/node_modules/, /web\/static\/vendor/], loader: 'babel-loader'},
            {test: /\.scss$/, loader: 'style!css!sass!postcss-loader'}
        ]
    },
    postcss: [ autoprefixer({ browsers: ['last 2 version'] }) ]
};

Answer 1

To use ES2015 and React in Babel 6 you need to install es2015 and react presets:

npm install --save-dev babel-preset-es2015 babel-preset-react

Then configure babel to use them. Create a .babelrc in your project root with the following:

.babelrc

{
  "presets": ["es2015", "react"]
}