首次搭建Webpack环境编译ES2015+与SCSS时遇@babel/core缺失错误求助

Hey there! I know setting up Webpack and Babel for the first time can feel overwhelming, so let's walk through why this error is popping up and how to fix it. Even if you ran npm install, there are a few common pitfalls new users hit here:

1. You're Missing the @babel/core Dependency (or Installed the Wrong Version) #

First, double-check your package.json—does it list @babel/core under devDependencies? If not, you probably forgot to install it! Run this command to add it:

npm install @babel/core --save-dev

A super common mix-up: If you installed babel-loader@7.x (an older version), it relies on babel-core (not @babel/core—no @ symbol!). If that's the case, uninstall @babel/core and install the old version instead:

npm uninstall @babel/core
npm install babel-core --save-dev

Pro tip: Stick to the latest versions if you can—babel-loader@8.x + @babel/core@7.x is the current standard, and it works better with modern JS features.

2. Your .babelrc Uses Outdated Presets #

Make sure your .babelrc is using the new scoped presets (with the @ symbol). Old presets like babel-preset-env will try to use the old babel-core instead of @babel/core. Your .babelrc should look something like this:

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

If you haven't installed that preset yet, add it with:

npm install @babel/preset-env --save-dev

3. Webpack Config Has a Loader Mistake #

Check your webpack.config.js to make sure you're referencing babel-loader correctly in your JS rule. A typo here can cause Webpack to fail to find the right tools. Here's a correct example:

module.exports = {
  // ... other config
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: 'babel-loader' // Make sure this is spelled correctly!
      },
      {
        test: /\.scss$/,
        use: ['style-loader', 'css-loader', 'sass-loader'] // Don't forget your SCSS loaders too!
      }
    ]
  }
};

Also, make sure you've installed all SCSS-related loaders if you haven't already:

npm install style-loader css-loader sass-loader sass --save-dev

4. Corrupted Node Modules or Lock File #

Sometimes npm can get confused with cached or incomplete installs. Try these steps to reset:

• Delete your node_modules folder
• Delete your package-lock.json file (or yarn.lock if you use Yarn)
• Run npm install again to fresh-install all dependencies

5. Accidentally Installed Dependencies Globally #

If you used npm install -g for any of these packages, Webpack won't be able to find them in your local project's node_modules. Always use --save-dev (no -g) to install dependencies locally for your project.

Once you fix these, run your Webpack build again—it should work without that missing module error!

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