CODEWITHSUNDEEP
webpackbabeljs
matiit
matiit

Reputation: 8017

Webpack, babel and react can't compile basic setup

I did it many times but now I feel like a dumbass.

It just does not work.

I have no idea what am I doing wrong. I hope it's something ultra-stupid.

webpack.config.js:

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

module.exports = {
  entry: './src/index.jsx',
  output: {
    path: __dirname + '/js/',
    filename: 'index.js'
  },
  module: {
    loaders: [
      {
        test: /.jsx$/,
        exclude: /node_modules/,
        loaders: ['babel'],
        include: path.join(__dirname, 'src')
      }
    ]
  },
  plugins: [
    new webpack.NoErrorsPlugin()
  ]
};

src/index.jsx:

import React from 'react'
import { render } from 'react-dom'
import ColorObj from 'components/ColorObject'

let rootElement = document.getElementById('color-game');

render(
  <ColorObj backgroundColor="green" textColor="black" />,
  rootElement
);

Error when running webpack:

Hash: d9f2eead3307d16f76f3
Version: webpack 1.12.8
Time: 350ms
    + 1 hidden modules

ERROR in ./src/index.jsx
Module build failed: SyntaxError:     /Users/matiit/Documents/Private/Projects/color-game/src/index.jsx:         Unexpected token (8:2)
   6 | 
   7 | render(
>  8 |   <ColorObj backgroundColor="green" textColor="black" />,  
     |   ^
   9 |   rootElement
  10 | );
  11 |

I have no idea what is wrong. I know it's very basic error but I'll appreciate any help.

Upvotes: 0

Views: 272

Answers (1)

jdlm
jdlm

Reputation: 6664

I don't know how your Babel setup looks currently, but you need these presets to properly parse React/ES2015 syntax. For Babel >= 6.0.0:

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

In your .babelrc:

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

Upvotes: 2

Related Questions