CODEWITHSUNDEEP
reactjswebpackbabeljsjsx
maillard
maillard

Reputation: 680

Webpack with babel-loader does not recognize JSX code

I'm having trouble getting a quite basic setup with webpack and babel working. I need babel to compile JSX, i don't use ES2015 features.

There are quite a few questions here on SO about this exact problem, but they all seem to be resolved by installing babel-preset-react or adding the preset option to babel in webpack.config.js all of which i have done already (I think).

I'm sure it's a simple thing I'm missing, but I just can't see it.

I extracted just the files needed to demonstrate my problem into this gist (i used dashes in the filenames to indicate subfolders since you can't have folders in gists). My webpack.config.js looks like this:

module.exports = {
  entry: [
    './app/js/app.js'
  ],
  resolve: {
    extensions: ['', '.js', '.jsx']
  },
  module: {
    loaders: [
      {
        test: /\.jsx?$/,
        include: __dirname + '/app/js/',
        loader: 'babel-loader?presets[]=react',
      }
    ]
  },
  output: {
    filename: "bundle.js",
    path: __dirname + '/public'
  },
};

Note: in package.json everything is listed under 'dependencies', since i'm hosting this on heroku which does not install devdependencies (at least not by default)

Upvotes: 1

Views: 2091

Answers (2)

Mad Wombat
Mad Wombat

Reputation: 15105

For what it is worth, I am currently using webpack with latest babel with the following config line

{
    test: /\.jsx?$/,
    exclude:  /(node_modules|bower_components)/,
    loader: 'babel',
    query: {
        presets: ['react', 'es2015']
    }
}

Since you don't use es2015, you should be able to just leave the react preset in the list. Maybe babel-loader?presets[]=react is not working the way you expect it to.

Upvotes: 1

pisomojado
pisomojado

Reputation: 903

I banged my head against this for a long time as well. It turned out that the include wasn't finding my directories. The easiest way to fix, as pointed out in the comment to the marked answer above, is to use an exclude, e.g. exclude: /node_modules/, or whatever you need to exclude, and it'll start working.

If you're new to webpack, you'll find the error you get from the above kind of cryptic (will look like a parse error on your js, even though you thought babel should have transformed the JSX; the deal is that it didn't).

Upvotes: 1

Related Questions