7

I'm new to babel and I'm trying to convert my main.jsx file to main.js. I installed the following babel plugin.

npm install --save-dev babel-plugin-transform-react-jsx

Created a file called .babelrc in the application root directory.

{
   "plugins": ["transform-react-jsx"]
}

My app is using the express server, so on running node app.js I was expecting the babel to transform main.jsx to main.js but nothing happens. Can any one point out what I'm doing wrong ?

1
  • Where do you run babel command? Also, the react preset is probably a better thing to use in the .babelrc. Mar 30, 2017 at 7:51

4 Answers 4

13

if you are only using babel to transform jsx to js, this is what you need :

installation

  • install babel-cli as global (optional) sudo npm install -g babel-cli
  • install babel-preset-es2015 (optional. if your code using es6 standard) npm install babel-preset-es2015
  • install babel-preset-react (required)

configuration

in your root of project, add this file .babelrc and write this to it

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

or

{
  "presets": ["react"]
}

run

babel source_dir -d target_dir
1

Just follow the instructions at https://www.npmjs.com/package/babel-plugin-transform-react-jsx

First, create a new folder, test, and from the folder init a new project:

npm init

Install babel CLI

npm install --save-dev babel-cli

Then install babel-plugin-transform-react-jsx

npm i babel-plugin-transform-react-jsx

In the test folder create a sample jsx file index.jsx

var profile = <div>
  <img src="avatar.png" className="profile" />
  <h3>{[user.firstName, user.lastName].join(' ')}</h3>
</div>;

And finally, run the transofmation command in you terminal from the test folder:

.\node_modules\.bin\babel --plugins transform-react-jsx index.jsx

You'll see the output in you terminal window.

1
  • This gives me following error: Uncaught ReferenceError: require is not defined. How can I include this with babel? Jun 6, 2018 at 1:10
1

As of 2023 if you are using babel to transform jsx to js, this is what you will need to do:

Install Packages

Install the following globally on your machine:

npm install -g @babel/cli
npm install -g @babel/core
npm install -g @babel/preset-react

or install the following as a project dependency (my personal preference):

npm install --save-dev @babel/cli
npm install --save-dev @babel/core
npm install --save-dev @babel/preset-react

Create Configuration File

Create a .babelrc config file at the root of your project with the following setting as a bare minimum:

{
    "presets": ["@babel/preset-react"]
}

You should review the babel docs if you have a more complicated use case and determine what additional settings you may need to add. You can find the settings for compiling jsx to js on the @babel/preset-react page.

Compile

You can compile any jsx file into js by running the following command in your terminal:

npx babel [jsx-file-here.jsx] -d [output-directory]

If your jsx file imports anything please keep the following in mind:

  1. This will not import any imported code. You will need to also compile any files that are imported. You can then use your code as a browser module: see next 2 points.
  2. JS imports are widely supported now (see also) but you will need to add type="module" to the script tag in your HTML.
  3. Remember you must include the file extension .js in your import statements still! No browser will intuptret import Foo from './bar' as import Foo from './bar.js.
  4. If you do not want to do the previous you can use something like rollup.js to bundle all the files into a single script.
0

You can configure webpack and use babel as a loader to transpile your jsx

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

module.exports ={

    context: path.join(__dirname, "src"),
    devtool: "inline-sourcemap",
    entry: "./main.js",
    module: {
        loaders: [
            {
                test: /\.js?$/,
                exclude: /node_modules/,
                loader: 'babel-loader',
                query: {
                    presets: ['react', 'es2015','stage-0'],

                }
            }
        ]
    },
    output: {
        path: __dirname+ "/src",
        filename: "client.min.js"
    }
}

Tutorials

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.