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

Question

我的 React 应用程序构建过程出现问题。

我总是收到以下错误：

找不到模块：错误：无法解析 'core-js/es6'

如果我在 polyfill.js 中使用它：

导入'core-js/es6';

那是我的 package.json:

{
  "name": "test",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "private": true,
  "devDependencies": {
    "@babel/core": "^7.4.0",
    "@babel/preset-env": "^7.4.2",
    "@babel/preset-react": "^7.0.0",
    "@babel/runtime": "^7.4.2",
    "babel-loader": "^8.0.5",
    "babel-preset-es2015": "^6.24.1",
    "copy-webpack-plugin": "^5.0.2",
    "css-hot-loader": "^1.4.4",
    "eslint": "5.15.3",
    "eslint-config-airbnb": "^17.1.0",
    "eslint-loader": "^2.1.2",
    "eslint-plugin-import": "2.16.0",
    "eslint-plugin-jsx-a11y": "6.2.1",
    "eslint-plugin-react": "7.12.4",
    "file-loader": "^3.0.1",
    "node-sass": "^4.11.0",
    "prettier": "^1.16.4",
    "react-hot-loader": "4.8.0",
    "sass-loader": "^7.1.0",
    "webpack": "^4.29.6",
    "webpack-cli": "^3.3.0",
    "webpack-dev-server": "^3.2.1"
  },
  "dependencies": {
    "axios": "^0.18.0",
    "core-js": "^3.0.0",
    "prop-types": "^15.7.2",
    "react": "^16.8.5",
    "react-dom": "^16.8.5",
    "react-redux": "^6.0.1",
    "react-string-replace": "^0.4.1",
    "redux": "^4.0.1",
    "slick-carousel": "^1.8.1"
  },
  "scripts": {
    "dev": "webpack-dev-server --hot",
    "build": "webpack --colors --profile --progress --env.mode production",
    "lint": "eslint ./src/ --ext .js,.jsx"
  }
}

有人可以帮忙吗？

Answer 1

我找到了可能的答案。你有 core-js 3.0 版，这个版本没有 ES6 和 ES7[=25= 的单独文件夹];这就是应用程序无法找到正确路径的原因。

要解决此错误，您可以将 core-js 版本降级到 2.5.7。此版本生成正确的目录结构，具有单独的 ES6 和 ES7 文件夹。

要降级版本，只需运行:

npm i -S core-js@2.5.7

在我的例子中，Angular，这工作正常。

Answer 2

最终在 projectpath\src\polyfill.js 中有一个名为 polyfill.js 的文件该文件只包含这一行：import 'core-js'; 这个 polyfills 不仅是 es-6，而且是从 3.0.0 版本开始使用 core-js 的正确方法。

我将 polyfill.js 添加到我的 webpack 文件条目属性中，如下所示：

entry: ['./src/main.scss', './src/polyfill.js', './src/main.jsx']

完美运行。

我还在这里找到了更多信息：https://github.com/zloirock/core-js/issues/184

库作者 (zloirock) 声明：

ES6 changes behaviour almost all features added in ES5, so core-js/es6 entry point includes almost all of them. Also, as you wrote, it's required for fixing broken browser implementations.

（引自 zloirock https://github.com/zloirock/core-js/issues/184）

所以我觉得 import 'core-js'; 就好了。

Answer 3

core-js 版本 3.0.1 的导入已更改 - 例如

import 'core-js/es6/array'; 和 import 'core-js/es7/array';

现在只需通过以下方式即可提供

import 'core-js/es/array';

如果你不想把整个 core-js

Answer 4

当然，我有一个类似的问题和一个简单的问题

npm uninstall @babel/polyfill --save &&
npm install @babel/polyfill --save

对我有用。

但是，@babel/polyfill 的用法已被弃用（根据），因此只有在您认为您安装了较旧的软件包或其他所有方法都失败时才尝试此操作。

Answer 5

迁移到 新 Angular 版本后 或版本更改为 core-js、core-js/es6或 core-js/es7 将不起作用。

您只需在 polyfills.ts 文件中替换 import core-js/es/。

例如

import 'core-js/es6/symbol'

至

import 'core-js/es/symbol'

这将正常工作。

Answer 6

将 polyfills.ts 和 polyfills.ts 中的所有 "es6" 和 "es7" 更改为 "es"（可选）。

发件人：import 'core-js/es6/symbol';
收件人：import 'core-js/es/symbol';

Answer 7

只需在 tsconfig.json 中将 "target": "es2015" 更改为 "target": "es5"。

为我工作 Angular 8.2.XX

已在 IE11 和 Edge 上测试

Answer 8

如果你使用@babel/preset-env和useBuiltIns，那么你只需要在useBuiltIns选项旁边添加corejs: 3，指定使用哪个版本，默认是corejs: 2 .

presets: [
  [
    "@babel/preset-env", {
      "useBuiltIns": "usage",
      "corejs": 3
    }
  ]
],

有关详细信息，请参阅：https://github.com/zloirock/core-js/blob/master/docs/2019-03-19-core-js-3-babel-and-a-look-into-the-future.md#babelpreset-env

Answer 9

将 polyfills.ts

中的所有 es6 和 es7 更改为 es

示例：

import 'core-js/es6/reflect';

变成

import 'core-js/es/reflect';

Answer 10

我今天（2022 年 4 月 13 日）在将 core-js 版本从 2 升级到 3 之后，我尝试了几个小时找到答案，终于我可以在更新我的 babel.config.js 后解决它，并使其像这样：

之前:

presets: [ "@vue/app" ]

之后：

presets: [ [ "@vue/app", { useBuiltIns: "entry" } ] ]

注释

我在我的项目中使用 Vue
我已经尝试了几乎所有关于 npm uninstall core-js 的问题，并尝试再次 re-install npm install core-js --save 或 delete node_modules, package-lock.json, and yarn-lock.json 但仍然未能解决它
如果我使用此行降级 core-js 版本，我可以解决它：npm install core-js@2.6.5，但这不是长期条件的好解决方案
这个问题的解释：出现这个问题是因为版本3中core-js/es6的路径已经改成了core-js/es所以你的项目找不到合适的它指向的目录的路径 core-js/es6

Answer 11

Webpack 能够解析由 Babel 预先添加到源文件的导入语句是至关重要的，例如

import "core-js/modules/es.object.freeze.js";

如果这样的 import 语句被插入到一个文件中，而该文件并不存在于具有 core-js 作为依赖项的包中，则 Webpack 可能无法解析其在磁盘上的位置，从而导致 ModuleNotFoundError .

我的解决方案是在 webpack.config.cjs:

的 resolve 部分指定应用程序的 node_modules 目录

module.exports = {
    resolve: {
        modules: [
            path.join(__dirname, "node_modules"), // Contains core-js.
            "node_modules"                        // Webpack's default.
        ]
    }
}

当然 core-js 在我的应用程序的 package.json:

中被列为依赖项

{
    "dependencies": {
        "core-js": "^3.19.3"
    }
}

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

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

build

npm

package.json

yarnpkg