找不到模块：错误：无法解析“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.1 的导入已更改 - 例如

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

现在可以通过以下方式简单地提供

import 'core-js/es/array';

如果你不想引入整个 core-js

Answer 2

我找到了可能的答案。你有 core-js 3.0 版，并且这个版本没有为 ES6 和 ES7 单独的文件夹；这就是应用程序找不到正确路径的原因。

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

要降级版本，只需运行：

npm i -S core-js@2.5.7

在我的情况下，使用 Angular，这可以正常工作。

Answer 3

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

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

Answer 4

迁移到 Angular8 后，core-js/es6 或 core-js/es7 将不起作用。

你必须简单地替换 import core-js/es/

例如

import 'core-js/es6/symbol'  

到

import 'core-js/es/symbol'

这将正常工作。

Answer 5

将polyfills.ts 中的所有es6 和es7 更改为es

示例：

import 'core-js/es6/reflect';

变成

import 'core-js/es/reflect';

Answer 6

如果你使用@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 7

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

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

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

完美运行。

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

图书馆作者 (zloirock) 声称：

ES6 改变了几乎所有在 ES5 中添加的特性，所以 core-js/es6 入口点几乎包括所有这些。另外，正如你所写，它是 修复损坏的浏览器实现所必需的。

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

所以我认为 import 'core-js'; 就可以了。

Answer 8

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

使用 Angular 8.2.XX 为我工作

在 IE11 和 Edge 上测试

Answer 9

当然，我也遇到过类似的问题，而且很简单

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

为我做了诀窍。

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