CODEWITHSUNDEEP
javascriptreactjsbabeljsnext.js
Diesel
Diesel

Reputation: 5345

NextJS SCRIPT1028 - caused by destructuring in object in Edge

I know there is topic on why this error occurs on here. My question is how to fix it in the NextJS environment and babel to produce chunks that don't include the spread operator in an object. Here is the background.

I need to support Edge18 where the spread operator is not supported in object destructing. It produces the error:

SCRIPT1028: SCRIPT1028: Expected identifier, string or number

The error is caused by this line:

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

And in particular the ...e

This code is in a NextJS chunk loaded via

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

How do I update the babel config to stop using the spread operator (ES2018) in an object? I am using typescript but the tsConfig target is ES5. I checked the browserslist per the Babel documentation for @babel/preset-env which links to browserslist and recommends using npx browserslist to see the target browsers for a project and Edge 18 is in there.

I do have a custom babel config per the docs here which follows the docs:

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

which has an added plugin that configures Styled Components for SSR. That's the only change. I appreciate any pointers in how to get NextJS to produce Chunks that don't contain the spread operator in an object or targets less than ES2018.

Edit: Here is 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"
  }

Edit 2: Here is the package analyzer of the package the chunk that is causing the issue (chunk ID is different because it's from development - same code found in here though)

Chunk analyzer

Edit 3: I think the issue was tailwindcss. If I do the accepted solutions answer for tailwindcss an es-check es-check es6 'out/_next/static/chunks/*.js' returns the node_modules chunk as es6 compliant. If I then remove the transpire from the config, it marks the chunk as non es6 compliant at the same code that was erring in original post.

Upvotes: 2

Views: 937

Answers (1)

Matt Carlotta
Matt Carlotta

Reputation: 19762

One of your dependencies is not using ES5-compliant code for older browsers and will need to be transpiled.

You need to narrow which dependency is producing this code and transpile it using babel. This dependency can be the result of a sub-dependency to a main dependency, so you may have to traverse the entire dependency tree all the way down to find the culprit. A simple example would be: @nivo is a React charting package that has a sub-dependency called d3-scale which dropped support for IE11 and can't be polyfilled, therefore it needs to be transpiled by babel to work in 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;
  }
};

Alternatively, you can use the next-transpile-modules package that does the same thing as the above.

Upvotes: 1

Related Questions