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?
Related
When I create React project, it has below error report:
The react-scripts package provided by Create React App requires a dependency:
"webpack": "4.44.2"
Don't try to install it manually: your package manager does it automatically.
However, a different version of webpack was detected higher up in the tree:
/Users/lizhiyuan/node_modules/webpack (version: 4.46.0)
Manually installing incompatible versions is known to cause hard-to-debug issues.
If you would prefer to ignore this check, add SKIP_PREFLIGHT_CHECK=true to an .env file in your project.
That will permanently disable this message but you might encounter other issues.
To fix the dependency tree, try following the steps below in the exact order:
1. Delete package-lock.json (not package.json!) and/or yarn.lock in your project folder.
2. Delete node_modules in your project folder.
3. Remove "webpack" from dependencies and/or devDependencies in the package.json file in your project folder.
4. Run npm install or yarn, depending on the package manager you use.
I go to the package.json file, but I did not find related codes in it. The part code of the file is:
"dependencies": {
"#testing-library/jest-dom": "^5.14.1",
"#testing-library/react": "^11.2.7",
"#testing-library/user-event": "^12.8.3",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-scripts": "4.0.3",
"web-vitals": "^1.1.2"
},
In addition, another tip is:
If nothing else helps, add SKIP_PREFLIGHT_CHECK=true to an .env file in your project.
However, I cannot find such ".env" file in my project. It is also hard to create ".env" file on my MacBook because the behavior is deterred by the system.
Does anyone know how to fix it?
Yes, I've heard CRA has issues with webpack. I'd suggest you to write your own project from scratch with a custom webpack 5 config.
However, you can simply fix this issue by creating a file named .env at the root of your project and adding this line in it: SKIP_PREFLIGHT_CHECK=true. Restart you app, it will work. MaxOs doesn't hamper you to create .env file in your IDE (vscode for ex.).
I'm trying to run a repo from Github locally. The folder structure for react is somewhat different what what I usually see in a react project(I'm new to react). the folder structure is like
-index.js
-css folder
-jsx folder - components
-jsx folder - index.html
-jsx folder - index.js
Also react is added as a peer dependency. I'm not sure how to run this repository. Any help is much appreciated
React in package.json
"peerDependencies": {
"react": "^16.3.0",
"react-dom": "^16.3.0",
"react-router-dom": "^5.1.2"
}
It was library files. So I had to create a new project using create-react-app and install the library in my new project and then make changes.
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?
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 .
I have 3 React-related packages in my package.json, and the version numbers must be in sync. I know with Maven, you can define variables in the POM file to re-use and keep version numbers in sync across different packages.
I want to do the same thing with my npm package.json, like so:
...
"config": {
"react_version": "^15.4.1"
},
"dependencies": {
"react": "$npm_package_config_react_version",
"react-addons-test-utils": "$npm_package_config_react_version",
"react-dom": "$npm_package_config_react_version"
}
...
It seems that config variables set in the package.json file can only be used inside your script commands.
Is there a way to solve this problem at the moment? Will something like this be included in a future version of npm?
I've been wrestling with this too. The issue for me has been that I want to use different npm tags in different environments ('latest' for dev, 'prod' for prod). The solution I came up with is to use an environment variable for the tag. I set up something along the following in package.json. Since I'm using 'latest' everywhere except for production servers, I avoid the problem of inadvertently changing the git repo:
"scripts": {
"start": "perl -pi -e \"s#\\\"package_name\\\".*#\\\"package_name\\\": \\\"$TAG_VAR\\\",#\" package.json && node app.js"
},
"dependencies": {
"package_name": "latest",
"other_package": "^1.0.0"
}