How to update next.js to use new javascript function?

[WoraponU]

I has my project that use next.js since version 6.xx but now I upgrade next.js version to lastest and use it normally.
but I found little problem that i can't use new javascript function eg. .flat(), .flatMap(), optional chaining

what I should update??

thank you.

package.json

{
  "name": "fw-mobile-site",
  "description": "Fastwork mobile site with Next.js",
  "author": "Fastwork.co",
  "version": "1.9.11",
  "license": "ISC",
  "scripts": {
    "dev": "node server.js",
    "build": "next build",
    "start:prod": "node server.js",
    "lint": "eslint '**/*.{ts,tsx}'",
    "type-check": "tsc --noEmit",
    "test": "LOCALE=th jest",
    "test:watch": "LOCALE=th jest --watch",
    "test:coverage": "LOCALE=th jest --coverage"
  },
  "dependencies": {
    "@fastwork/turbine": "^0.1.19",
    "@firebase/app-types": "^0.4.0",
    "@firebase/util": "^0.2.20",
    "@fortawesome/fontawesome-svg-core": "^1.2.19",
    "@fortawesome/free-brands-svg-icons": "^5.9.0",
    "@fortawesome/pro-light-svg-icons": "^5.9.0",
    "@fortawesome/pro-regular-svg-icons": "^5.9.0",
    "@fortawesome/pro-solid-svg-icons": "^5.9.0",
    "@fortawesome/react-fontawesome": "^0.1.4",
    "@intervolga/optimize-cssnano-plugin": "^1.0.6",
    "@sentry/browser": "^4.4.2",
    "@types/react-dates": "^17.1.7",
    "@zeit/next-bundle-analyzer": "^0.1.2",
    "@zeit/next-css": "^1.0.1",
    "@zeit/next-sass": "^1.0.1",
    "@zeit/next-source-maps": "^0.0.3",
    "algoliasearch": "^3.32.0",
    "babel-plugin-styled-components": "^1.10.0",
    "babel-plugin-transform-imports": "^1.5.1",
    "biomatic": "^0.3.12",
    "branch-sdk": "^2.49.0",
    "classnames": "^2.2.6",
    "compression": "^1.7.3",
    "contentful": "^7.3.0",
    "cookie-parser": "^1.4.4",
    "dotenv": "^6.2.0",
    "express": "^4.16.4",
    "firebase": "^5.8.4",
    "i18n-webpack-plugin": "^1.0.0",
    "isomorphic-unfetch": "^3.0.0",
    "js-cookie": "^2.2.0",
    "jsonwebtoken": "^8.5.1",
    "lodash.get": "^4.4.2",
    "lodash.isempty": "^4.4.0",
    "lodash.isequal": "^4.5.0",
    "lodash.orderby": "^4.6.0",
    "moment": "^2.24.0",
    "next": "^9.2.2",
    "next-i18next": "^4.0.0",
    "next-url-prettifier": "^1.4.0",
    "node-sass": "^4.11.0",
    "platform": "^1.3.5",
    "qrcode.react": "^1.0.0",
    "qs": "^6.6.0",
    "query-string": "^6.2.0",
    "react": "^16.12.0",
    "react-autosize-textarea": "^6.0.0",
    "react-clipboard.js": "^2.0.3",
    "react-dates": "^21.7.0",
    "react-dom": "^16.12.0",
    "react-highlight-words": "^0.16.0",
    "react-hook-form": "^3.21.18",
    "react-infinite-scroller": "^1.2.4",
    "react-input-mask": "^3.0.0-alpha.0",
    "react-lazyload": "^2.5.0",
    "react-progressive-image": "^0.6.0",
    "react-redux": "^6.0.1",
    "react-scroll": "^1.7.11",
    "react-scrolllock": "^4.0.1",
    "react-slick": "^0.23.2",
    "react-swipe": "^6.0.4",
    "react-transition-group": "^2.5.3",
    "recompose": "^0.30.0",
    "redux": "^4.0.1",
    "redux-devtools-extension": "^2.13.8",
    "redux-thunk": "^2.3.0",
    "slick-carousel": "^1.8.1",
    "styled-components": "^4.1.3",
    "swipe-js-iso": "^2.1.5",
    "url": "^0.11.0",
    "uuid": "^3.3.2"
  },
  "devDependencies": {
    "@babel/core": "^7.0.0",
    "@babel/preset-env": "^7.4.4",
    "@types/algoliasearch": "^3.30.12",
    "@types/classnames": "^2.2.8",
    "@types/enzyme": "^3.10.1",
    "@types/jest": "^24.0.12",
    "@types/jsonwebtoken": "^8.3.3",
    "@types/react": "^16.8.19",
    "@types/react-dom": "^16.8.4",
    "@types/react-redux": "^6.0.0",
    "@types/styled-components": "^4.1.16",
    "@typescript-eslint/eslint-plugin": "^1.9.0",
    "@typescript-eslint/parser": "^1.9.0",
    "@typescript-eslint/typescript-estree": "^1.9.0",
    "enzyme": "^3.9.0",
    "enzyme-adapter-react-16": "^1.12.1",
    "enzyme-to-json": "^3.3.5",
    "eslint": "^5.16.0",
    "eslint-config-airbnb": "^17.1.0",
    "eslint-config-prettier": "^4.3.0",
    "eslint-import-resolver-typescript": "^1.1.1",
    "eslint-plugin-import": "^2.17.3",
    "eslint-plugin-jsx-a11y": "^6.2.1",
    "eslint-plugin-prettier": "^3.1.0",
    "eslint-plugin-react": "^7.13.0",
    "jest": "^24.7.1",
    "prettier": "^1.17.1",
    "typescript": "^3.4.5",
    "url-loader": "^1.1.2",
    "webpack": "^4.0.0"
  },
  "peerDependencies": {
    "@fortawesome/fontawesome-common-types": "^0.2.19"
  }
}

