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'] }) ]
};

You probably need to configure babel for es2015 https://medium.com/@malyw/how-to-update-babel-5-x-6-x-d828c230ec53#.yqxukuzdk — Nick Tomlin, Nov 09 '15 at 18:40
Possible duplicate of [Babel file is copied without being transformed](http://stackoverflow.com/questions/33440405/babel-file-is-copied-without-being-transformed) — Felix Kling, Nov 09 '15 at 21:25

score 1 · Accepted Answer · answered Nov 09 '15 at 18:48

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"]
}

answered Nov 09 '15 at 18:48

dreyescat

13,558
5
50
38

Any idea why I need to add the presets in the webpack config file, it seems like it doesnt take the presets inside .babelrc – user1322163 Nov 09 '15 at 19:04
It works for me. Try to remove `node_modules` and `npm install` again. – dreyescat Nov 09 '15 at 19:14
@user1322163 It's weird... but if you remove the `eslint-loader` does it work with `.babelrc`? Because I tried a simplified version with `babel-loader` and `eslint-loader` using `.babelrc` and I think I could reproduce what it is happening to you. – dreyescat Nov 09 '15 at 21:24

Error on import?

1 Answers1

.babelrc