I am trying to work on a package locally that is a dependency in a react project. I want to debug an issue while it's running in the main react project.
simply using yarn link creates duplicate versions of react that breaks hooks. (I also tried yarn linking react and react-dom and it get's harry and I was seeing other issues with that)
So I thought to myself, I have an idea. I can just do this:
rm ./node_modules/<my-package>/dist
ln -s /<path-to-my-dev-package>/dist ./node_modules/<my-package>/dist
And that would be the equivalent. I just need to run yarn build on my package before testing it in my app.
The problem is, I cannot get yarn to "see" the changes.
I have verified the symlink is there. I have verified the changes in the built files.
yet no matter what I do, the old non symlink'd version is what I see.
I tried:
yarn cache clean
yarn start
But it still see the old/deleted version of my pacakge (that no longer even exists) when I run my project
How can I get it to "refresh" to the new symlink'd build files?
TLDR
Even if I don't use symlinks.. any change I make to a package in node_modules is not reflected when I run the app.
So real question is, how are these node_modules being cached in create-react-app and how can I clear it so that my changes in node_modules are seen, so I can debug them.
After poking around in the source of react-scripts
It seems I need to remove ./node_modules/.cache/default-development to clear it and reload the changes.
I want to install typescript and jest in a create-react-app-based app. I feel that since this is such a common installation choice there must be at least one "everything just works" set of configuration steps to follow.
I initially ran npx create-react-app my-project --template typescript. That was great for a while. I wrote several thousand lines of code with that. And then one day I decided I wanted to add some mocks to a spec file with code like this:
import jest from "jest";
jest.mock('./somemodule');
...but the "jest" instance is undefined. So I followed directions in different articles to install further devDependencies. But these seem to conflict with dependencies inside of create-react-app, suggesting that I need to focus on setting up my project correctly the "Create-react-app Way" according to its expectations.
Rather than burden StackOverflow with the details of my build and package management issues, I figure I'll just ask the simpler question - what is the correct way to set up create-react-app+typescript+jest in a way where it doesn't have a bunch of irritating, random problems?
And then after I've followed this advice, if I still have problems, I might ask a second, separate SO question with specific details.
The command below should create a new React project supporting Typescript and Jest without need of further modification.
npx create-react-app my-app --template typescript
Details about the above command can be found here: https://create-react-app.dev/docs/adding-typescript/
The above command will set up a new project. But if, like me, you have an existing create-react-app project with issues like:
the Jest module is undefined or doesn't seem to have expected functions
your npm run start and npm run build fail due to conflicting dependencies
or you just want to get to a "standard" package.json configuration without all the hassle of copying your source into a new project.
...you can use the process below to fix/upgrade your package.json:
Use the same npx create-react-app my-app --template typescript command above to create a separate working ("Good") project with all the right dependencies. This project will just be used as a reference.
Compare the package.json of the Good project to the non-working ("Bad") project, and make sure the Bad package.json has the same modules and version#s as the Good package.json. You probably don't have to delete any modules in the Bad package.json that aren't in the Good package.json.
rm -rf node-modules in the Bad project.
rm package-lock.json in the Bad project.
npm install in the Bad project.
Self-answering for posterity.
I want to use some third-party packages upon react, which are:
https://ant.design/ - a design system
https://github.com/vazco/uniforms - for generating and validating forms.
I am using create-react-app for as a boilerplate
After installing all packages (with yarn) and running yart start I am getting this error:
How can I add #babel/plugin-proposal-class-properties without running yarn eject to modify .babelrc file?
Or is there any other solution for this problem?
It looks like the only way is to eject. CRA has purposely avoided too much customization. See https://github.com/facebook/create-react-app/issues/167
I started to build a component library that I want to publish on NPM (and reuse in other apps) by creating a React app using create-react-app. Unfortunately the create-react-app default configuration doesn't seem to support building such component libraries (see these issues). So it seems I have to eject.
Do you have some instructions what to configure after ejecting to make this a component library I can reuse in other apps (I guess some Webpack stuff)?
Re-framing my comments into an answer.
Don't eject! CRA hides a lot of stuff under the hood and ejecting throws it up. It's relatively easier to just clone your src into another project with the tooling setup done.
And it's not very difficult to setup one yourself! Here's the things you will need to do:
Basic babel and webpack configuration so your code compiles.
Make sure React and React-DOM are added as external dependencies in your package.json file and added as alias in your webpack.config.js. (A thorough discussion is here.) This is important to ensure you ship the smallest bundles only. Also, React doesn't play well with multiple copies.
Optionally, do the same for any other heavier libraries, e.g. Material-UI, Bootstrap, Lodash etc.
In webpack's configuration, decide how you want your library exports should be? You should be good with UMD.
Add main (and optionally module) entries in your package.json to let npm imports know where the components should be imported from.
Publish it.
Done!
Or, you can simply clone one of these super thin component projects and put in your components there -
https://github.com/wangzuo/react-progress-label
https://github.com/aaronshaf/react-toggle
There are more complete starter-kits as well, but IMO it's important to first know the details yourself before you abstract them away. Once you are familiar with the process, you should try leveraging the kits too as they go much beyond the basics, like test integration, react-storybook support and great npm publishing support.
UPDATES:
The purpose of CRA is to allow quick experimentation and on-boarding to React development, without going through the (somewhat complicated to a beginner) tooling setup. The intended use case of CRA, as denoted by the "App" in the name, is the whole app, not a component. Although developing anything built on language features like ES6 takes some tooling, an app typically takes more setup than a component. E.g. you also need a server component which hosts the generated code. CRA does all this and more for you.
And if you are working on an app, you will eject when you want to take control of the server side of it. It adds value in that case as you will get the basic hosting code auto-generated by CRA during eject.
To address test needs, CRA also has Jest integration, which is a test runner having React specific features like snapshot testing. Again, setting it up manually with your build pipeline is a handful and CRA once again hides all of this complexity from you, so you can simply focus on writing the tests.
This is super simple - you don't actually need webpack if you want to publish a package. Don't install it just for that if you don't want to.
If you use ES6:
You can use a simple script to create a dist folder that babel will create the files after transpiling:
"scripts": {
// other scripts
// .. might want to change "rm -rf" below if you're on a PC
"build:production": "rm -rf es && cross-env NODE_ENV=production node_modules/.bin/babel ./src -d es"
},
What this does is:
Remove the es folder, which is a build folder.
Runs babel for your files (in case they are located in src folder, change it to wherever your files reside) and create the es folder with the transpiled files.
In order to use the script above you need to install the following dependencies:
babel-cli / babel-core / babel-preset-es2015 / cross-env
Make sure you have a .babelrc file so that babel will work:
{
"presets": [
["es2015", { "modules": false }]
]
}
Now all you have to do (after running npm run build:production) is to run:
npm publish
And your library is published in npm. This is also the command you run if you want to update, just don't forget to update the version number in your package.json.
In case you have files you dont want published to npm, just have a file in your root called .npmignore (similar to .gitignore) and list everything you want excluded.
If you don't use ES6:
In this case you don't need to transpile anything, just go straight to the npm publish section above and run it on the root folder you want published.
create-react-app is meant for quick setting up and development of apps, not really for development of libraries. For one thing, create-react-app creates an index.html file when building, which is usually not needed by libraries. Libraries require a different set of configuration (much less).
I faced this problem myself and have written a React component boilerplate for writing and publishing React components: https://github.com/yangshun/react-component-starter, after referencing how popular ES6 libraries were written, such as Redux.
Pros:
Similar to create-react-app, batteries are included
It has got all the important areas covered: development, linting, testing, and distributing
Minimal configuration
Babel for transpilation to ES5 and CommonJS format
ESLint included and configured
Jest tests examples
Webpack configuration that compiles to UMD
React Storybook for quick development of the components
Support for stylesheet distribution alongside your component
Cons:
Highly opinionated in terms of choice of tooling; they follow the choices set by create-react-app.
Have to manually update each package dependencies in future (you'll face this issue if you did eject anyways)
There is minimal configuration included and setup is easy. The various webpack, Babel and ESLint configurations should be quite understandable.
Hope this will be helpful to you. Feel free to give suggestions and comments on how it can be improved.
I am learning React. I wanted to create new project using React/React router/ES6. I read tones articles about setuping project using grunt/webpack etc. I tried to setup using simply npm. I believe it is possible to do this without of tons of configuration and adding many external libraries. But I don't know how :) Can someone give me some articles how to setup project using only npm?
Thanks for all answers
Best easy way to start react project
install react-create app by using following command
//install react create app globally to the system
npm install -g create-react-app
// generate project
create-react-app appName
cd my-app/
npm start