[timneutkens]

Do you have a custom babelrc?

[WoraponU]

/* eslint-disable no-template-curly-in-string */
const config = {
  presets: [],
  plugins: [
    [
      'babel-plugin-styled-components',
      {
        ssr: true,
        displayName: true,
        preprocess: false,
      },
    ],
    [
      'transform-imports',
      {
        '@fortawesome/free-solid-svg-icons': {
          transform: '@fortawesome/free-solid-svg-icons/${member}',
          skipDefaultConversion: true,
        },
        '@fortawesome/pro-regular-svg-icons': {
          transform: '@fortawesome/pro-regular-svg-icons/${member}',
          skipDefaultConversion: true,
        },
        '@fortawesome/pro-light-svg-icons': {
          transform: '@fortawesome/pro-light-svg-icons/${member}',
          skipDefaultConversion: true,
        },
        '@fortawesome/free-brands-svg-icons': {
          transform: '@fortawesome/free-brands-svg-icons/${member}',
          skipDefaultConversion: true,
        },
      },
    ],
  ],
};

if (process.env.NODE_ENV === 'test') {
  config.presets.push([
    'next/babel',
    {
      'preset-env': {
        modules: 'commonjs',
      },
    },
  ]);
} else {
  config.presets.push('next/babel');
}

module.exports = config;

[timneutkens]

This can be updated to not add that extra check for the test environment as Next.js handles that for you since Next.js 8:

module.exports = {
  presets: ['next/babel'],
  plugins: [
    [
      'babel-plugin-styled-components',
      {
        ssr: true,
        displayName: true,
        preprocess: false,
      },
    ],
    [
      'transform-imports',
      {
        '@fortawesome/free-solid-svg-icons': {
          transform: '@fortawesome/free-solid-svg-icons/${member}',
          skipDefaultConversion: true,
        },
        '@fortawesome/pro-regular-svg-icons': {
          transform: '@fortawesome/pro-regular-svg-icons/${member}',
          skipDefaultConversion: true,
        },
        '@fortawesome/pro-light-svg-icons': {
          transform: '@fortawesome/pro-light-svg-icons/${member}',
          skipDefaultConversion: true,
        },
        '@fortawesome/free-brands-svg-icons': {
          transform: '@fortawesome/free-brands-svg-icons/${member}',
          skipDefaultConversion: true,
        },
      },
    ],
  ],
};

It's hard to say what exactly isn't working without a full reproduction.

[WoraponU]

thank you.