为 IE 10/11 转译 NextJS； 'Weakset undefined'

Question

我有一个正在构建的 NextJS 网站，它很棒，但它在 IE 10/11 中不起作用，因为某些代码未正确转译。我对 babel 和 webpack 真的很不好，以前从来没有自己配置过它们。我这两天一直在尝试通过在线阅读来解决问题，但似乎对我没有任何帮助。

我得到的确切错误是 weakSet is not defined，它来自 common.js 文件。

这是我的 .babelrc 文件，位于我项目的根目录中。

//.babelrc

{
    "presets": ["next/babel"],
    "plugins": [
        ["styled-components", { 
            "ssr": true, 
            "displayName": true, 
            "preprocess": false 
        }]
    ]
}

我的package.json

{
  "name": "bradshouse",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "next",
    "build": "next build",
    "start": "next start"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "next": "^7.0.2",
    "react": "^16.6.0",
    "react-dom": "^16.6.0",
    "react-pose": "^4.0.1",
    "styled-components": "^4.0.2"
  },
  "devDependencies": {
    "babel-plugin-styled-components": "^1.8.0"
  }
}

如果您有兴趣自己启动它，可以在此处查看完整的存储库。节点模块被排除在外，所以 npm install，然后 npm 运行 build，然后 npm 运行 start.
https://github.com/TJBlackman/Brads-House

感谢您的帮助！欢迎阅读 link 篇文章，我会仔细阅读的！谢谢。

编辑： 作为快速修复，我将这个 polyfill 脚本添加到我所有页面的 <head>，但它仍然没有解决这个问题......哇？！ <script src="https://cdn.polyfill.io/v2/polyfill.min.js"></script>

Answer 1

如何通过在 NextJS 中转译 node_modules 代码来支持 IE 11

在 ziet/nextjs 问题线程中找到的原始答案 (view here). Shout out to joaovieira <3

npm install --save-dev babel-polyfill

在任何你想要的地方创建一个 polyfill.js，然后在该文件中导入 babel-polyfill，如下所示：

import 'babel-polyfill';

接下来，如果您没有 next.config.js 文件，请在您的根目录中创建它。现在更新您的此文件以包含以下 webpack 配置。请注意它是如何使用您刚刚创建的 polyfill 文件的。完整文件示例：

module.exports = {
  webpack: (config) => {
    // Unshift polyfills in main entrypoint.
    const originalEntry = config.entry;
    config.entry = async () => {
      const entries = await originalEntry();
      if (entries['main.js']) {
        entries['main.js'].unshift('./path_to/polyfills.js'); // <- polyfill here
      }
      return entries;
    };

    return config;
  }
}

最后，如果您的项目根目录中没有 .babelrc 文件，请创建一个。在其中，使用下面与您正在使用的 babel 版本相匹配的代码。

通天塔 7

{
  "presets": [
    [
      "next/babel",
      {
        "preset-env": {
          "useBuiltIns": "usage"
        }
      }
    ]
  ]
}

巴别塔 6

{
  "presets": [
    [
      "next/babel",
      {
        "preset-env": {
          "targets": {
            "browsers": "defaults"
          },
          "useBuiltIns": true
        }
      }
    ]
  ]
}

这就是我所知道的。我什至没有考虑 IE 10...

祝你好运！！

Answer 2

我正在使用 next@9.3 和 reflect-metadata，这是我的解决方案：

/** next.config.js > webpack **/

const pathToPolyfills = './src/polyfills.js'
// Fix [TypeError: Reflect.metadata is not a function] during production build
// Thanks to https://leerob.io/blog/things-ive-learned-building-nextjs-apps#polyfills
// There is an official example as well: https://git.io/JfqUF
const originalEntry = config.entry
config.entry = async () => {
  const entries = await originalEntry()
  Object.keys(entries).forEach(pageBundleEntryJs => {
    let sourceFilesIncluded = entries[pageBundleEntryJs]
    if (!Array.isArray(sourceFilesIncluded)) {
      sourceFilesIncluded = entries[pageBundleEntryJs] = [sourceFilesIncluded]
    }
    if (!sourceFilesIncluded.some(file => file.includes('polyfills'))) {
      sourceFilesIncluded.unshift(pathToPolyfills)
    }
  })
  return entries
}

/** src/polyfills.js **/

// Other polyfills ...

import 'reflect-metadata'

为 IE 10/11 转译 NextJS； 'Weakset undefined'

Transpiling NextJS for IE 10/11; 'Weakset undefined'

reactjs

babeljs

next.js