Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

App could not compile due to optional chaining #720

Closed
ruokaizhao opened this issue Nov 15, 2023 · 4 comments · Fixed by #734
Closed

App could not compile due to optional chaining #720

ruokaizhao opened this issue Nov 15, 2023 · 4 comments · Fixed by #734
Assignees
Labels
enhancement New feature or request

Comments

@ruokaizhao
Copy link

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

image
@100terres
Copy link
Collaborator

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

@100terres 100terres self-assigned this Dec 6, 2023
@100terres 100terres added the enhancement New feature or request label Dec 6, 2023
@100terres
Copy link
Collaborator

100terres commented Dec 6, 2023

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.

100terres added a commit that referenced this issue Dec 6, 2023
We are removing the optional chaining because one of our users is having issues with an old babel
version that doesn't work with optional chaining.

fix #720
100terres added a commit that referenced this issue Dec 6, 2023
We are removing the optional chaining because one of our users is having issues with an old babel
version that doesn't work with optional chaining.

fix #720
@100terres
Copy link
Collaborator

The change has been released in v16.4.0.

@ruokaizhao
Copy link
Author

@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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants