2

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.

Manspof
  • 598
  • 26
  • 81
  • 173
  • 1
    I think this might be related to the issue asked [here](https://stackoverflow.com/questions/67543182/react-babel-you-may-need-an-additional-loader-to-handle-the-results-of-these) Create react app has an issue with bullish coalescence, which seems to be what babel is complaining about there. The GitHub issue is old, so maybe this is fixed on newer versions of CRA, and that's why this is working on code sandbox? What version of react-scripts are you using? – Santiago Calvo Feb 18 '23 at 23:46
  • I'm using "react-scripts": "4.0.3", – Manspof Feb 19 '23 at 05:36

2 Answers2

1

I changed the browsersList in package.json to

     "browserslist": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ]
Manspof
  • 598
  • 26
  • 81
  • 173
0

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.

EHoops
  • 1
  • 1