Module not found: Error: Can't resolve 'core-js/es6'

2 min read 06-10-2024

"Module not found: Error: Can't resolve 'core-js/es6'" - A Common JavaScript Error and How to Fix It

This error message, "Module not found: Error: Can't resolve 'core-js/es6'", is a frequent headache for JavaScript developers, especially those working with modern JavaScript features. It indicates that your project is trying to access a module from the core-js package, specifically the ES6 compatibility layer, but it's unable to locate it.

Let's break down the error and understand why it occurs.

Scenario:

Imagine you're building a website that relies on ES6 features like Promise or Array.from. You've likely installed babel or webpack to transpile your code into a format older browsers can understand.

Here's a snippet of code that might trigger the error:

// app.js
import 'core-js/es6/promise'; // importing the Promise polyfill

// Your code that uses promises
const promise = new Promise((resolve, reject) => {
  // ... your code
});

Running this code in an environment that doesn't natively support ES6 promises might throw the "Module not found" error.

Why the Error Happens?

The core-js/es6 module contains polyfills, essentially "patches" that provide modern JavaScript features for older browsers. Your build tool (Babel, Webpack, etc.) needs to know where to find these polyfills. If it's not properly configured or the core-js package is missing, the error will occur.

Solutions:

Here are some common solutions to fix the "Can't resolve 'core-js/es6'" error:

Install core-js: If you haven't already, install the core-js package using your preferred package manager (npm or yarn):
```
npm install core-js
```
Configure your build tool: Depending on your build tool, you'll need to configure it to properly include core-js in your bundle:
- Babel: Add the @babel/preset-env preset to your Babel configuration and specify the corejs option:
```
// .babelrc or babel.config.js
module.exports = {
  presets: [
    ['@babel/preset-env', {
      useBuiltIns: 'usage',
      corejs: 3
    }]
  ]
};
```
- Webpack: Configure Webpack to include core-js/es6 in your entry point or use a plugin like webpack-core-js-polyfills to manage polyfills automatically.

Ensure core-js is imported: Make sure you're correctly importing the specific modules from core-js/es6 that your code requires.

// app.js
import 'core-js/es6/promise'; // for Promises
import 'core-js/es6/array'; // for Array methods like Array.from

Additional Tips:

Understand Polyfills: Polyfills are crucial for compatibility, especially with older browsers.
Version Compatibility: Ensure that the version of core-js you're using is compatible with the version of Babel or Webpack you're running.
Modern Browsers: If you're targeting only modern browsers, you might not need all of core-js/es6. Consider selectively importing only the polyfills required for your specific features.

Conclusion:

The "Can't resolve 'core-js/es6'" error is a common issue when working with JavaScript transpilers and polyfills. By installing core-js and configuring your build tool correctly, you can ensure that your code runs seamlessly across various browser environments. Remember to understand the specific requirements of your project and carefully select the necessary polyfills from core-js.

For more information:

Core-js documentation: https://corejs.io/
Babel documentation: https://babeljs.io/
Webpack documentation: https://webpack.js.org/

Module not found: Error: Can't resolve 'core-js/es6'