NextJS SCRIPT1028 -由边缘对象中的破坏引起的

Question

我知道为什么这里会出现这个错误。我的问题是如何在NextJS环境和babel中修复它，以生成不包括对象中的扩展操作符的块。这是背景。

我需要支持Edge18那里的对象析构不支持扩展运算符。。它会产生错误：

SCRIPT1028: SCRIPT1028:预期标识符、字符串或数字

此错误是由以下一行引起的：

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

尤其是...e

此代码位于通过

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

如何更新babel配置以停止在对象中使用(ES2018)？我使用的是类型记录，但tsConfig的目标是ES5。我根据@babel/preset-env的Babel文档检查了@babel/preset-env，该文档链接到浏览器列表，并建议使用npx browserslist查看项目的目标浏览器，边缘18也在其中。

对于医生来了，我确实有一个定制的babel配置，它遵循文档：

{
  "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做了可接受的解决方案答案，那么es6 es-check es6 'out/_next/static/chunks/*.js'将返回符合es6的node_modules块。如果我然后从配置中删除转轴，它会在原始文章中错误的代码中将块标记为不符合es6的代码。

Answer 1

您的依赖项之一是不对旧浏览器使用符合ES5的代码，因此需要对其进行转换。

您需要缩小生成此代码的依赖项，并使用babel对其进行传输。该依赖项可能是子依赖项到主依赖项的结果，因此您可能必须遍历整个依赖树，才能找到罪魁祸首。一个简单的例子是：@nivo是一个反应图表包，它有一个名为D3-标度的子依赖项，它的放弃对IE11的支持不能是多填充，因此它需要由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模块包，它可以执行与上面相同的操作。