Solving Babel issue in Ejected React Application

A few days ago I was working on a React web application. Once I finished my development, I had ejected the app to get more control of the underlying scripts and Webpack bundling. But then after ejecting the application stopped running and was throwing a Babel issue. If you are having a similar problem then this article will help you in Solving Babel issue in Ejected React Application.

What is the issue?

After ejecting from the React application, when you try to run the application locally you will get a JavaScript error saying that it does not understand JSX syntax.

What’s happening here is that Babel can’t compile JSX syntax. Somehow it does not understand it. Before ejecting the application works fine. After ejecting we get the error. Let’s continue and see how to fix this thing.

How to reproduce the issue?

Start by bootstrapping a new React project (if you do not have one)

npx create-react-app test-application

Use the npx command as this is recommended by the Create React App (CRA).

Once your project is created, run it locally.

cd test-application 
yarn start

You should have your React application running at localhost:3000 now. 3000 is the default port.

Go ahead and add your own component if you would like to. Copy-paste the code that I have shared below.

/* /src/components/Page1.js */
import React from 'react';
const Page1 = () => {
    return (
        <div>
            <h1>This is Page1</h1>
        </div>
    );
}
export default Page1;

Now import Page1 inside app.js

/* /src/App.js */
import React from 'react';
import './App.css';
import Page1 from './components/Page1';
function App() {
  return (
    <div className="App">
      <Page1 ></Page1>
    </div>
  );
}
export default App;

Your local server should be already running. Once you save the file, it will reload the page and you should see a page like below

Now, let’s eject the React application.

yarn eject

After eject completion, start the local server again to run the application.

yarn start

Now, you will be greeted with the error below.

index.js:1 ./src/components/Page1/Page1.js
SyntaxError: /Users/josephkhan/htdocs/new-preparations/reactjs/test-application/src/components/Page1/Page1.js: Unexpected token (5:8)
3 | const Page1 = () => {
  4 |     return (
> 5 |         <div>
    |         ^
  6 |             <h1>This is Page1</h1>
  7 |         </div>
  8 |     );

It throws an Unexpected token syntax error. The issue is that Babel is no longer able to understand JSX (HTML like) syntax inside a .js file. Let’s see how to fix the issue.

How to fix the issue?

Go ahead and create a babel.config.js file inside your project root

touch babel.config.js

Copy the configuration below and paste it inside your babel.config.js file.

module.exports = function(api) {
    const presets = ["react-app"];
    const plugins = [];
    if (api.env("development")) {
      // plugins.push('react-hot-loader/babel');
    }
    return { presets, plugins };
};

Start the local server again

yarn start

Now your application should be able to run again.

Why did this error happen? — While ejecting the CRA scripts somehow messed up with the Babel configs and missed the React preset. This did not happen in previous versions of Create React App.

These are the versions that I had when the error showed up.

"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-scripts": "3.4.1"

Cheers! Have a good day!

Check out my Blog or Subscribe to my newsletters for similar articles. I write on Front End, Best Practices, New Technologies, and the Web. I send out an email every two weeks with new articles, tips & tricks, news, free materials. No spamming, of course.

Joseph Khan

Originally published at https://josephkhan.me on April 9, 2020.