CODEWITHSUNDEEP
javascriptreactjsbabeljs
subhro
subhro

Reputation: 85

Babel showing unexpected error, couldn't find the solution

I am trying to run a JSX code, but getting this error. I did install npm install -g babel-cli npm install --save babel-preset-env babel-preset-react But I am still getting the error.

This is my code index.html

 <html>
    <body>
        <div id="appRoot"></div>
        <script src="https://unpkg.com/[email protected]/umd/react.production.min.js"></script>
        <script src="https://unpkg.com/[email protected]/umd/react-dom.production.min.js"></script>
        <script src="scripts/app.js" type="text/jsx"></script>
    </body>
</html>

src/app.js -> JSX code

console.log("App.js is running");

const appRoot = document.querySelector("#appRoot");
const template = <p>This is a JSX code!</p>;

ReactDOM.render(template, appRoot);

babel command -> babel command to convert JSX to ES5

babel src/app.js --out-file=public/scripts/app.js --preset=env,react -watch

error

subhro@subhro-X550LD:~/React-Project$ babel src/app.js --out-file=public/scripts/app.js --preset=env,react -watch
SyntaxError: src/app.js: Unexpected token (4:17)
  2 | 
  3 | const appRoot = document.querySelector("#appRoot");
> 4 | const template = <p>This is a JSX code!</p>;
    |                  ^
  5 | 
  6 | ReactDOM.render(template, appRoot);

Upvotes: 0

Views: 398

Answers (1)

Chaoyenpo
Chaoyenpo

Reputation: 389

you have typo:

preset => presets

babel src/app.js --out-file=public/scripts/app.js --presets=env,react -watch

Upvotes: 1

Related Questions