Laravel 8不使用Laravel UI通过npm装React后JSX语法报错求助

Hey there! I’ve run into this exact head-scratcher before when setting up React in Laravel 8 without leaning on Laravel UI. Let’s break down how to fix this step by step—no fancy tools, just plain npm and config tweaks.

1. Install the Right Dependencies First #

First up, make sure you have React and the Babel tools needed to process JSX. Run these commands in your project root:

npm install react react-dom
npm install --save-dev @babel/preset-react babel-loader

The first line gets React itself, and the second installs the Babel preset that translates JSX into plain JavaScript, plus the loader Webpack/Mix needs to handle the files.

2. Tweak Your Webpack.mix.js #

Laravel Mix is our frontend build tool here, so we need to tell it to recognize JSX. Open webpack.mix.js and update it—there are two easy ways to do this:

Option A: Use Mix’s Built-in React Helper (Simplest) #

Just add .react() to your mix chain:

const mix = require('laravel-mix');

mix.js('resources/js/app.js', 'public/js')
   .react() // This enables JSX processing automatically
   .sass('resources/sass/app.scss', 'public/css');

Option B: Manual Webpack Config (For More Control) #

If you prefer explicit settings, add a Webpack config block to handle JSX files:

const mix = require('laravel-mix');

mix.js('resources/js/app.js', 'public/js')
   .sass('resources/sass/app.scss', 'public/css')
   .webpackConfig({
        module: {
            rules: [
                {
                    test: /\.jsx?$/, // Matches .js and .jsx files
                    exclude: /node_modules/,
                    use: {
                        loader: 'babel-loader',
                        options: {
                            presets: ['@babel/preset-react']
                        }
                    }
                }
            ]
        }
    });

3. Add a Babel Config File (If Mix Needs It) #

Sometimes Mix needs a clear Babel config to pick up the React preset. Create a .babelrc file in your project root with this content:

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

Alternatively, you can use a babel.config.json file—both work equally well.

4. Check Your Component File Setup #

Make sure your React components use the right file extension:

• For files with JSX, use .jsx (e.g., resources/js/components/Welcome.jsx)
• If you want to stick with .js files for JSX, just make sure your Webpack rule includes .js (like the test: /\.jsx?$/ in Option B above)

Here’s a quick example component to test with:

// resources/js/components/Welcome.jsx
import React from 'react';

export default function Welcome() {
    return (
        <div className="p-4">
            <h1>Hey, React is working!</h1>
        </div>
    );
}

Then render it in your resources/js/app.js:

import React from 'react';
import ReactDOM from 'react-dom';
import Welcome from './components/Welcome';

// Make sure you have a div with id="app" in your Blade template
ReactDOM.render(<Welcome />, document.getElementById('app'));

5. Rebuild Your Assets #

Finally, compile your frontend assets with Mix:

npm run dev
# For production builds, use:
npm run prod

That should squash that JSX syntax error! If you’re still stuck, double-check that you didn’t skip installing the Babel preset or forget the .react() helper—those are the most common missteps.

内容的提问来源于stack exchange，提问作者swatantra