Repository navigation
Discussion: Best way to create npm packages with create-react-app #907
Description
Hello!
Love this tool, however, I'm using it to create a component library that I want to publish on NPM and am running into issues accessing the components after I've installed my package.
Process:
npm run build
npm publish
Locally, if I get them from the main file, it works fine (as expected)
Main.js
export { default as Button } from './modules/Button';
export { default as Navicon } from './modules/Navicon';
...
App.js
import {
Button,
Navicon
} from '../lib/Main';
But, after I install the package and import the components as shown above from package-name they are always undefined.
Thoughts into the best practice for this?
Activity
gaearon commentedon Oct 15, 2016
Hi, thanks for the issue. This tool is current suitable only for apps; you'd have to eject and customize configuration to make it work for a library.
Creating something similar for libraries has been discussed before, and I'm still interested to see a proof of concept of this. However so far nobody volunteered to work on it. See #423 (comment).
Cheers!
lokhmakov commentedon Apr 10, 2017
https://medium.com/@lokhmakov/best-way-to-create-npm-packages-with-create-react-app-b24dd449c354
DimiMikadze commentedon Aug 24, 2017
HI, i've customised
create-react-appto create React NPM library. Also i'm constantly updating repository with the updates of create-react-app, so we have all new features and bug fixes of it.https://github.com/DimiMikadze/create-react-library
andrespch commentedon Oct 30, 2017
do you know of anything like this for react-native @DimitriMikadze ?
DimiMikadze commentedon Oct 31, 2017
@andrespch unfortunately no, i've never tried to create react native library, i don't know what specifics it needs
transitive-bullshit commentedon Mar 9, 2018
Anyone ending up here should check out the create-react-library npm module.
It provides a CLI for easily publishing modern React libraries with Rollup and example usage via create-react-app.
kaiomagalhaes commentedon Mar 10, 2018
@transitive-bullshit what is the advantage of your library on the 'https://github.com/DimitriMikadze/create-react-library' ?
transitive-bullshit commentedon Mar 10, 2018
The main advantage is that It exposes an actual CLI command
create-react-libraryto bootstrap your library which is much easier to use and similar in spirit tocreate-react-app.It is also significantly simpler, with the resulting library template weighing in at only 14 files. This is largely because we use Rollup, which the community has generally settled on as a better choice for bundling libraries, whereas Dimitri's boilerplate uses webpack.
I have tried really hard to keep the boilerplate as minimal as possible. Functionally, I can't think of anything that Dmitri's version does that
create-react-librarydoesn't support; it just does so via an easy-to-use CLI with a much smaller generated footprint.DimiMikadze commentedon Mar 12, 2018
Hi, just to clear some things.
My library is ejected
create-react-appand it has very minimal changes added to support building React libraries. I think main advantage of it, is that it is build by Facebook team and i'm constantly updating it with updates ofCRA, hence it has always new features and bug fixes, that Facebook team is adding to it's library, so you don't need to worry about how stable new features are.@transitive-bullshit i don't think, React community has ever settled down to use Rollup, in fact Rollup never was near as popular as Webpack, even Facebook is using Webpack for it's React development and here's the Google trends comparison:
noahzweben commentedon Mar 13, 2018
@DimitriMikadze where would you configure allowing css modules? Create-react-app allows these by naming as .module.css, is this incorporated in the library?
Edit: To do this create-react-app suggests using react-scripts-cssmodules as a dependency instead of react-scripts
DimiMikadze commentedon Mar 14, 2018
@noahzweben
create-react-libraryis already generated and ejectedcreate-react-app, hence it doesn't supports command line commands, but since it's already ejected you have access to all configuration files, so you can add/edit whatever features you want, including css modules.jooj123 commentedon Apr 6, 2018
https://github.com/insin/nwb is a create alternative to solving the problem of using a toolkit for npm packages
xxxsf commentedon Jul 31, 2018
Hi, I suggest u to try: 💯 https://github.com/allan2coder/react-npm-publish
this is based on
create-react-app, and I have customised it.yedukondalurd commentedon Oct 7, 2018
Named exports not working with this library
https://github.com/DimiMikadze/create-react-library
markolofsen commentedon Dec 12, 2018
It's really easy if are you using special tool for publications.
It's works in your browser, without any special dependencies.
Try this library for that https://github.com/markolofsen/how_to_upload_package_to_npm