react-virtuoso unable to compile after fresh installation

Question

I build react app ( typescript with material ui, I installed the package react-virtuoso (4.1.0)

after the installation I run the project I'm getting an error:

./node_modules/react-virtuoso/dist/index.mjs 469:64

Module parse failed: Unexpected token (469:64)

File was processed with these loaders:

 * ./node_modules/babel-loader/lib/index.js

You may need an additional loader to handle the result of these loaders.

|   const log = statefulStream(function (label, message) {

|     let level = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 1;

>     const currentLevel = getGlobalThis()["VIRTUOSO_LOG_LEVEL"] ?? getValue(logLevel);

|     if (level >= currentLevel) {

|       console[CONSOLE_METHOD_MAP[level]]("%creact-virtuoso: %c%s %o", "color: #0253b3; font-weight: bold", "color: initial", label, message);

the tsconfig:

{
  "compilerOptions": {
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strictPropertyInitialization": false,
    "strict": true,
    "noImplicitAny": true,
    "suppressImplicitAnyIndexErrors": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx",
    "baseUrl": "."
  },
  "include": [
    "src",
    "src/custom.d.ts"
  ]
}

when I downgrade to version 3.1.5 it works fine.

part of my package.json

    "@babel/preset-react": "^7.14.5",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-virtuoso": "^4.1.0",
    "typescript": "4.3.5",    "@types/node": "^12.20.19",
    "@types/react": "^17.0.17",
    "@types/react-dom": "^17.0.9",
   "@mui/icons-material": "^5.0.3",
    "@mui/lab": "^5.0.0-alpha.50",
    "@mui/material": "^5.0.3",
    "@mui/styles": "^5.0.1",
    "@mui/x-date-pickers": "^5.0.16",

environment details:

node v14.18.1 
npm v6.14.15

I tried to remove the package-lock.json and node_modules and installed again but it didn't help.

when I create a code sandbox with the same react version it working, not sure why in my current project no.

Answer 1

I changed the browsersList in package.json to

     "browserslist": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ]

Answer 2

I'm seeing the same issue. I'm not using CRA, but I see the exact same error.

react-virtuoso ^3.1.5 works, but that's not a very good answer.

It looks like the nullish coalescing operator polyfill is in @babel/preset-env now: https://babeljs.io/docs/babel-plugin-proposal-nullish-coalescing-operator

However, I think getGlobalThis() might need a polyfill. I added one to my babel plugins, but I'm still seeing the same error.

This is what my babelrc looks like

{
  "presets": [
    [
      "@babel/preset-env", {
        "useBuiltIns": "entry",
        "corejs": "3"
      }
    ],
    "@babel/preset-react",
    "@babel/typescript"
  ],
  "plugins": [
    [
      "@babel/plugin-proposal-class-properties",
      {
        "loose": true
      }
    ],
    [
      "@babel/plugin-proposal-private-methods",
      {
        "loose": true
      }
    ],
    "@babel/plugin-proposal-export-default-from",
    "@babel/plugin-proposal-object-rest-spread",
    "@babel/transform-arrow-functions",
    "@babel/plugin-transform-modules-commonjs",
    "@babel/plugin-transform-regenerator",
    "@babel/plugin-transform-runtime",
    "babel-plugin-transform-globalthis"
  ]
}

Any recommendations would be great.