Optional Chaining Breaks Build of NextJS React App Using Latest Tracker v12.0.12

[Lwdthe1]

Describe the issue
Can't use v12.0.12 of the tracker in my NextJS app that is using webpack 4 because it the tracker uses optional chaining and has not been transpiled for older systems.

I get this error, which I don't get in v11 of the tracker, when I run next build:

Failed to compile.

./node_modules/@openreplay/tracker/cjs/index.js 202:26
Module parse failed: Unexpected token (202:26)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|         (0, tabs_js_1.default)(app);
|         window.__OPENREPLAY__ = this;
>         if (options.flags?.onFlagsLoad) {
|             this.onFlagsLoad(options.flags.onFlagsLoad);
|         }


> Build error occurred
Error: > Build failed because of webpack errors

Steps to reproduce the issue

1. Upgrade the tracker to @openreplay/tracker@^12.0.12.
2. Install dependencies: react@^16.13.1, next@^10.0.4 webpack@^4.46.0, typescript@^4.2.3 set to esnext, @babel/core^7.15.8 with @babel/preset-typescript@^7.18.6.
3. Run next build in the terminal in the root.
4. See error on optional chaining: ./node_modules/@openreplay/tracker/cjs/index.js 202:26

Expected behavior
The error should not occur, and my NextJS build should succeed.

Screenshots
No screenshots, just the error output above.

OpenReplay Environment

• Frontend stack: React using NextJS
• OpenReplay version: 1.17.6
• Tracker version: 12.0.12
• Plugins used: N/A
• Cloud provider: AWS
• System specs: N/A

Additional context
This wasn't an issue in previous versions, including tracker v11

[Lwdthe1]

I'm currently getting around this by copying all of the v12 tracker files into my project so that it's transpiled with the rest of my code, using a webpack resolution alias. It appears to be working.

 // https://webpack.js.org/configuration/resolve/
    newConfig.resolve = {
      ...newConfig.resolve,
      alias: {
        ...newConfig.resolve.alias,
        // v12.0.12 does not compile due to OpenReplay's failure to transpile optional chaining;
        // https://github.com/openreplay/openreplay/issues/2180
        '@openreplay/tracker': path.resolve(
          __dirname,
          'webpackResolution/openReplay/tracker/v12_0_12'
        ),
      },
    }

[nick-delirium]

Simply update (or add) babel/env (with es2020 mode to target and anything below it as output if you want to) to your build chain or update your nodejs to latest 12.x.x or later version (current lts are 18.x.x and 20.x.x), optional chaining was adopted in 2020 for js and 2019 for typescript. I believe that 4 years is enough to not be considered an exotic feature :)

or you can simply add babel-transform-optional-chaining if for some reason es2020 does not suit your needs.

You also don't need to use /cjs import with latest versions of next/babel/webpack etc because use client/dynamic import models work fine

[Lwdthe1]

@nick-delirium Before creating the ticket, I already added the necessary babel transforms, but that doesn't work. Our node engine is >=16.20.2. Our tsconfig is on es2021. We use optional chaining in our own code.

This isn't a problem with my code; see that it transpiles perfectly fine when I put your entire package in my codebase and build it with the rest of my code.

Aside from that, there are reasons some systems won't be as up to date as we'd like. It's better to support the native language rather than depend on hoping all systems in the world are up to your pace.

Otherwise, you should add minimum system requirements to your upgrade docs.

[nick-delirium]

nvm use 18
> Now using node v18.18.0 (npm v9.8.1)

yarn list --pattern @openreplay
├─ @openreplay/tracker-assist@8.0.5-0
└─ @openreplay/tracker@12.0.12
✨  Done in 0.14s.

yarn build
...
...
> ✨  Done in 15.12s.

(edit: just repeated same process with v16.20.1)

next.config.js

/** @type {import('next').NextConfig} */
module.exports = {
  reactStrictMode: true,
}

tsconfig.json

{
  "compilerOptions": {
    "target": "es5",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "incremental": true
  },
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
  "exclude": ["node_modules"]
}

created regular component with tracker, then dynamically import it in root component as example

const OpenReplayTracker = dynamic(() => import("../components/OpenReplayTracker"), { ssr: false });

alternatively using import(trackerpath).then(module => ) to set it into context from root.

Checked with
"next": "12.0.4",
and
"next": "14.0.1",

both on typescript 4.5.2.

It's better to support the native language

Well, its a native feature and here is ecma spec for optional chaining.