I've got a project in React + Typescript + Webpack stack and I'm using react-data-grid package with #types/react-data-grid package. The problem is that the typings provided in #types/react-data-grid are not complete. Which results in typescript error when trying to use one of the properties. However I know this property exists and it's just the matter of incomplete typings. So I've got two issues I would like to resolve:
Add appropriate typings that would work together with #types/react-data-grid. Is there and option to that? That somehow typescript compiler would merge my new typings with #types/react-data-grid and stop showing the error?
Enable Hot Reloading in Webpack. Even thought the typings error is shown ,still the bundle is created and after refreshing page while using webpack-dev-server. So I can actually develope but it would be nicer to have hot reloading. Is there an option to tell webpack-dev-server to ignore typescript errors? I just want to do it in the meantime and later fix the issue with Ad. 1.
I am using:
"ts-loader" : "^4.1.0",
"typescript" : "^2.7.2",
"webpack": "^4.2.0",
"webpack-cli": "^2.0.13",
"webpack-dev-server": "^3.1.1"
Answering the question 1.
Generally you cannot. It can be that you will be able to extend their typings by extending their classes / interfaces and use your extended versions, however it is way better to extend the types by making a pull request at https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types which is where the #types/* are coming from
Answering the question 2.
This is what is coming from ts-loader docs
The build should fail on TypeScript compilation errors as of webpack
2. If for some reason it does not, you can use the webpack-fail-plugin.
It is done for good, because otherwise you will end up fixing production bugs before the release when you have already forgotten everything you did instead of fixing the errors while writing the actual code. Probably this could be disabled by using transpileOnly option.
Another option is using awesome-typescript-loader instead of ts-loader which has a errorsAsWarnings option
Related
Hello there I am getting some error in my terminal and its say i need to use 4.4.0 version and my current version is ...
In my project my current typescript version is given below,
"typescript": "^4.4.2",
"typedoc": "^0.21.8",
"react-scripts": "^3.4.4",
"#typescript-eslint/eslint-plugin": "^4.29.3",
"#typescript-eslint/parser": "^4.29.3",
Moreover, when I am trying to run npm run dev commands or npx eslint . is error are showing me which is given below,
=============
WARNING: You are currently running a version of TypeScript which is not
officially supported by #typescript-eslint/typescript-estree.
You may find that it works just fine, or you may not.
SUPPORTED TYPESCRIPT VERSIONS: >=3.3.1 <4.4.0
YOUR TYPESCRIPT VERSION: 4.4.2
Please only submit bug reports when using the officially supported
version.
=============
How can i fix this issue and I have done a lot of research in google but nothing is working. It would be great help for me.
I wouldn't downgrade my Typescript, as you will miss out on newer TS features - I would find a way to update #typescript-eslint/typescript-estree.
You might not have this installed directly and this might be a dependancy of another package, #typescript-eslint/experimental-utils which is dependancy of #typescript-eslint/eslint-plugin for instance, so track down the parent package in your yarn.lock / package.lock file and bump it, as a result it should bump #typescript-eslint/typescript-estree too.
Try using a typescript version between >=3.3.1 <4.4.0.
Here you have the list of typescript versions available.
After changing the version, remove node_modules folder and package-lock.json file. Then execute npm install
I developed an application with react-three-gui and #react-three/drei. After experimenting with the package.json, I was given the following error:
Error in question after changing the package.json file
But despite everything, even after undoing my changes, the error remains.
Things I have tried:
deleting node modules and reinstalling (no changes)
undoing changes and going to previous commits (error remained even then)
deleting only react-three-fiber (react-three-gui throws an error)
I have spent days looking for a solution but can't find one that relates to this specific problem. Anything helps.
package.json
The issue is in the dependencies.
First of all there's both react-three-fiber and #react-three/fiber. The former dependency is deprecated, but it has a dependency on #react-three/fiber and version latest.
So, this leads to a dependency on the latest version of #react-three/fiber which in turn has a dependency on "react": "^18.0.0", despite the "react": "^17.0.2" set in your project's package.json.
So, make sure you get rid of the deprecated dependency and align the dependencies so there are no version conflicts.
Reference for a similar issue: https://github.com/pmndrs/react-three-fiber/issues/2037
Was able to solve the problem by just creating a new react project, and transferring the code and 3d models I created to the new project. Once I reinstalled the necessary packages into the new project, everything started working again perfectly.
I upgraded my project from expo 44 to expo 45 and now I have inumerous errors like this:
The module 'MaterialIcons' can't be used as JSX component.
This error is happening with many libraries like react-native-paper, react-native-elements and even the native ones like expo-vector-icons.
If I rollback the upgrade everything gets back to normal, but I need to update to avoid having to do this later.
obs: I'm using typescript
Solved my problem by adding:
"resolutions": {
"#types/react": "^17"
}
to my package.json file.
It looks like yarn was using two different #types/react for the libraries, and this solved the issue.
I'm building a react application that depends on a third-party package (proprietary, not open sourced unfortunately), lets call it tslib. The package.json of tslib depends on many different package, but the two of interest are the following:
"react-router": "5.1.2",
"react-router-dom": "^5.1.2",
In the main application (lets call it mainapp), depends on tslib, and has the following in it's package.json:
"dependencies": {
"#githubrepo/tslib": "39.2.0",
},
it has no other non-dev dependencies. The issue im seeing is that when i build my application locally (note, this does not happen in production envs) using webpack and try to load the index page, i see the following:
Which is actually happening because there are two versions of both react-router and react-router dom being included (discovered using 'webpack-bundle-analyzer'). When I delete the version in my tslib, and re-webpack, the issue goes away. Does anyone know how I can go about fixing this problem using webpack config?
Version
"react": "16.0.0-alpha.6",
"react-native": "0.43.4",
"react-native-router-flux": "^3.38.1"
Everything worked perfect but after Install react-native-router-flux
all are die give too much error.
Failed to build DependencyGraph: #providesModule naming collision:
Duplicate module name: react-native
Paths: C:\Users\ashik\Desktop\react_apps\Friends\node_modules\react-native-router-flux\node_modules\react-native\
ackage.json collides with C:\Users\ashik\Desktop\react_apps\Friends\node_modules\react-native\package.json
This error is caused by a #providesModule declaration with the same name across two different files.
Error: #providesModule naming collision:
Duplicate module name: react-native
Paths: C:\Users\ashik\Desktop\react_apps\Friends\node_modules\react-native-router-flux\node_modules\react-native\
ackage.json collides with C:\Users\ashik\Desktop\react_apps\Friends\node_modules\react-native\package.json
I was already get too much question and answer as like this Error but, my React-native version and error not was same or I was not understand the solution. Please make some better solution or details for me. Also I am new in React-native and react Js.
The react-native-router-flux package includes its own (frozen) copy of react-native in order to be able to use a stable version of the navigation-experimental API from react-native. This sometimes causes collisions with the version of react-native being used in the project. Also, it seems the 3.38.1 release of react-native-router-flux causes some issues with recent versions of react-native. A possible solution is downgrading react-native-router-flux to the 3.38.0 version. Just change the line
"react-native-router-flux": "^3.38.1"
to
"react-native-router-flux": "3.38.0"
in your package.json, then delete the node_modules folder and run npm install. The older version should not have this issue.
reference issue in the project repo.