App could not compile due to optional chaining

[Ruokai Zhao]

Expected behavior

The app should start with no issue.

Actual behavior

The app could not compile.

Steps to reproduce

I wanted to migrate from react-beautiful-dnd to @hello-pangea/dnd, and after installation and changing the imports, my app could not be compiled.

Suggested solution?

I spent some time investigating the cause of the error, I think it's because of the optional chaining used on line 4488, as shown in the screenshot, I tried to remove the question mark ?, and after that I was able to run the app without any problems.

I learned that this is due to the old version of babel not supporting optional chaining, and the recommended fix is to install @babel/plugin-transform-optional-chaining and put it in the babel.config.ts file. However, the project I'm working on is using babel version 7.15 which should support optional chaining.

I also followed the recommendation to install the @babel/plugin-transform-optional-chaining, but the app still could not compile.

I was wondering that, since there's only this one line that's using the optional chaining, is it possible to replace it with old style null checking like:

var getWindowFromEl = el => {
  if (!!el & !!el.ownerDocument && !!el.ownerDocument.defaultView) {
    return el.ownerDocument.defaultView;
  }

  return window;
};

for best backwards compatibility?

What version of React are you using?

18.0.5

What version of @hello-pangea/dnd are you running?

16.3.0

What browser are you using?

Google Chrome 119

Demo

[Gab]

Hi @ruokaizhao. I'll have a look and see what I can do! Thank you for opening a ticket!

[Gab]

We do our build for the last 5 versions of major browsers: https://github.com/hello-pangea/dnd/blob/d520b662babc70be828d3458d74d3f46bf3449e5/.browserslistrc

They all support optional chaining. I'll make the change, but I can't give any guarantee that optional chaining won't be reintroduced in the future.

[Gab]

The change has been released in v16.4.0.

[Ruokai Zhao]

@100terres Thank you so much for taking care of this issue, I can now migrate to @hello-pangea/dnd and in the meantime, I will discuss with my manager about updating our babel version to support optional chaining.