Why new react preset installation in laravel gives error of The JSX syntax extension is not currently enabled

Question

I am trying using React ui with laravel. Command I run:

laravel new project
npm i
composer require laravel/ui
php artisan ui react
npm i & npm run dev

After this, when I do php artisan serve it says (About Example.js):

 ERROR: The JSX syntax extension is not currently enabled

I have tried different solutions on google of creating .babelrc and babel.config.js files but nothing removes the error. Can anyone tells why is it so? What is proper configuration of react with laravel?

Answer 1

If you have installed fresh laravel, it comes with vite.

Since you want to use React, just save the .js files in resources/js as .jsx and then run the npm run dev command again.

They explain it in the document: https://laravel.com/docs/9.x/vite#react

For blade files:

@viteReactRefresh
@vite('resources/js/app.jsx')

For source files: https://laravel.com/docs/9.x/vite#working-with-scripts

---

---

Or u can choose another path like this: https://laravel.com/docs/9.x/starter-kits#breeze-and-inertia