Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Using webpack with babel and babel-preset-react and babel-preset-es2015

I'm trying to transcompile my react/es6 code and am coming from browserify. I'm struggling to create a webpack build because of the new babel 6 release and the fact that most of the tutorials out there are now outdated. This works in my .babelrc:

{
  "presets": ["react"]
}

But when I change it to this:

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

it throws this cryptic error: ERROR in ./client/App.js Module build failed: Error: You gave us a visitor for the node type "NumericLiteral" but it's not a valid type

This is my webpack.config.js if that helps at all:

module.exports = {
  entry: "./client/App.js",
  output: {
    filename: "public/bundle.js"
  },
  resolve: {
    extensions: ['', '.js', '.jsx']
  },
  module: {
    loaders: [
      {
        test: /\.jsx?$/,
        exclude: /(node_modules|bower_components)/,
        loader: 'babel'
      }
   ]
  }
};

Is there something obvious I'm missing? I've also swapped the order of the presets and it doesn't seem to make a difference. I have babel-core, babel-loader, babel-preset-es2015, babel-preset-react and webpack in my node modules.

like image 882
syu15 Avatar asked Nov 03 '15 19:11

syu15


People also ask

What is the purpose of using '@ Babel preset React preset?

In Babel, a preset is a set of plugins used to support particular language features. The two presets Babel uses by default: es2015 : Adds support for ES2015 (or ES6) JavaScript. react : Adds support for JSX.

What is Babel preset ENV?

@babel/preset-env is a smart preset that allows you to use the latest JavaScript without needing to micromanage which syntax transforms (and optionally, browser polyfills) are needed by your target environment(s). This both makes your life easier and JavaScript bundles smaller!

What is Webpack and Babel in React JS?

Webpack is a modular build tool that has two sets of functionality — Loaders and Plugins. Loaders transform the source code of a module. For example, style-loader adds CSS to DOM using style tags. sass-loader compiles SASS files to CSS. babel-loader transpiles JS code given the presets.


1 Answers

I've had the same issue and it seems to have gone away after I removed the node_modules directory and reinstalled all the dependencies.

like image 192
vially Avatar answered Oct 08 '22 12:10

vially