FAQ

[transitive-bullshit]

How can I use SASS / Less / etc styles in my library?

This is pretty straightforward -- see #56.

Why do you use rollup over webpack?

This is definitely an area of contention, but at the end of the day rollup is much simpler and focused on bundling libraries well whereas webpack tries to do everything and lacks some of the more advanced features of Rollup. For a deeper explanation, I recommend reading Rich Harris’ article Webpack and Rollup: the same but different. In short, a large portion of the community now favors using Rollup for libraries and Webpack for apps.

How can I export multiple components from my library?

Here is a branch which demonstrates how to use multiple named exports. The module in this branch exports two components, Foo and Bar, and shows how to use them from the example app.

What's the preferred way to initialize a React library within a monorepo?

You can use the create-react-library CLI normally within a monorepo to create a package that contains your React component(s). It's up to you whether you create one package that exports N components or N packages that each export one component. create-react-library plays well with Lerna and friends. ✌️

How can I use TypeScript in my library?

Just select the TypeScript template during library initialization via the CLI. Much thanks to @kaltsimon for his work here!

How can I use Flow in my library?

create-react-library doesn't currently have a built-in Flow template. PRs welcome!

---

Please add any other questions you'd like to see included below. Thanks!

[sag1v]

How do i use docz with my library

[hayk94]

Can I rename already created lib somehow, or I need to create a new project?

[transitive-bullshit]

Hey @hayk94, the easiest way to do this is to use sed or an IDE find & replace. Otherwise, just create a new library and copy over your source files.

[jsnavarroc]

Hi, first I want to know how I can help.

Second, I want to know if using this is MIT, or what kind of license do you have?

Third, when we pass the project to npm, do you just take the build or do you take the whole project?

[gcloeval]

Is it possible to debug the library (i.e. vscode attach to chrome) when testing the example app? I can debug the example app until its using the components from library, then it goes to bundled files. Would be great if there was a way to put a breakpoint and step through library implementation.

[transitive-bullshit]

I want to know how I can help.

Asking these types of questions is already helping 😄 Additionally, feel free to open new issues for bugs or improvements that you may come across.

I want to know if using this is MIT, or what kind of license do you have?

The CLI is MIT licensed and an MIT license is the default for all libraries created. You can change the license for any created library via the CLI.

When we pass the project to npm, do you just take the build or do you take the whole project?

The library template uses package.json "files": "dist" which means that only the package.json, readme.md, and bundled dist folder will be distributed by npm. This means that your original source code and example app code are not included in the distribution by default.

Is it possible to debug the library (i.e. vscode attach to chrome) when testing the example app? I can debug the example app until its using the components from library, then it goes to bundled files. Would be great if there was a way to put a breakpoint and step through library implementation.

This definitely should be possible since the bundles we're creating include sourcemaps. Which version of CRL are you using? Can you double-check to make sure that your rollup config has sourcemaps enabled like here?

[michelepatrassi]

@transitive-bullshit the sass works adding node-sass and simply renaming files on the basic setup. The bad news is that doing the same with typescript does not work...

Any idea? This is what I get when after start (renamed styles.css to styles.scss and same for styles.css.d.ts)

> [email protected] start /Users/michele/dev/tmi/sass-ts-test
> rollup -c -w

[!] Error: Unexpected token
src/styles.scss (3:0)
1: /* add css styles here (optional) */
2:
3: .test {
   ^
4:   display: inline-block;
5:   margin: 2em auto;

[MikelArnaiz]

@Iar0 @transitive-bullshit same problem here.

Sorry for the duplication, but as I said few days ago the suggestion of just renaming styles.css to styles.scss is based on the docs of rollup-plugin-postcss v1.0+

However this project has as dependency [email protected] which has as a dependency [email protected]

[samuelcastro]

How to import ts-import-plugin? https://github.com/transitive-bullshit/create-react-library/issues/101

[rmolinamir]

@transitive-bullshit

Thank you for this package. Is it safe to update react to newer versions on both /src and /example? This is to allow hooks.

[djnorrisdev]

Thanks for this package, it is awesome. Are there any known docker configs to dockerize this dev environment? I'm wondering if that could be added to the FAQ. I am failing with my dockerfile configs right now, but if I find a solution, I can post it.

[middiu]

Is it possible to debug the library (i.e. vscode attach to chrome) when testing the example app? I can debug the example app until its using the components from library, then it goes to bundled files. Would be great if there was a way to put a breakpoint and step through library implementation.

Would be really really good to have a suggestion about how implementing this.

[ogheneovo12]

how do i use environment variables or the --define flag with this library,

[ghost]

I've created and published a NPM package successfully using create-react-library, essentially a widget where some of the partners inside the organisation that I work for can "import" the widget in their websites.

TLDR

I'm looking for a way to generate an UMD bundle so I can use the NPM package over a CDN using require-js. Something like this:

<script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.6/require.min.js"></script>
<script type="text/javascript">
    require.config({
      paths: {
        "react": "https://unpkg.com/react@17/umd/react.development",
        "react-dom": "https://unpkg.com/react-dom@17/umd/react-dom.development",
        "MY_CUSTOM_PACKAGE": "https://unpkg.com/[email protected]/umd/index"
      },
      waitSeconds: 40
    })
</script>

Thanks

[HarishSha]

Thanks for this package, it is awesome. Are there any known docker configs to dockerize this dev environment? I'm wondering if that could be added to the FAQ. I am failing with my dockerfile configs right now, but if I find a solution, I can post it.

Please post the solution. I'm also facing issues