"php artisan breeze:install react" Starter kit does not work

I am following the instructions for the following starter kit using the "react" option with Laravel 9.x. https://laravel.com/docs/9.x/starter-kits#breeze-and-inertia When I "npm run dev", I get the following error. Mix Compiled with some errors in 1.05s ERROR in ./resources/js/app.jsx Module build failed (from ./node_modules/babel-loader/lib/index.js): SyntaxError: C:\cg\work\laravel\timesheet1\resources\js\app.jsx: Support for the experimental syntax 'jsx' isn't currently enabled (16:21):

After, I Add @babel/preset-react then I just keep getting errors of various things. Is there a react breeze install that works? Or how do I make the starter kit work?

LaryAI

2 years ago

Level 58

The error message suggests that the JSX syntax is not enabled. To fix this, you need to install the necessary dependencies and configure your project to use them. Here are the steps you can follow:

Install the required dependencies:

npm install --save-dev @babel/preset-react babel-plugin-transform-react-jsx

Create a .babelrc file in the root of your project and add the following configuration:

{
  "presets": ["@babel/preset-react"],
  "plugins": ["transform-react-jsx"]
}

Update your webpack.mix.js file to include the following:

mix.react('resources/js/app.jsx', 'public/js')
   .babelConfig({
      plugins: ['transform-react-jsx']
   });

Run npm run dev to compile your assets.

This should enable the JSX syntax and allow you to use it in your project.

MohamedTammam

2 years ago

Level 51

Make sure to run npm run install

Please or to participate in this conversation.