@babel/preset-react与@babel/react的区别及跨环境编译问题咨询

Great question—let’s break this down clearly, since this is a common point of confusion with Babel’s package naming changes.

First, the core takeaway:
@babel/react is a deprecated, non-official alias package, while @babel/preset-react is the officially maintained, standard preset for compiling React JSX syntax.

1. Package Identity & Maintenance Status #

• @babel/preset-react: This is the official, supported preset introduced in Babel 7.x as part of their unified naming convention. It’s specifically built to handle React-specific syntax like JSX, Flow type annotations, and React’s runtime optimizations. It’s actively updated with bug fixes and compatibility improvements for new React versions—this is the one you should always use in modern projects.
• @babel/react: This is a legacy alias package that essentially redirects to @babel/preset-react, but it’s no longer actively maintained by the Babel team. It exists mostly for backward compatibility with older projects that used the non-standard naming, but it’s not recommended for new or ongoing work.

2. Why Did Your Ubuntu Environment Fail with @babel/preset-react? #

The discrepancy between your Mac (npm 6.12.0) and Ubuntu (npm 6.14.5) machines likely comes from subtle differences in how those npm versions handle package resolution and installation:

• Older npm 6.12.0 might have been more lenient with package name resolution, correctly pulling in @babel/preset-react even if there was a minor hiccup in your setup.
• Newer npm 6.14.5 has stricter package validation or caching behavior, which led to a failure when trying to resolve @babel/preset-react (maybe a partial install, cached old dependency, or misconfigured node_modules). Switching to @babel/react worked because it’s an alias that triggered a clean resolution of the actual preset package.

That said, using @babel/react is a temporary workaround, not a fix. For long-term stability, you should:

# Uninstall the deprecated alias
npm uninstall @babel/react
# Reinstall the official preset
npm install --save-dev @babel/preset-react

Then revert your .babelrc to the official, supported configuration:

"presets": [ "@babel/preset-react", "@babel/preset-env" ]

3. Pro Tip for Cross-Environment Consistency #

To avoid issues like this across different machines, always use a lock file (package-lock.json for npm or yarn.lock for Yarn) to pin your dependency versions. This ensures that every machine installs exactly the same package versions, eliminating inconsistencies from npm’s version resolution rules.

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