使用babelify时React出现'return'意外令牌错误的原因与解决

Hey there! As someone who’s stumbled through early React setup headaches, let’s walk through fixing the two issues you’re facing: the unexpected return token error and the prop-passing exception.

1. Resolving the "Unexpected token 'return'" Error (JSX Parsing Issue) #

The core problem here is that babelify doesn’t recognize JSX syntax by default—it only handles standard ES6+ out of the box. When your code has JSX, the parser can’t make sense of it, leading to that confusing return token error. Here’s how to fix it:

Step 1: Install Required Babel Presets #

First, install the dev dependencies needed to transpile JSX:

npm install --save-dev @babel/core @babel/preset-react babelify

Step 2: Configure Babel to Process JSX #

You have two straightforward options:

Option A: Add a .babelrc File

Create a .babelrc file in your project root with this content:

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

This tells Babel to use the React preset for all transpilation tasks automatically.

Option B: Update Your npm start Script

If you prefer to keep config in your package.json, modify your start script to explicitly pass the preset to babelify:

{
  "scripts": {
    "start": "browserify reactive.jsx -t [ babelify --presets [ @babel/preset-react ] ] -o bundle.js && open index.html"
  }
}

(Adjust the script to match your actual build workflow—this assumes you’re bundling to bundle.js and opening an index.html file.)

After making these changes, run npm start again—your JSX will now be correctly transpiled, and the return token error should vanish.

2. Fixing Prop Passing Exceptions #

Since you mentioned an exception when passing parameters, let’s cover the most common pitfalls new React developers hit with props:

Common Pitfall 1: Incorrectly Accessing Props in Components #

Function components receive props as a single object—you can’t directly access values unless you destructure them or reference the props object explicitly. For example:

// ❌ Wrong: Tries to access 'name' directly instead of from props
function Welcome(name) {
  return <h1>Hello, {name}</h1>;
}

// ✅ Correct: Access via the props object
function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

// ✅ Also Correct: Destructure props upfront for cleaner code
function Welcome({ name }) {
  return <h1>Hello, {name}</h1>;
}

Common Pitfall 2: Invalid Syntax for Complex Props #

When passing objects, arrays, or expressions as props, you must wrap them in curly braces. Avoid extra nested braces or forgetting them entirely:

// ❌ Wrong: Extra curly braces around the object
<User user={{"name": "Alice", "age": 30}} />

// ✅ Correct: Single set of curly braces for the expression
<User user={{name: "Alice", age: 30}} />

// ❌ Wrong: Passing a string instead of an array (missing braces)
<List items="Apple,Banana,Cherry" />

// ✅ Correct: Wrap the array in braces
<List items={["Apple", "Banana", "Cherry"]} />

If you’re still hitting an exception, sharing a snippet of your prop-passing code would help narrow it down further!

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