I am encountering a weird build issue with typescript and #types/react. I have two typescript config files: one for files which use react, and one for those that don't. When building the portion of my project which doesn't use react, I see the following error:
node_modules/#types/react/index.d.ts(3508,58): error TS2304: Cannot
find name 'HTMLDialogElement'.
node_modules/#types/react/index.d.ts(3508,78): error TS2304: Cannot
find name 'HTMLDialogElement'.
node_modules/#types/react/index.d.ts(3782,72): error TS2304: Cannot
find name 'HTMLDialogElement'.
node_modules/#types/react/index.d.ts(3782,92): error TS2304: Cannot
find name 'HTMLDialogElement'.
I was able to reproduce the error with a minimal example:
node_modules/typescript/bin/tsc typescript/foo.ts --outDir static/js/src --module none
The file typescript/foo.ts is a minimal file I used to reproduce the problem, and is deliberately short:
function printNumber(n: number) {
console.log(n);
}
let x = 3;
x *= 4;
printNumber(x);
Note that foo.ts does not have any references to react whatsoever. The weirdest part of this is when I uninstall #types/react, the error messages go away.
What's going on?
EDIT: I found this issue which manifests when tsc version > 2.3.2. I downgraded tsc to version 2.3.2 but the problem persists.
As fair as I understand the typescript's policies, this is relative to the version you are using. When typescript 2.3.2 was out the definition for HTMLDialogElement was not included in #types/react, so you see this error. You can read more about this in this github issue.
Probably, even if you don't include React on your foo.ts, the typescript compiler will include and check all the definitions that you've got, even those in node_modules. This will explain why you have this error even without including React.
Now that I think about it, I don't event include the definitions that I wrote - but they're used by the transpiler.
I had the same issue on a project recently cloned yesterday; I fixed it by updating typescript to ^2.7.0.
I had the same problem. tried all the upgrades and downgrades mentioned here.but, nothing worked for me. finally ended up commenting out the 'dialog' from line number 3782 and 3508 in node_modules/#types/react/index.d.ts
This is only a quick fix.
I had the same issue (latest create-react-app, with typescript version 2.5.3) and after I ejected the app (npm run eject) and updated typescript by hand to current version in package.json to current 2.7.2 this works again.
Seems to be some very strange bug (on Windows) cause my college (same installation) doesn't have this bug. When searching for this, you will find it appearing every 2 month or so, so that I guess, that it is not only this issue ( https://github.com/Microsoft/TypeScript/issues/16880 ) Duma pointed to, cause the project we're working on started somewhere in December.
Related
I have had react-beautiful-dnd installed and functional for a while and out of nowhere I am now getting an error from node_modules about create-react-app being unable to compile the file position.js in the react-beautiful-dnd package. I have looked into breaking changes being pushed to their repo but nothing is different 2 months back, I invalidated my cache and restarted (on webstorm) nothing, finally I deleted my node_modules and reinstalled them but still the error occurs.
It seems to be rightly trying to compile the file as javascript given its extension however the code seems to be Typescript, I looked at the repository and indeed github reports it to be 100% javascript but most of the files I saw including the snipped above seem to use Typescript. I was under the impression that typescript could not be directly run from a javascript file am I incorrect? What could be causing the error?
Thank you
To use import type, you should place type before the curly brackets:
import type { Position } from 'css-box-model';
Besides, if you want to import the type definition in 'css-box-model' as well as its methods or constants, import them separately:
import { constant } from 'css-box-model';
import type { interface } from 'css-box-model';
I have been scratching my head for last one day on this. I am using Ngx-Toastr package in my angular application. Below are the points which I think help you understand the problem.
In dev server (ng serve) I didn't get any error there was no Nullinjector problem, then I make a production build using the following command (ng build). Until this point everything works fine. Now I need to optimize the bundle size so I ran this (ng build --prod). Build was successful no error Now it's time to serve the code (I am using Node server to serve this). Here the problem starts -
First it's asking for
'NullInjectorError: No provider for ToastrService'
which is coming from the Ngx-Toastr Package it self and It makes sense so I add that service to the appmodules and also in other Lazy loaded modules in the providers array. So after this the error has gone . But next is what I want to talk about -
Next it is asking for 'NullInjectorError: No provider for Overlay!' So I though there must be this service from the package which needs to be added in the providers array. So I tried to import it from the package it self and to add it in the providers array like below:
import { Overlay } from 'ngx-toastr/overlay/overlay';;
doing so got the below error
Module not found: Error: Can't resolve 'ngx-toastr/overlay/overlay'
Next I tried searching for this problem and found some stackoverflow solutions which suggest to add the following line:
import {OverlayModule} from '#angular/cdk/overlay';
I added this module in the imports array of every modules. Nothing got changed.
Now I have no clue what to import and where to import. And I am also not sure whether I am going right or not or where should I start looking into it. I also doubt that this error is coming from that package or what!! cause It should work without implicitly importing those services.
I run the following command to get the error ahead of production build:
ng serve --prod --optimization=false
Please also mention how to debug the following error, sometime after production build we get error like this which is undoubtly makes no sense:
ERROR Error: "StaticInjectorError[t -> t]:
StaticInjectorError(Platform: core)[t -> t]:
NullInjectorError: No provider for t!"
I hope my explanation makes some sense to you. Thanks for your time and sorry for this long question.
Lastly FYI : I have already removed node-modules and re-installed it.
Make sure you're using a version of ngx-toastr compatible with your version of angular and typescript. https://github.com/scttcper/ngx-toastr#dependencies
ngx-toastr v13 requires angular >= 10
I am using
ember-cli: 3.4.3 ,
node js:10.16.3,
ember-resolver: 5.2.1
ember-serve work perfectly and give
Build successful (25929ms) – Serving on http://localhost:4232/
but on browser console the following error comes and unable to process further
Uncaught Error: Could not find module `ember-resolver` imported from `appName/resolver'
I tried deleting package-lock.json ,node-modules, clearing cache & reinstalling still the same
Can any one help on this please
Found the issue with one dependency in package.json
"ember-light-table": "2.0.0-beta.4"
It seems this version of ember table is not compatible with other ember dependencies
reverted it to "ember-light-table": "2.0.0-beta.3",
now it is working fine
upgrade ember-source to #3.17.1 or higher
The error I get is described here on github in detail. Basically the metro bundler fails with the following error:
error: bundling failed: TypeError: Cannot read property 'map' of undefined
at resolveDependencies (C:\Apps\MyProject\rnw\node_modules\metro\src\DeltaBundler\traverseDependencies.js:370:18)
at C:\Apps\MyProject\rnw\node_modules\metro\src\DeltaBundler\traverseDependencies.js:188:33
at Generator.next ()
at step (C:\Apps\MyProject\rnw\node_modules\metro\src\DeltaBundler\traverseDependencies.js:298:30)
at C:\Apps\MyProject\rnw\node_modules\metro\src\DeltaBundler\traverseDependencies.js:309:15
at
DELTA [android, dev] ....../index.js ▓▓░░░░░░░░░░░░░░ 14.7% (221/612), failed.
This error message does not help me much, as I am not deep into how the metro bundler works.
So I checked recent changes I did in the code, e.g. I added the following to my project:
"react-native-tab-view": "^1.3.2",
After that, I have a weird change in package-lock.json. It seems react-native-tab-view was already existing there, I guess because it is a dependency of another project I imported before. Here is the first change in package-lock.json:
Ok so whatever, this looks still ok to me. What is weird is the second change I see:
Wait, what? A dependency to react-native-tab-view was added to react-navigation-deprecated-tab-navigator with the old version number 0.0.77? That looks strange, at least for me.
Can somebody help me out here - is this change normal, or can this be the reason why metro bundler fails?
Any input appreciated!
I solved the issue by emptying the C:\Users\\AppData\Local\Temp folder.
No Need to Empty whole folder
I solved the issue by deleting only one folder metro-cache
Path : C:\Users\Harsh1311\AppData\Local\Temp
I'm using Angular in a website in which I just upgraded angular, angular-route and angular-ui-router to the latest bower versions. But suddenly I get this error in the console:
TypeError: a.remove is not a function
at Object.H.removeListener (main.js:7)
at Object.b.module.service.a.removeEvents (angular-google-maps.min.js?version=2.2.1:5)
at angular-google-maps.min.js?version=2.2.1:8
at n.a.$get.n.$broadcast (angular.js:16311)
at n.a.$get.n.$destroy (angular.js:15923)
at j (angular-ui-router.min.js?version=0.2.15:7)
at angular-ui-router.min.js?version=0.2.15:7
at angular.js:7554
at k (angular-ui-router.min.js?version=0.2.15:7)
at angular-ui-router.min.js?version=0.2.15:7
The problem is now that I'm unsure of how to debug this. In the trace above I see two libs: angular-ui-router and angular-google-maps. Should I start looking through the source of these libs, or is there something I'm missing in this trace which shows me how to solve this?
All tips are welcome!
[EDIT]
As suggested in the comments by #charlietfl I checked the dependencies of angular-google-maps in the bower.json file:
"dependencies": {
"angular": "1.2 - 1.4",
"angular-simple-logger": "~0.0.1",
"lodash": ">=3.8.0"
},
Currently I've got:
angular version 1.4.7
angular-simple-logger version 0.0.4
lodash version 3.10.1
From this only angular-simple-logger seems to be off. But I'm unsure what to do from here. Should I downgrade angular-simple-logger to version 0.0.1, should I change "~0.0.1", to ">=0.0.1", or is there anything else I could do?
I can't see your source code, so this looks like it might be pretty specific to your application. Especially with ui-router, state parameters can muck up a lot of things.
If this were my application, I would first turn these settings on in the Chrome debugger.
Then I would run the code and step through until the exception was thrown in angular-ui-router.min.js, since that's furthest back in the stack trace.
To make things readable, you click this handy button:
It might not be the quickest solution, but it will get you the details you need to further diagnose the problem.