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?
Related
I've been developing a React app successfully for months. Suddenly it wouldn't start tonight, displaying the message shown here: Invalid options object. Dev Server has been initialized using an options object that does not match the API schema
This other message also flashed by really quickly:
I spent several hours trying every suggestion I could find and finally tried this one:
In package.json, change "react-scripts": "^5.0.1", to: "react-scripts": "^4.0.3",
And voila, it worked again!
Many have written that this is a known bug with React Scripts v5. Just wondering if anyone knows when it might be fixed?
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.
Create React App docs suggest forking react-scripts (instead of ejecting) if we have many similar projects. That's exactly my use case - I am trying to standardize the packages and structure that I always use in a React project. I would like to add these packages to the generated package.json file as opposed to the dependencies of react-scripts. For example, in the generated package.json file, the dependencies section should look like this:
"dependencies": {
"#material-ui/core": "^3.9.2",
"react": "^16.8.3",
"react-dom": "^16.8.3"
},
It appears that the only way to do this is to modify create-react-app itself because the code that generates package.json resides there.
I know that the CRA team recommends against modifiying create-react-app itself. So is there any other way to achieve what I am trying to do?
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
After creating a new project with create-react-app and running yarn eject.
The dependencies section of my package.json looks like this:
"dependencies": {
"autoprefixer": "7.1.1",
"babel-core": "6.25.0",
"babel-eslint": "7.2.3",
"babel-jest": "20.0.3",
"babel-loader": "7.0.0",
"babel-preset-react-app": "^3.0.1",
"babel-runtime": "6.23.0",
etc.
I would say these are all devDependencies why has create-react-app placed them here?
This is an intentional change in one of the latest versions.
The distinction is pretty arbitrary for front-end apps that produce static bundles. Technically you don't need any of these dependencies on the server, not even the runtime ones. So by that logic even react might be seen as a development dependency.
We used to try to separate them but as explained above, it isn't really consistent in the first place. There's no technical reason why this distinction is useful for apps that have no Node runtime. In addition, it used to cause problems for some Heroku deployments that didn't install development dependencies (and thus weren't able to build the project on the server or test it right before deployment).
In the end we went with just putting everything into dependencies. If you disagree you can always rearrange package.json as you deem reasonable.
These are all dev dependencies if the app you are building is a library, that you want to publish others to use.
Basically my understanding is this, if you have a module that can be used in two ways:
Consumed via npm i
Developed via cloning the project
In that scenario, it makes sense to put them in dev dependencies.
In your case people are going to clone your project to develop. And consume it via hosted one.
Hope this helps.!