NextJS SCRIPT1028 - 由 Edge 中的对象解构引起

Question

我知道这里有关于为什么会出现此错误的话题。我的问题是如何在 NextJS 环境和 babel 中修复它以生成不在对象中包含扩展运算符的块。这是背景。

我需要支持 spread operator is not supported in object destructing 所在的 Edge18。它产生错误：

SCRIPT1028: SCRIPT1028: Expected identifier, string or number

错误是由这一行引起的：

filter(e=>"0"!==t[e]).reduce((e,r)=>({...e,[`-${r}`]:(0,f.default

特别是 ...e

此代码位于通过

加载的 NextJS 块中

<script src="/_next/static/chunks/269073627ff2c2dabb405b46af9d15fd8bf75a34.ed77311839e33222ab61.js" async=""></script>

如何更新 babel 配置以停止在对象中使用展开运算符 (ES2018)？我正在使用打字稿，但 tsConfig 目标是 ES5。我根据 @babel/preset-env 的 Babel 文档检查了 browserslist，它链接到 browserslist 并建议使用 npx browserslist 查看项目的目标浏览器，Edge 18 就在那里。

我确实有一个自定义的 babel 配置，每个 docs here 遵循文档：

{
  "presets": ["next/babel"],
  "plugins": []
}

其中添加了一个插件，可以为 SSR 配置样式化组件。这是唯一的变化。我感谢任何有关如何让 NextJS 生成对象中不包含扩展运算符或目标小于 ES2018 的块的指示。

编辑：这是package.json

"dependencies": {
    "@apollo/client": "3.0.0-beta.50",
    "@apollo/link-context": "^2.0.0-beta.3",
    "@apollo/react-ssr": "^4.0.0-beta.1",
    "@next/bundle-analyzer": "^9.4.4",
    "@sentry/browser": "^5.15.5",
    "@sentry/node": "^5.15.5",
    "@zeit/next-source-maps": "0.0.3",
    "downloadjs": "^1.4.7",
    "framer-motion": "^1.11.0",
    "geolib": "^3.3.1",
    "geomagnetism": "^0.1.0",
    "graphql": "^14.6.0",
    "html-to-image": "^0.1.1",
    "import": "0.0.6",
    "leaflet": "^1.6.0",
    "local-storage": "^2.0.0",
    "lodash": "^4.17.15",
    "mgrs": "^1.0.0",
    "next": "^9.4.4",
    "postcss-flexbugs-fixes": "^4.2.1",
    "react": "0.0.0-experimental-33c3af284",
    "react-dom": "0.0.0-experimental-33c3af284",
    "react-icons": "^3.10.0",
    "react-leaflet": "^2.7.0",
    "react-spinners": "^0.8.3",
    "react-transition-group": "^4.4.1",
    "styled-components": "^5.1.1",
    "uuid": "^7.0.3"
  },
  "devDependencies": {
    "@graphql-codegen/add": "^1.15.0",
    "@graphql-codegen/cli": "^1.15.0",
    "@graphql-codegen/typescript": "^1.15.0",
    "@graphql-codegen/typescript-operations": "^1.15.0",
    "@graphql-codegen/typescript-react-apollo": "^1.15.0",
    "@graphql-codegen/typescript-resolvers": "^1.15.0",
    "@sentry/webpack-plugin": "^1.11.1",
    "@types/downloadjs": "^1.4.2",
    "@types/little-loader": "^0.2.0",
    "@types/local-storage": "^1.4.0",
    "@types/lodash": "^4.14.154",
    "@types/node": "^14.0.6",
    "@types/react": "^16.9.35",
    "@types/react-dom": "^16.9.8",
    "@types/react-leaflet": "^2.5.1",
    "@types/react-transition-group": "~4.2.4",
    "@types/styled-components": "^5.1.0",
    "@types/styled-jsx": "^2.2.8",
    "@types/uuid": "^7.0.3",
    "@typescript-eslint/eslint-plugin": "^3.0.2",
    "@typescript-eslint/parser": "^3.0.2",
    "babel-eslint": "^10.1.0",
    "eslint": "^7.1.0",
    "eslint-config-airbnb": "^18.1.0",
    "eslint-config-prettier": "^6.11.0",
    "eslint-plugin-import": "^2.20.2",
    "eslint-plugin-jsx-a11y": "^6.2.3",
    "eslint-plugin-prettier": "^3.1.3",
    "eslint-plugin-react": "^7.20.0",
    "eslint-plugin-react-hooks": "^4.0.4",
    "mapkit-typescript": "^5.18.2",
    "postcss-preset-env": "^6.7.0",
    "prettier": "^2.0.5",
    "tailwindcss": "^1.4.6",
    "typescript": "^3.9.3"
  }

编辑 2：这是导致问题的块的包的包分析器（块 ID 不同，因为它来自开发 - 虽然在此处找到相同的代码）

编辑 3：我认为问题是 tailwindcss。如果我为 tailwindcss 执行已接受的解决方案答案 es-check es-check es6 'out/_next/static/chunks/*.js' returns node_modules 块是否符合 es6。如果我随后从配置中删除 transpire，它会在原始 post.

中错误的相同代码处将块标记为不符合 es6

Answer 1

您的一个依赖项未使用适用于旧版浏览器的 ES5 兼容代码，需要进行转译。

您需要缩小生成此代码的依赖项范围，并使用 babel 对其进行转译。这种依赖可能是主依赖的子依赖的结果，因此您可能必须遍历 整个依赖树 一直向下找到罪魁祸首。一个简单的例子是：@nivo is a React charting package that has a sub-dependency called d3-scale which dropped support for IE11 and can't be polyfilled，因此它需要通过 babel 转译才能在 IE11 中工作：

next.config.js

module.exports = {
  webpack(config, { defaultLoaders, isServer }) {
    /* adds a custom Webpack rule for babel to transpile d3-scale */
    config.module.rules.push({
      test: /\.js$/,
      loader: defaultLoaders.babel,
      include: /[\/]node_modules[\/](d3-scale)[\/]/,
    });

    /* return new config to next */
    return config;
  }
};

或者，您可以使用与上述功能相同的 next-transpile-modules 包。

NextJS SCRIPT1028 - 由 Edge 中的对象解构引起

NextJS SCRIPT1028 - caused by destructuring in object in Edge

javascript

reactjs

babeljs

next.js