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
Typescript / Angular constructor errors #53
Comments
Maybe comments will useful here: https://wakirin.github.io/Litepicker/#anchor-Comments |
I haven't looked too deep into it just yet but my current work around is as follows:
I am unable to post the entire component, however these are the key lines of code that got it to work for myself. Hopefully this helps unblock you until a cleaner solution can be provided |
I should update that this works for builds but for some reason errors out when running unit tests reporting that litepicker.default is not a constructor. I am looking into possible solutions and will update accordingly |
So I have some updates on why it behaves as it currently does: The As for the import statement I am still having issues in Typescript. My work around above works great for my browser build but when I go to unit test the component I receive A possible solution would be to move all the public functions from
or just set This would allow TS to pull the typing from the class directly instead of from a separate interface and make it so that import statements should look the same for both JS & TS implementations ( I am happy to create the PR to do so, however I know that there is a trade off of readability. I think it was a smart decision to separate the public methods into their own file like it currently is since TS doesn't support partial classes at this time. That being said I think it might be worth merging the files for the time being. @wakirin I would like to ask for your input on whether or not you feel this would be the right direction for the project. If you agree, I am happy to start on a PR, otherwise I am happy to work towards other possible solutions. |
Thanks for research. |
Well, I think found a working solution.
|
Looks great I tested the changes against my repo and it works in production but still errored out in tests. I found out this is because I do not have the After some digging I have discovered that removing (commenting out) the So my suggestion would be that we remove the library export setting. If that is not viable we should look into updating the docs to note that the library may require the tsconfig setting when using typescript to work. |
I see that without setting |
So after some further testing I have come to the conclusion that I am not an expert with webpack but from my investigation it appears that we have to choose between either this tsconfig setting or making the JS users use the library like I think what is in the fix-import branch as it currently is resolves the issue. We may want to update the documentation noting that if you are experiencing errors with Typescript to try adding Maybe when the library is reaching a point where v2 is being planned, it could be considered whether switching to a |
Ok, I'll merge the branch |
v1.2.0 has been published. |
No worries, happy to help! And thank you for being so responsive and receptive! |
Confirmed v1.2.0 works well even without |
Is there any alternative to the I'm using 1.5.5 |
@CaffeineDreams |
Yeah without that its behaving as described in the first post in this thread. 2 main differences in our setup though - we're on TS 3.5.3 and Angular 8.2, but I'm pretty sure angular has nothing to do with this. I'm following basically the same pattern as OP:
It builds fine but we get a runtime error: Thanks for responding :) |
@CaffeineDreams |
Yeah I can do, will be a few hours until I get a chance though. |
Here's a stackblitz showing the behaviour: https://stackblitz.com/edit/angular-ivy-hmlygj You'll see the error in the console on page load |
@CaffeineDreams
|
hmmm.... I'm sorry but while that works on the stackblitz example, when I try that in my project I get: |
I've been having another stab at this today. It would appear that the global Litepicker function is available and working correctly at runtime, as I can call |
Ok, I got to the bottom of it and it's, as I suspected, entirely a problem at our end. We use Angular with a custom webpack config, and our chunking configuration was missing the Litepicker import. I added a line to import Thank-you for your help |
Hello I am trying to use the library in vue js but it generates a dataset error, the truth is that it is the first time that I am going to use it, it looks very good but I probably need to do some configuration or something, thank you very much. Vue warn]: Error in created hook: "TypeError: Cannot read properties of null (reading 'dataset')" found in ---> at src/views/ViewCapacitacion/index.vue |
Describe the bug
Import error/confusion.
Litepicker 1.0.34
Typescript 3.8
Angular 9
To Reproduce
If you import like this:
import { Litepicker } from 'litepicker';
in typescript (angular)and use it as
const picker = new Litepicker(..)
. I get:ERROR in ..../src/app/main-nav/service-overview/service-overview.component.ts:41:24 - error TS2351: This expression is not constructable. Type 'typeof import("...../node_modules/litepicker/dist/js/index")' has no construct signatures.
If I import it as
import * as Litepicker from 'litepicker';
Then compiler errors with:
TS2351: This expression is not constructable. Type 'typeof import("/..../node_modules/litepicker/dist/js/index")' has no construct signatures.
(I also tried
import Litepicker from 'litepicker';
which is not valid)I think you have the types mixed up or something.
edit
I think you need a contructor defined in methods.ts
Litepicker.prototype = [...]
something like that.Expected behavior
To run without errors or warnings.
The text was updated successfully, but these errors were encountered: