React+Webpack项目启动报错：无法找到@babel/core模块求助

The error you're seeing happens because your Webpack setup lacks the core Babel dependencies needed to transpile React and modern JavaScript code. Here's a step-by-step fix tailored exactly to your environment (Node v8.9.4, Webpack v3.11.0):

1. Install Compatible Babel Packages #

Since you're using Webpack 3, you need to use babel-loader v7 (it’s the last version compatible with Webpack 3) alongside the necessary presets. Run this command in your project root:

npm install --save-dev @babel/core@7.4.0 babel-loader@7.1.5 @babel/preset-react@7.0.0 @babel/preset-env@7.4.0

The version numbers here are picked to ensure full compatibility with your Node and Webpack versions.

2. Configure the .babelrc File #

Create a .babelrc file in your project root with the following content to enable React JSX and ES6+ transpilation:

{
  "presets": [
    ["@babel/preset-env", {
      "targets": {
        "node": "8.9.4"
      }
    }],
    "@babel/preset-react"
  ]
}

• @babel/preset-env is set to target your specific Node version to avoid unnecessary transpilation.
• @babel/preset-react handles React’s JSX syntax so Webpack can understand it.

3. Update Your Webpack Config #

Modify your webpack.config.js to use babel-loader for processing .js and .jsx files. Add this to the module.rules array:

module.exports = {
  // ... your existing config options
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader'
        }
      }
      // ... keep any other loaders you have (like CSS, file loaders)
    ]
  },
  resolve: {
    extensions: ['.js', '.jsx'] // Lets you import files without typing extensions
  }
};

4. Restart and Verify #

Stop your running webpack-dev-server, then restart it with your usual start command (e.g., npm start). This should resolve the "Cannot find module '@babel/core'" error and let Webpack transpile your React code correctly.

Quick Extra Tip #

If you have any older Babel packages installed (like babel-core or babel-preset-react), you can uninstall them—they’re deprecated in favor of the new @babel/* package structure.

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