Have errors in utils.js && ReactGridLayout.js

[dkireeti]

Describe the bug

We are facing below issue when the webpack is compiling the RGL.

ERROR in ./node_modules/react-grid-layout/build/utils.js 199:74
Module parse failed: Unexpected token (199:74)
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
|  */
| function childrenEqual(a /*: ReactChildren*/, b /*: ReactChildren*/) /*: boolean*/{
>   return (0, _fastEquals.deepEqual)(_react.default.Children.map(a, c => c?.key), _react.default.Children.map(b, c => c?.key)) && (0, _fastEquals.deepEqual)(_react.default.Children.map(a, c => c?.props["data-grid"]), _react.default.Children.map(b, c => c?.props["data-grid"]));
| }

Babel Config

{
        test: /\.jsx?$/,
        loader: 'babel-loader?cacheDirectory=true',
        include: [path.resolve(__dirname, 'client'), path.resolve(__dirname, 'galaxyApps')],
        query: {
          presets: [
            ['@babel/preset-react'],
            [
              '@babel/preset-env',
              {
                targets: 'last 2 years',
                modules: "commonjs"
              },
            ]
          ],
          plugins: [
            ['@babel/plugin-transform-runtime', { 'useESModules': true }],
            'lodash',
            "@babel/plugin-syntax-dynamic-import",
            "@babel/plugin-proposal-class-properties",
            "@babel/plugin-proposal-nullish-coalescing-operator",
            "@babel/plugin-proposal-optional-chaining",
            isDevelopment && require.resolve('react-refresh/babel')
          ].filter(Boolean)
        }
      },

Node : 16
NPM:6
where forcing the RGL library version to 1.4.2 is fixing the issue, since there are multiple clients using different versions
of react-grid-layout, we can't request the clients to do force resolutions.
request to share the solution to this issue.

Your Example Website or App

https://codesandbox.io/p/sandbox/staging-bush-3lvt7?file=%2Fsrc%2FShowcaseLayout.js

Steps to Reproduce the Bug or Issue

1. install react-grid-layout
2. install webpack 4(webpack ^4.41.5) and babel.
3. use the below babel config(@babel/core - ^7.21.3)

module.exports = {
    "presets": [
      ["@babel/preset-env", {
        "targets": 'last 2 years',
        "modules": "commonjs",
    }],
    '@babel/preset-typescript',
    '@babel/preset-react'
  ],
  plugins: [['@babel/plugin-transform-runtime'],
    "@babel/plugin-proposal-class-properties",
    'lodash',
    "@babel/plugin-syntax-dynamic-import",
    "@babel/plugin-proposal-export-default-from",
    "@babel/plugin-proposal-nullish-coalescing-operator",
    "@babel/plugin-proposal-optional-chaining",
  ]
}

4. and an entry in webpack and run build.

Expected behavior

No Error in webpack build.

react-grid-layout library version

1.4.4, 1.3.4

Operating System Version

macOS,

Browser

Chrome

Additional context

No response

Screenshots or Videos

[gaofanni]

using 1.4.3

[dkireeti]

is this observed when the JS out compile module to be commonJS in babel or webpack config ?

[stuckj]

We're hitting this too. The problem is the optional chaining operator (i.e., ?'s) usage in the JS output. Line 360 in ReactGridLayout.js, for example looks like this in 1.4.3:

      !((_e$nativeEvent$target = e.nativeEvent.target) !== null && _e$nativeEvent$target !== void 0 && _e$nativeEvent$target.classList.contains(layoutClassName))) {

and this in 1.4.4:

      !e.nativeEvent.target?.classList.contains(layoutClassName)) {

The former looks like babel output handling an optional in vanilla JS whereas the latter is leaving the optional chaining in. If you're targeting pre-ES2020 (or using an older browser) it will barf on this.

Perhaps this was from the node version switch from 16 -> 18? That looks like the biggest change in the diff: 1.4.3...1.4.4.

Maybe this shouldn't be a patch release?