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

@uppy/core and @uppy/dashboard 4.0.0-beta-3 versions contain references to React packages and JSX files in an Angular 17 app #5098

Closed
2 of 4 tasks
kulitha opened this issue Apr 19, 2024 · 3 comments · Fixed by #5117
Labels

Comments

@kulitha
Copy link

kulitha commented Apr 19, 2024

Initial checklist

  • I understand this is a bug report and questions should be posted in the Community Forum
  • I searched issues and couldn’t find anything (or linked relevant results below)

Link to runnable example

https://stackblitz.com/edit/stackblitz-starters-z1tmwy

Steps to reproduce

  1. In an Angular 17 project, Install the latest beta versions (Uppy 4.0.0-beta.3) of @uppy/core, @uppy/dashboard, @uppy/tus using npm install @uppy/core@next @uppy/dashboard@next @uppy/tus@next.
  2. Install the latest beta versions (Uppy 4.0.0-beta.3) of @uppy/angular, @uppy/drag-drop, @uppy/progress-bar, @uppy/status-bar, @uppy/utils using npm install @uppy/angular@next @uppy/drag-drop@next @uppy/progress-bar@next @uppy/status-bar@next @uppy/utils@next.
  3. Declare a new Uppy property and Uppy dashboard configuration property (with custom values) inside the component (Configuration is shown in the above example with Angular 17).
  4. Install loadash as a dev dependency sing npm i --save-dev @types/lodash. This is done since it gives a compilation error if I try to run the app while declaring a new Uppy object inside the component with uppy: Uppy<any, any> = new Uppy();.
  5. Run the app using npm start.

Expected behavior

  • The application should compile properly and run.
  • The imported Uppy and DashboardOptions classes should not contain references to React and JSX files.
  • browserBackButtonClose should not give an error when used inside the DashboardOptions property as an option.

Link to the running example with the expected behaviour in Angular 16 using the same stable versions of the above used packages (minus the loadash package since it didn't give me an error).

Actual behavior

  1. The application doesn't compile and run. It gives multiple errors such as:
    image
  2. The imported Uppy and DashboardOptions classes contain references to React and JSX files.
    image
  3. Using browserBackButtonClose as an option gives the following error when used inside the DashboardOptions property.
    TS2353: Object literal may only specify known properties, and 'browserBackButtonClose' does not exist in type 'DashboardMiscOptions<any, any> & DashboardInlineOptions'. [plugin angular-compiler]
@kulitha kulitha added the Bug label Apr 19, 2024
@kulitha
Copy link
Author

kulitha commented Apr 19, 2024

I tried following the same steps and recreating the issue in a local environment without using Stackblitz. And it does compile and run and display the uppy dashboard. However, the issue of browserBackButtonClose not being available as an option inside DashboardOptions property still persists.

And opening the DashboardOptions class imported in the component opens up Dashboard.tsx class file that contains errors.
image

If there are any issues in the steps that I used or if this is an issue on my end, please let me know.

@Murderlon
Copy link
Member

Hi, so if I understand correctly you no longer see the React related errors for JSX.Element? Only that browserBackButtonClose is missing?

@Murderlon
Copy link
Member

We're going to replace all the instances of JSX.Element with an imported type to fix this.

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

Successfully merging a pull request may close this issue.

2 participants