Babel command line not transpiling import statements - React

user_161633 0
Viewed 1274

I have the following JSX file.

import React from "react";

export default class Code extends React.Component {
    render() {
        return <div></div>
    }
}

React.render(<Code />, document.getElementById('code'));

I'm running Babel from the command line using the following

babel --plugins transform-react-jsx app.jsx -d dist

I get the following output

import React from "react";
export default class Code extends React.Component {
  render() {
    return React.createElement("div", null);
  }

}
React.render(React.createElement(Code, null), document.getElementById('code'));

This obviously does not run in the browser since import and export are not valid. What settings do I need to specify for Babel to transfrom es6 imports?

Here is my .babelrc file

{
    "plugins": [
        [
            "transform-react-jsx",
            {
                "pragma": "dom" // default pragma is React.createElement
            },
        ]
    ]
}

Thanks

babeljs reactjs ecmascript-6
1 Answers

What about using preset-react instead which will also include transform-react-jsx plugin.

  1. Install the preset module npm install --save-dev @babel/preset-react

  2. Add the presets to your .babelrc file, i.e.

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

  3. Run your babel script babel app.jsx -d dist

If you don't want to add .babelrc file just run the script as so after installing the preset module babel --presets @babel/preset-react app.jsx -d dist

More information on the preset-react here

user_59788750
Related