[BUG] failed to compile react viruoso

[MaherUnlocker]

im using CRA with this config and i cant use react Virtuoso

and this my config `const fs = require("fs"); const CracoAlias = require("craco-alias"); const ESLintPlugin = require("eslint-webpack-plugin"); const { ESLINT_MODES } = require("@craco/craco");

module.exports = { eslint: { mode: ESLINT_MODES.extends, configure: () => { // Workaround for broken ESLINT_MODES.file mode return require("./.eslintrc.js"); }, }, plugins: [ { plugin: CracoAlias, options: { source: "tsconfig", // baseUrl SHOULD be specified // plugin does not take it from tsconfig baseUrl: "./src", / tsConfigPath should point to the file where "baseUrl" and "paths" are specified/ tsConfigPath: "./tsconfig.paths.json", }, }, { plugin: { overrideCracoConfig: ({ cracoConfig }) => { if (typeof cracoConfig.eslint.enable !== "undefined") { cracoConfig.disableEslint = !cracoConfig.eslint.enable; } delete cracoConfig.eslint; return cracoConfig; }, overrideWebpackConfig: ({ webpackConfig, cracoConfig }) => { if ( typeof cracoConfig.disableEslint !== "undefined" && cracoConfig.disableEslint === true ) { webpackConfig.plugins = webpackConfig.plugins.filter( (instance) => instance.constructor.name !== "ESLintWebpackPlugin" ); } webpackConfig.plugins = webpackConfig.plugins.filter( (plugin) => !(plugin.options && "eslintPath" in plugin.options) );

                webpackConfig.plugins.unshift(
                    new ESLintPlugin({
                        // Plugin options
                        extensions: ["js", "mjs", "jsx", "ts", "tsx"],
                        formatter: require.resolve(
                            "react-dev-utils/eslintFormatter"
                        ),
                        eslintPath: require.resolve("eslint"),
                        context: "./src",
                        cache: true,
                        // Setting threads to false boost compiling speed back to previous levels
                        threads: false,
                        // ESLint class options
                        cwd: fs.realpathSync(process.cwd()),
                        resolvePluginsRelativeTo: __dirname,
                        baseConfig: {
                            extends: [
                                require.resolve(
                                    "eslint-config-react-app/base"
                                ),
                            ],
                            rules: {
                                "react/react-in-jsx-scope": "error",
                            },
                        },
                    })
                );

                return webpackConfig;
            },
        },
    },
],

}; `

Failed to compile.

./node_modules/react-virtuoso/dist/index.mjs 571:64 Module parse failed: Unexpected token (571:64) File was processed with these loaders:

• ./node_modules/react-scripts/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) {

[petyosi]

Put this into a runnable sample repository, remove any code that's not relevant to the problem and ensure that your dependencies are up-to-date - I will take a look once this is available.

[petyosi]

While researching something else, I reproduced that error. In that particular case, the problem was caused by react-scripts v4 - I can't say for sure if this is what causes it in the setup above.

The problem should be fixed in react-virtuoso@v4.2.1.