Giters

transloadit / uppy

The next open source file uploader for web browsers :dog:

Home Page:https://uppy.io

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

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

kulitha opened this issue · comments

commented

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]
commented

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.

commented

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

commented

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