ERROR in ./node_modules/react-data-grid/lib/bundle.js 100:16

[msaiducar64]

Describe the bug

ERROR in ./node_modules/react-data-grid/lib/bundle.js 100:16
Module parse failed: Unexpected token (100:16)
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
| useLayoutEffect(() => {
| if (!isSelected) return;

ref.current?.focus({

| preventScroll: true
| });

To Reproduce

Link to code example:

Expected behavior

Environment

• "react-data-grid": "^7.0.0-beta.13",
• react/react-dom version: "^17.0.1" /"^17.0.1"

Additional context

[purplecones]

Getting this error as well. To reproduce I simply installed the package into my CRA app and used the code from Quickstart sample.

"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-data-grid": "^7.0.0-beta.13",

"react-scripts": "4.0.3"

[thegladysadjei]

Same issue as well. Really critical any help?

[vincaslt]

Same issue as well. Really critical any help?

Install the previous version, it is only an issue with the latest.

[thegladysadjei]

Was able to resolve it. It was an issue with javascript's optional chaining syntax ref.current?.focus({...}). In my case the issue happened when I tried running storybook. The storybook version we were using utilized webpack 4. Had to tell it to use webpack 5.
In your .storybook/main.js add
module.exports = { ... , typescript: { reactDocgen: false //if you're using typescript } core: { builder: 'webpack5' } };

Then had to install these in package.json
@storybook/builder-webpack5 @storybook/manager-webpack5

If your issue is not with storybook, still try upgrading your webpack to webpack5

[ekeuus]

It seems to be an issue with the bundling itself somehow as even old releases have this issue for me if I build them locally.

My guess is that probably some package has been upgraded, which somehow has broken the build process/output as well.

With this change it seems to work again and this specific issue is gone.

[rajasekar-mu]

This issue happening new release as well, any solution to resolve this issue?

"react": "^18.1.0", "react-data-grid": "^7.0.0-beta.14", "react-dom": "^18.1.0",

@vincaslt kindly share which previous version working?

[nstokoe]

@vincaslt kindly share which previous version working?

I was able to get this working by downgrading to 7.0.0-beta.12.

+1 to fixing this on all versions greater than 7.0.0-beta.12

[shawncao]

I also hit the same issue while trying the latest versions, such as beta-19, and beta-20, does anybody understand what the root cause is? mind share your thoughts please if yes?

[shawncao]

It is probably the same issue for everyone, just post for reference, this suggestion worked for me - https://stackoverflow.com/questions/67543182/react-babel-you-may-need-an-additional-loader-to-handle-the-results-of-these