Create-react-app: Discussion: Best way to create npm packages with create-react-app

[caseybaggz]

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?

[gaearon]

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 https://github.com/facebookincubator/create-react-app/issues/423#issuecomment-250752431.

Cheers!

[lokhmakov]

https://medium.com/@lokhmakov/best-way-to-create-npm-packages-with-create-react-app-b24dd449c354

[DimiMikadze]

HI, i've customised create-react-app to 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]

do you know of anything like this for react-native @DimitriMikadze ?

[DimiMikadze]

@andrespch unfortunately no, i've never tried to create react native library, i don't know what specifics it needs

[transitive-bullshit]

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]

@transitive-bullshit what is the advantage of your library on the 'https://github.com/DimitriMikadze/create-react-library' ?

[transitive-bullshit]

The main advantage is that It exposes an actual CLI command create-react-library to bootstrap your library which is much easier to use and similar in spirit to create-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-library doesn't support; it just does so via an easy-to-use CLI with a much smaller generated footprint.

[DimiMikadze]

Hi, just to clear some things.

My library is ejected create-react-app and 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 of CRA, 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:

• https://trends.google.com/trends/explore?q=react%20webpack,react%20rollup

[noahzweben]

@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]

@noahzweben create-react-library is already generated and ejected create-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]

https://github.com/insin/nwb is a create alternative to solving the problem of using a toolkit for npm packages

[allan2coder]

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]

Named exports not working with this library

https://github.com/DimiMikadze/create-react-library

[markolofsen]

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