CODEWITHSUNDEEP
javascriptbabeljs
Raul Vallespin
Raul Vallespin

Reputation: 1323

Babel file is copied without being transformed

I have this code:

"use strict";

import browserSync from "browser-sync";
import httpProxy from "http-proxy";

let proxy = httpProxy.createProxyServer({});

and I have installed babel-core and babel-cli globally via npm. The point is when I try to compile with this on my terminal:

babel proxy.js --out-file proxified.js

The output file gets copied instead of compiled (I mean, it's the same as the source file).

What am I missing here?

Upvotes: 111

Views: 41926

Answers (10)

Aakash
Aakash

Reputation: 23805

As of 2020, Jan:

STEP 1: Install the Babel presets:

yarn add -D @babel/preset-env @babel/preset-react

STEP 2: Create a file: babelrc.js and add the presets:

module.exports = {
  // ...
  presets: ["@babel/preset-env", "@babel/preset-react"],
  // ...
}

STEP 3:- Install the babel-loader:

yarn add -D babel-loader

STEP 4:- Add the loader config in your webpack.config.js:

{
//...
  module: [
    rules: [
      test: /\.(js|mjs|jsx|ts|tsx)$/,
      loader: require.resolve('babel-loader')
    ]
  ]
//...
}

Good Luck...

Upvotes: 3

mmla
mmla

Reputation: 1654

Most of these answers are obsolete. @babel/preset-env and "@babel/preset-react are what you need (as of July 2019).

Upvotes: 5

Aduku
Aduku

Reputation: 49

Ultimate solution

I wasted 3 days on this 

import react from 'react' unexpected identifier

I tried modifying webpack.config.js and package.json files, and adding .babelrc, installing & updating packages via npm, I've visited many, many pages but nothing has worked.

What worked? Two words: npm start. That's right.

run the 

npm start

command in the terminal to launch a local server

...

(mind that it might not work straight away but perhaps only after you do some work on npm because before trying this out I had deleted all the changes in those files and it worked, so after you're really done, treat it as your last resort)

I found that info on this neat page. It's in Polish but feel free to use Google translate on it.

Upvotes: 0

Legends
Legends

Reputation: 22702

In year 2018:

Install following packages if you haven't yet:

npm install babel-loader babel-preset-react

webpack.config.js

{
    test: /\.jsx?$/,
    exclude: /node_modules/,
    use: [
      {
        loader: 'babel-loader',
        options: {
          presets: ['es2015','react']  // <--- !`react` must be part of presets!
        }
      }
    ],
  }

Upvotes: 0

loganfsmyth
loganfsmyth

Reputation: 161517

Babel is a transformation framework. Pre-6.x, it enabled certain transformations by default, but with the increased usage of Node versions which natively support many ES6 features, it has become much more important that things be configurable. By default, Babel 6.x does not perform any transformations. You need to tell it what transformations to run:

npm install babel-preset-env

and run

babel --presets env proxy.js --out-file proxified.js

or create a .babelrc file containing

{
    "presets": [
        "env"
    ]
}

and run it just like you were before.

env in this case is a preset which basically says to compile all standard ES* behavior to ES5. If you are using Node versions that support some ES6, you may want to consider doing

{
    "presets": [
        ["env", { "targets": { "node": "true" } }],
    ]
}

to tell the preset to only process things that are not supported by your Node version. You can also include browser versions in your targets if you need browser support.

Upvotes: 170

OSP
OSP

Reputation: 1487

fix your .babelrc

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

Upvotes: 0

Aakash
Aakash

Reputation: 23805

First ensure you have the following node modules:

npm i -D webpack babel-core babel-preset-es2015 babel-preset-stage-2 babel-loader

Next, add this to your Webpack config file (webpack.config.js) :

// webpack.config.js
...
module  :  {
  loaders  :  [
    {
      test    :  /\.js$/,
      loader  :  'babel',
      exclude :  /node_modules/,
      options :  {
        presets  :  [ 'es2015', 'stage-2' ] // stage-2 if required
      } 
    } 
  ]
}
...

References:

Good Luck!

Upvotes: 3

robro
robro

Reputation: 1800

Same error, different cause:

Transpiling had worked before and then suddenly stopped working, with files simply being copied as is.

Turns out I opened the .babelrc at some point and Windows decided to append .txt to the filename. Now that .babelrc.txt wasn't recognized by babel. Removing the .txt suffix fixed that.

Upvotes: 1

w00t
w00t

Reputation: 18281

I had the same problem with a different cause:

The code I was trying to load was not under the package directory, and Babel does not default to transpiling outside the package directory.

I solved it by moving the imported code, but perhaps I could have also used some inclusion statement in the Babel configuration.

Upvotes: 3

Micah Stubbs
Micah Stubbs

Reputation: 1927

npm install --save-dev babel-preset-node5

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

...and then creating a .babelrc with the presets:

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

...resolved a very similar issue for me, with babel 3.8.6, and node v5.10.1

https://www.npmjs.com/package/babel-preset-node5
https://www.npmjs.com/package/babel-preset-react

Upvotes: 1

Related Questions