Bootstrapped CRA 3.0 app and then ejected.
Inspecting my package.json.
Found multiple packages usages of which are not really clear to me.
"semver": "6.0.0"
Why do I need this? No usages found in config/* nor scripts/*. It seems like an artifact of react-scripts validation-like logic for related packages, so it looks like a piece of bloat in my application dependencies.
"react-app-polyfill": "^1.0.0"
Polyfills for IEs and etc.? OK, but why a separate package? It's frightening to me to use some unknown package on top of core-js or babel-polyfill. And again, no usages found in an initial code base.
P.S. I'm not asking what these packages are, I'm asking why do I see them being unused in ejected scripts
Update: react-app-polyfill/jsdom is used in Jest setup files
create-react-app uses a package named react-scripts which hides all the different packages it uses underneath.
When you eject an application, the dependencies used by react-scripts are copied over to your own package.json. But for some scripts like the eject, various sections are removed using babel annotation like #remove-on-eject-begin. The dependencies used in these sections persist even after you eject.
This is how you find packages like semver that are not used anywhere in your application code. In an unejected create react app, that package would be used for verifying the semantic versions before ejecting.
These are safe to remove now. But they would not be factored into the static bundle you are creating anyhow.
Related
Let's say I have the following stricture for a Javascript monorepo
-- module a
package.json
-- module b
package.json
package.json
Module A and Module B both depend on lodash.
With pnpm, is there any way to ensure that they both use the same version of lodash? Like perhaps installing lodash in the root directory and saying "use whatever version is in the root of the workspace"?
P.S. I know that pnpm allows or workspaces, but to my understanding (which can be wrong), that's only used if the dependencies are already a module in the monorepo — not for 3rd-party dependencies.
You can use the overrides field in your package.json to achieve this.
https://pnpm.io/package_json#pnpmoverrides
{
"pnpm": {
"overrides": {
"lodash": "4.17.20"
}
}
}
A similar feature exists in Yarn, called resolutions. Apparently there are some differences, though I'm not familiar with the specifics. The feature was added here.
Update - alternative approach
You can also try syncpack if the overrides solution doesn't sit well with you. At my organization we're slowly moving towards syncpack for issues where the dependencies are only requested by our monorepo packages; the rationale for this is that too many overrides were accumulating over time.
But for ensuring the versions of dependencies of dependencies, overrides is still what you need.
e.g. if you install react-dom and it depends on scheduler and you need a specific version of scheduler for some reason, then the overrides approach is your only option - syncpack can't help there.
I started to use React Native recently and, following the oficial docs, I initialized a project using npx react-native init ProjectName.
I'm not sure if the tools versions matters (probably yes), but i'm using npm version 6.13.7, react-native-cli version 2.0.1 and react-native 0.62.2. With that config, the file architecture i that get is the following:
I seached about it, but i not found an answer. So, can someone please explain to me what is the purpose of each file in this file architecture and which of these files can i remove?
Thank you in advance :D
Package.json
This file holds all of the dependencies of modules that your app is using and needed to install for running your app.
yarn.lock files yarn and package-lock.json
These two files hold the version of your dependencies yarn.lock package-lock.json is automatically generated for any operations where npm or yarn modifies either the node_modules tree or package.json. It describes the exact tree that was generated, such that subsequent installs are able to generate identical trees, regardless of intermediate dependency updates.
app.json
This file holds your application name etc.
babel.config.js
This file holds configs related to babel, Babels is a transpiler that transpile ES6 to ES5.
index.js
This is the entry point of your application form where your react-native code start executing.
EsLint and Prettier
These file related to maintaining the code indentation, Unused imports, extra, spacing, these files holds configs related to these things(EsLint and prettier are used to avoid above-mentioned things).
.watchMan
watchman watches the code changes when the packager is running, so this file have configs about this.
.Flow
Flow is been used for type checking so it holds the configs related to this.
node_modules
This folder holds all of the modules that your app is been using also lited down in your package.json.
And then there is Android(which holds native android code), IOS(which holds native ios code), and other JS files which holds code react-native js code.
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
As a newbie I am trying to understand what the logic is under the hoods for react packages in npmjs.com repository.
I find it a little bit strange since some modules that I install works flawlessly with my application (such as react-motion), where some reject to work by giving Uncaught SyntaxError: Unexpected token import error (such as react-sortable-pane).
What I understood up to now is it has something to do with ES5. The modules that are implemented with ES6 or ES7 must be converted to ES5.
My question is, how can I understand if a package is not ES5 compatible and what can I do to convert it to ES5 during or after I used yarn add command to install the package to my node_modulesdirectory?
TL:DR Transpile your code or use:
import { SortablePane, Pane } from 'react-sortable-pane/lib/react-sortable-pane.es5';
First things first.
Two main folders Src and Lib
A common convention for javascript projects is to put all of your development code into a folder called src. This folder may contain code such as ES5 or ES6 depending on what the developer wants to work with.
The other main folder is usually called lib which contains all code from src that is transpiled (with babel for example from ES6 to ES5), converted and usually bundled (webpack minify for example) so that it can work in the browsers that that npm package supports (varies from package to package obviously). This folder only contains code that is relevant to the user using the package, i.e. all tests are not converted and bundled because their is no reason to.
Entry Point
The other important part for npm packages is the entry point for the npm package. By default NodeJS will look for an index.js file in the imported package (I think). This can be overwritten by supplying the main key in package.json.
Example in react-motion's package.json:
"main": "lib/react-motion.js"
We can see that this points to lib. But where is the lib folder on their Github??? It's not their because usually you don't want to check in a lib folder to source control because it's just transpiled for the npm package.
We can confirm this by installing react-motion and looking in node_modules/react-motion. The lib folder here exists with transpiled code that is ready to be used in any browser without babel.
But why don't all npm packages do this for me!?!??!
Most do and they should do really. I do in my packages.
The react-sortable-plane npm package is using this instead "jsnext:main": "./lib/react-sortable-pane.js" which basically means it uses ES5 syntax everywhere but with import/export and I haven't seen before because it isn't widely used.
See https://github.com/rollup/rollup/wiki/pkg.module#wait-it-just-means-import-and-export--not-other-future-javascript-features
As to why they just use import/export with ES5 features I presume it's because import/export has become standard now but I am not sure.
You will still have to transpile this package if you want older browser support or just import the .es5.js file, e.g:
import { SortablePane, Pane } from 'react-sortable-pane/lib/react-sortable-pane.es5';
Hope this helps. I know it's confusing with so many damn environments like UMD, Common, Node etc...
The solution is to account for any version of Javascript and use a transpiler to make sure that various JS versions which might be in your code and imported modules will be covered by your transpiler's configuration. Going through your modules and trying to figure out which version of Javascript they use isn't a practical exercise. Most projects have a bunch of dependencies, and all those packages have their own dependencies. So you'll end up going down a rabbit hole.
Babel is probably the most well known transpiler. With the right configuration you can have ES5, 6 or 7 code and it will transpile it all into the same JS type so it can run in all standard browser versions.
Basically the answer isn't to try and deduce what ES type your modules are, it's to create a build process that can handle the different types.
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.