Module parse failed

[manuelMoraYolo]

Describe the bug

./node_modules/@tanstack/virtual-core/dist/esm/index.js 254:22
Module parse failed: Unexpected token (254:22)
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.
|         startIndex,
|         endIndex
>       } = this.range ?? {
|         startIndex: void 0,
|         endIndex: void 0

Hi guys, can you help me with this problem? I already use:

"@babel/plugin-proposal-nullish-coalescing-operator"
"@babel/plugin-proposal-optional-chaining"

This error happen only when i use useVirtualizer()

Your minimal, reproducible example

Steps to reproduce

• Install the library
• Try to use useVirtualizer()

Expected behavior

It should work without problems

How often does this bug happen?

Every time

Screenshots or Videos

No response

Platform

macOS

tanstack-virtual version

^3.9.0

TypeScript version

^4.7.4

Additional context

No response

Terms & Code of Conduct

• [X] I agree to follow this project's Code of Conduct
• [X] I understand that if my bug cannot be reliable reproduced in a debuggable environment, it will probably not be fixed and this issue may even be closed.

[kadinwu]

meet the same issue, any plan to fix it?

[Guiw5]

yes me too, it should be a transpiler option to provide compatibility with older ES versions, right now I am looking for another version of tanstack without this syntax. BUT!! in my project (react 17.. and react-scripts 4.0.3, sorry) I did resolve the syntax issue connecting those babels you mentioned with react rewired

 // pkg.json
"@babel/plugin-proposal-nullish-coalescing-operator": "^7.18.6",
"@babel/plugin-proposal-optional-chaining": "^7.21.0",
"babel-plugin-transform-imports": "^2.0.0",
"customize-cra": "^1.0.0",
"react-app-rewired": "^2.2.1",

then rewired allows you to add a config-overrides.js file

// config-overrides.js
const { override, addBabelPlugins, babelInclude } = require('customize-cra');
const path = require('path');

module.exports = override(
  ...addBabelPlugins(
    '@babel/plugin-proposal-nullish-coalescing-operator',
    ['@babel/plugin-proposal-optional-chaining', { loose: false }]
  ),
 babelInclude([
    path.resolve('src'),
    path.resolve('node_modules/@tanstack')
  ])
);

also you have to change your scripts (every place you have react-scripts it has to be replaced with react-app-rewired (in package.json again) : "test": "react-app-rewired test", "start": "react-app-rewired start"

as this involves many changes in the chore of the project I dont like it much, would like to find a better solution

hope it hepls

[wkchu-hket]

Same issue, finally works with:

{
    test: path.join(__dirname, 'node_modules', '@tanstack', 'virtual-core'),
    use: {
        loader: 'babel-loader',
        options: {
            plugins: ['@babel/plugin-proposal-nullish-coalescing-operator'],
        },
    },
},

in webpack.config.js module rules

[PerryFinn]

I did not find a clear browser compatibility version on the official website, could the official have the opportunity to supplement this in the documentation?