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.!
Related
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?
This is my first React Native project. The repo is here.
When I start up expo, I get the error:
Cannot find module 'babel-preset-react'
Among others, it has these dependencies:
"expo": "^32.0.0",
"react": "16.8.4",
"react-native": "https://github.com/expo/react-native/archive/sdk-32.0.1.tar.gz",
"#babel/core": "7.3.4",
"babel-core": "^7.0.0-bridge.0",
"#babel/preset-react": "^7.0.0",
I found these four libraries in my app's /node_modules that each contain a dev dependency on "babel-preset-react":
hoist-non-react-statics, prop-types, react-input-autosize and
react-proxy.
None of these have newer versions that depend on "#babel/preset-react".
I had this a few, every time I install a new module/plugin.
My solution has been to delete node_modules folder and yarn install or npm install.
It stops the error. I'm not sure is the right solution (would be interested to know if it is), but works.
I had to change ['react'] to ['#babel/preset-react'] in .bablerc when upgrading from babel 6.x to 7.x:
{
"presets": [
"#babel/preset-env",
"#babel/preset-react",
]
}
This seems to be an issue to do with an expo project being in a bad state.
Expo is an express set of libs with the goal of simplifying development, but it is not compatible with most react native examples in the wild.
After further review, it looks like you may have followed a regular react native example in an Expo based project, without first ejecting.
I had a similar issue wherein I mistyped babel/preset-react as babel-preset-react in the babel config file.
Correcting the typo helped me resolve the issue.
I had this issue after an upgrade. I needed a restart and it was solved. Apparently some caching issue or running process which still uses an old dependency.
First of all make sure the babel config has '#babel/preset-react' in presets and not 'babel-preset-react'
Apart from that. this did it for me:
npm i #babel/preset-react
npm i #babel/core
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?
Under OS X, Node 10.7.0.
I created the electron-forge app with:
electron-forge init app-name --template=react
Some version info:
"electron-forge": "^5.2.2",
"react": "^16.4.2",
"electron-prebuilt-compile": "2.0.7",
"electron-compile": "^6.4.3",
I can provide other version info if necessary.
The only things I changed from the stock electron-forge build was the React version (I'm using material-ui 1.5.1). It works fine under electron-forge start, it's only the built one that fails.
My initial assumption was that the text/jsx script in the default index.html wasn't working; I replaced it with the transpiled code, same issue. My next assumption is the Node version, which would be a bit of a let-down if that turns out to be it.
A naive upgrade to electron-forge#master did not resolve the issue.
I'm not sure how to debug the packaged application (things like --verbose --debug did nothing) and the dev tools don't show up even if I remove the comment around the installExtension or hit the normal dev console keys.
I don't know enough to know what other information might be required; just let me know.
So I am trying to use react-redux with typescript. This is what my package.json looks like
"dependencies": {
"#types/react-dom": "15.5.0",
"#types/react": "15.0.4",
"#types/react-redux": "4.4.39",
"axios": "0.16.2",
"react": "15.0.0",
"react-dom": "15.0.0",
"redux": "3.6.0",
"react-redux": "5.0.6",
"redux-thunk": "2.1.0",
"office-ui-fabric-react": "1.0.0"
}
Now when I do yarn install. I see multiple react types get installed. Once for #types/React. One for #types/React-redux and #types/react-dom inside each of its own node_modules folder. And the version of the types these modules install internally are very different as I see in my yarn.lock file.
When I try to compile this, I get the errors like
error TS2304: Cannot find name 'DetailedHTMLFactory'.
Subsequent variable declarations must have the same type
The error disappears if I duplicate all the nested #types and just keep teh top level #types/react.
Whats a better way to do this, so that duplicate types issue doesn't appear ?
Since you are using yarn, the easiest direction might be to use resolutions in the package.json file to force specific versions of the typings, see https://github.com/yarnpkg/yarn/pull/4105
Other than that you would have to figure out which specific versions of these typings work with one another. Basically look at #types/react-dom dependency list and then include the same version of #types/react in your project.
You should try to remove your node_modules folder, run yarn cache clear and reinstall everything. There is an issue on the typescript repo about this behaviour ( I ran into it recently with one of my side projects ) that i'll try to find and link to this answer.
So I finally fixed this by excluding node_modules folder.
Put "node_modules" in the "exclude" section of tsconfig.json .