My component depends on date-fns as peer dependency and runs fine in the example page that has it installed. However the test doesn't run with the error Cannot find module 'date-fns' from 'MyComponent.js'.

Any chance we can get SCSS support?

I think there might be an issue somewhere between the CRL/Rollup and the CRA/Webpack implementations of CSS modules but I'm struggling to pin it down.

Full code/examples can be found here.

It appears that CRA only supports import './SomeFile.css'; and CRL only supports import styles from './SomeFile.css';.

Live example here

From the below injected CSS it appears as though CRL should support both methods but in the rendered HTML, the className for method 1 is not being renamed: <div class="margin-top-24-lib1"></div>.

CRA fails on method 2 in a similar fashion by still injecting the CSS but completely removes the className when rendered: <div></div>.

The extracted/injected into header CSS looks like this:

<style type="text/css">.CRL1_margin-top-24-lib1__i-ZHE {
  margin-top: 24px;
}
</style>
<style type="text/css">.CRL2_margin-top-24-lib2__22e3M {
  margin-top: 24px;
}
</style>
<style type="text/css">.margin-top-24-app1 {
  margin-top: 24px;
}
</style>
<style type="text/css">.margin-top-24-app2 {
  margin-top: 24px;
}
</style>

We came across this issue when trying to use react-styleguidist. It takes our CRL src components but then uses CRAs Webpack config to build the documentation. This means in the docs our CRL Method 1 now works but CRL Method 2 does not:

Would you be on board with supporting SASS / SASS modules by default?

Some ideas:

• webpack vs rollup
• flow or typescript support
• prettier integration
  ...

I'd really like to keep the default template as minimal as possible, but people should be able to easily swap out different options if they want. Thoughts / suggestions?

Not sure if it's a postcss or rollup config issue, but it seems that enabling modules for postcss makes our bundle export all css.
Consider this in my index.js

export Badge from './js/components/atom/Badge';
export Text from './js/components/atom/Text';

In the example, if I do this:

import { Text } from 'my-lib;
export default class App extends React.Component {
  render() {
    return (
      <Text>Hello</Text>
    );
  }
}

All css from Text and Badge are imported, if though only Text is being used:

The JS tree shakes ok, this is happening only to css.

Has anyone figured out how to deploy the example folder (with the npm "link") on Netlify?

I'm getting this error when I try to use my published library that I created using create-react-library. Any idea what might cause this?

The final step - running npm install and npm link is failing.

I'll look into this time permitting, but wanted to log it here.

✖ Running npm install and npm link
{ Error: Command failed: /bin/sh -c npm


Usage: npm <command>

where <command> is one of:
    access, adduser, bin, bugs, c, cache, completion, config,
    ddp, dedupe, deprecate, dist-tag, docs, doctor, edit,
    explore, get, help, help-search, i, init, install,
    install-test, it, link, list, ln, login, logout, ls,
    outdated, owner, pack, ping, prefix, prune, publish, rb,
    rebuild, repo, restart, root, run, run-script, s, se,
    search, set, shrinkwrap, star, stars, start, stop, t, team,
    test, tst, un, uninstall, unpublish, unstar, up, update, v,
    version, view, whoami

npm <command> -h     quick help on <command>
npm -l           display full usage info
npm help <term>  search for help on <term>
npm help npm     involved overview

Specify configs in the ini-formatted file:
    /Users/scottsilvi/.npmrc
or on the command line via: npm <command> --key value
Config info can be viewed via: npm help config

[email protected] /Users/scottsilvi/.nvm/versions/node/v8.5.0/lib/node_modules/npm

    at makeError (/Users/scottsilvi/.nvm/versions/node/v8.5.0/lib/node_modules/react-modern-library-cli/node_modules/execa/index.js:169:9)
    at Promise.all.then.arr (/Users/scottsilvi/.nvm/versions/node/v8.5.0/lib/node_modules/react-modern-library-cli/node_modules/execa/index.js:274:16)
    at <anonymous>
    at process._tickDomainCallback (internal/process/next_tick.js:228:7)
  code: 1,
  stdout: '\nUsage: npm <command>\n\nwhere <command> is one of:\n    access, adduser, bin, bugs, c, cache, completion, config,\n    ddp, dedupe, deprecate, dist-tag, docs, doctor, edit,\n explore, get, help, help-search, i, init, install,\n    install-test, it, link, list, ln, login, logout, ls,\n    outdated, owner, pack, ping, prefix, prune, publish, rb,\n    rebuild, repo, restart, root, run, run-script, s, se,\n    search, set, shrinkwrap, star, stars, start, stop, t, team,\n    test, tst, un, uninstall, unpublish, unstar, up, update, v,\n    version, view, whoami\n\nnpm <command> -h     quick help on <command>\nnpm -l           display full usage info\nnpm help <term>  search for help on <term>\nnpm help npm     involved overview\n\nSpecify configs in the ini-formatted file:\n    /Users/scottsilvi/.npmrc\nor on the command line via: npm <command> --key value\nConfig info can be viewed via: npm help config\n\[email protected] /Users/scottsilvi/.nvm/versions/node/v8.5.0/lib/node_modules/npm\n',
  stderr: '',
  failed: true,
  signal: null,
  cmd: '/bin/sh -c npm',
  timedOut: false,
  killed: false }

The create-react-library npm module really eased my entry into the React and npm space. I'm glad you wrote it and I'm glad I found it.

The README file told me just about everything I needed to know to get up and running and start working right away.

Thank you very much for your open source work.

Here's my new React library: https://github.com/emxsys/worldwind-react-globe.
Feel free to add it to your README if you'd like.

One of the nicest things about CRA is that most of the functionality is bundled into a single dependency, react-scripts which makes updating your CRA apps with bugfixes and transitive dependency updates relatively simple.

Currently, create-react-library doesn't perform this type of bundling and instead opts to generate the full boilerplate each time you create a new library. This is already a huge time-saver, but it could possibly be better.

Generating the full boilerplate has the advantage of being simple and leaving more customization power in the hands of the library author. It has the disadvantage that long-term library updates and maintenance will be harder, especially if you're publishing a lot of react libraries. This is something that I've run into myself over the past few months.

The workaround would be to follow suit with CRA and bundle all of the dependencies for create-react-library templates into a single dependency, react-library-scripts, which would allow library authors to update their libraries more easily. This would also necessitate the ability to eject from react-library-scripts in an analogous fashion to how CRA works.

I think there are definitely pros and cons to both, but I wanted to put it out there and see what people think. Not expecting too many responses, but if you feel strongly for one approach or the other, please vote here and respond below.

Thanks!

Support is already there for transpiling to es5 to support older versions of node, but something seems to break once it publishes to npm.

Related to #10

Hi. First, awesome package - helps a lot creating libraries.
Now, I'm having issues with test with jest + css modules. Not sure if it's something with rollup or not, but all elements inside the test comes with empty classes. A simple example:

import React from 'react';
import { shallow, configure } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
import Badge from '../Badge';
configure({ adapter: new Adapter() });

...

it('has class for primary color', () => {
  const wrapper = shallow(<Badge primary />);
  console.log(wrapper.debug());
});

Shows me:

<span className="" />

Tried making a few changes on Jest and rollup but with no success. Any clues?

Projects created have a .eslintrc file in the root, but also one under src that mentions mocha ( https://github.com/transitive-bullshit/create-react-library/blob/3d8af13fafd8cd0f56645e068ade8855ef139649/template/src/.eslintrc ).

As mocha isn't used in the project, I'm guessing this is just cruft.

It might not be "create-react-library" specific question...

but I am trying to use png or jpg images in my component but I just cant find a way to do it
😭

Appreciate your help.

hey @transitive-bullshit I just notice that some dependencies on pakage.json have duplicate declarations

    "react": "^16.2.0",
    "react-dom": "^16.2.0",
    "react-scripts-ts": "^2.16.0"`,
    "react": "^16.4.1",
    "react-dom": "^16.4.1",
    `"react-scripts-ts": "2.15.1"`,

Nice work with this library.
Had the pleasure of bootstrapping a login-modal with this, and it definitely made my life easier!

I'd be cool to have this added to the crl readme list 😁

• react-login-modal-sm - A customizable React Social Media login modal

Hi,

I'm using the default configuration and one of my modules trigger this error and I can't figure it out.

This module is causing the issue:

import dispatchStdEvent from "vr-ui/web_modules/utils/dispatch-std-event"

And here is the core of the module:

export default function dispatchStdEvent(stdEventName, bubbles, cancelable, element) {
  var newStdEvent
  if (bubbles === undefined || bubbles === null) {
    bubbles = true
  }
  if (cancelable === undefined || cancelable === null) {
    cancelable = true
  }
  try {
    newStdEvent = new Event(stdEventName, {"bubbles": bubbles, "cancelable": cancelable})
  }
  catch (e) {
    newStdEvent = document.createEvent("Event");
    newStdEvent.initEvent(stdEventName, bubbles, cancelable);
  }
  (element || window).dispatchEvent(newStdEvent)
}

This error occurs sometimes but the link given in the error doesn't give enough details since I'm using your default configuration I'm just lost, seems like it doesn't like the package for any reason (I can't find which one).

I got this issue few times with others modules and it was mainly because the export wasn't set to "default" or some strange things my mates did (ES8 requiring an extra module). But here, this one is so simple I have no ideas.

If I copy the whole content of my file "dispatchStdEvent" inside my package, it builds.

The problem comes only from import/export then?

Thanks

I think it is better to run the script without cd-ing
example:
"predeploy": "yarn --cwd example && yarn --cwd example run build",
or

"predeploy": "npm --prefix example install && npm --prefix example run build",

I'm getting the above error when trying to yarn publish

I followed exactly what it has mentioned in the Readme file but it didn't work. Please refer the screenshot below.

Trying to npm run deploy and getting:

error: cannot spawn sh: No such file or directory
fatal: unable to fork

On windows 7 sp1 64bit.

Any idea why i'm getting this?

How to release module with flow support?

Just created the app, then followed CLI instruction.

In one shell entered the new project the run yarn start (ok)

In the other shell entered /example and run yarn start but I get this:

$ yarn start
yarn run v1.6.0
$ react-scripts start
/bin/sh: react-scripts: command not found
error Command failed with exit code 127.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

I tried creating a library with this tool and I got this error when I ran the project that used that library. The fix seems to be this storybookjs/storybook#1320

i.e. remove 'external-helpers' from .babelrc and add it in rollup.config.js

nice lib so far! just trying it out and this is the output:

create-react-library

? Package Name react-wired
? Package Description react wired
? Author's GitHub Handle sw-yx
? GitHub Repo Path https://github.com/sw-yx/react-wired.git
? License MIT
? Package Manager npm
✔ Copying template to /Users/swyx/OpenSource/react-wired
✔ Running npm install and npm link
✔ Initializing git repo


Your module has been created at undefined.

To get started, in one tab, run:
$ cd react-wired && npm start

And in another tab, run the create-react-app devserver:
$ cd react-wired/example && npm start



Because you're using npm, you'll need to publish a dummy version of react-wired first before you can "npm link" your package into the example app.

this is probably an easy fix: "Your module has been created at undefined."

I have seen "anytime you make a change to your library in src/ or to the example app's example/src, create-react-app will live-reload" this words in readme. But It can not live-reload, when I run npm start in src/.

This library is fking awesome. Thanks for maintaining it!

I made this small thingy with it: https://github.com/jbccollins/react-gradient-scroll-indicator

If you want to add this to the list of projects created using this library in the readme feel free. No worries if not. Cheers!

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!

Hello,

I've installed the package and then executed create-react-library but the command just exits without any message. No prompts, no errors. I've tried that on Ubuntu 16.04 with node version 6.9.5. Any help would be greatly appreciated.

I'm on a MacOS machine High Sierra.
I've installed a new nvm env with node 9.11.2, then just installed globally create-react-library and yarn.

However I'm not able to run the executable:

$ create-react-library
internal/modules/cjs/loader.js:550
    throw err;
    ^

Error: Cannot find module 'isexe'
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:548:15)
    at Function.Module._load (internal/modules/cjs/loader.js:475:25)
    at Module.require (internal/modules/cjs/loader.js:598:17)
    at require (internal/modules/cjs/helpers.js:11:18)
    at Object.<anonymous> (/Users/keul/.nvm/versions/node/v9.11.2/lib/node_modules/create-react-library/node_modules/which/which.js:10:13)
    at Module._compile (internal/modules/cjs/loader.js:654:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:665:10)
    at Module.load (internal/modules/cjs/loader.js:566:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:506:12)
    at Function.Module._load (internal/modules/cjs/loader.js:498:3)

I have this error in Atom while editing index.js: Cannot find module 'eslint-config-standard-react'.

Hello,

First of all, thank you for your work, your library is perfectly what I needed !
I have only one problem when I try to run npm run deploy to see the page on github pages, I have a weird error saying :

git-upload-pack '.': git-upload-pack: command not found
fatal: Could not read from remote repository.

Please make sure you have the correct access rights
and the repository exists.

Do you know why I have this error ? I could do all the other stuff (npm publish, work in local, etc...)

I am on Windows if it can help

Hey,

Thanks for creting this! Awesome starting point.

I encounter inconsistencies in what boilerplate is generated and where you do into depth with examples https://github.com/transitive-bullshit/react-modern-library-boilerplate.

Among other things, rollups are never brought up in the mentioned example. Any timeline for updating them?

Cheers!

npm ERR! path /Users/steven/Development/react-components/example/node_modules/.staging/react-components-b0ed9029/node_modules/@babel/code-frame

This happens when I try to run npm i in the example project.

Any idea what might be causing this?

As the title says. Just tried with a clean copy to make sure I hadn't messed with anything. I guess the expected behavior was that the tests would run continuously? If not I'd appreciate hints on how to achieve that since I don't quite get what the CI=1 means in the test command.

Is there any way to configure prettier to be part of the development or build process of create-react-library ?

When maintaining a library it's often get frustrating when your code style get mixed patterns, especially when you need to merge PR's.
prettier and prettier-eslint can greatly help with this issue.
You can configure it to --fix on save or before deploy etc.. thus ensuring that your code style stays consistent no matter what.

Working on Intelij, rollup watch catches only the first change in library src code...
solved via rollup/rollup-watch#4
but it doesn't seem like a robust solution.

I can probably work on making it happen

I'm trying to import a css file from the lib into the example page but couldn't figure it out and I was also faced with a weird cli behavior.

Whenever I use a path that was invalid, the terminal got stuck into Compiling... and opening the Activity Monitor the node process was over 100% cpu somehow. This only happens when trying to import via import 'my-component/styles.css'. Importing the component itself via import MyComponent from 'my-component' works fine and importing other css files from the same dir as the example also work fine. Oh and if I try to import some other non existent file from the example dir it doesn't cause the cli to get stuck.

I do not understand the following:

Because you're using npm, you'll need to publish a dummy version of ${lib.name} first before you can "npm link" your package into the example app.

I created a new directory (test-it) with create-react-library using npm as the Package Manager.

In the test-it directory I ran

npm start

Then in the example directory I ran

npm link test-it
npm install
npm start

I did not have to publish anything.

Am I missing something?

Note your instructions in the terminal at the end of create-react-library do not mention the need to
run npm install in the example directory. Until I did this I had problems. Peer dependencies may be needed to be installed in the example directory also to get things to work.

'CI' is not recognized as an internal or external command,

Your project is really interesting and quite complete. The only reason that stops me from using it within our team is the use of Rollup instead of Webpack. I am not arguing which one is better I am just saying that a Webpack flavor would be an interesting add-on.

Thank you.

I have searched online for many different configs for making this compatible with styled-components and eventually, my terminal starts crashing. I am not a pro so it could be something really simple so this is more of seeking help that an issue.

this is very awesome!

only weird thing is it took much longer for me to do yarn install and yarn link than npm install and npm link which is very weird.

i am making all new libraries with this thing. no complaints yet!

• run the CLI to create a sandbox module
• different permutations of options
• test that the resulting sandbox module builds and passes tests

What is the default port when runint yarn start?

Thank you for this package :)
I was able to create my first react reusable component with this package.
https://github.com/ahmednooor/touchflip-react

Also some feedback.
Everything worked great the first time.
But the second time after updating my code, npm run deploy didn't work.
Ultimately I reinstalled the gh-pages globally which resolved the issue.
Hope this helps.

Once again Thank You :)

If I'm creating a scoped package (e.g. @my-awesome-org/dope-module) the folder structure created is:

my-awesome-org/
  dope-module

Instead, this should be:

dope-module/

FWIW the name field in package.json works for this.

This is what I'm seeing:

$ create-react-library
/usr/lib/node_modules/create-react-library/index.js:10
module.exports = async () => {
                       ^
SyntaxError: Unexpected token (
    at Object.exports.runInThisContext (vm.js:76:16)
    at Module._compile (module.js:542:28)
    at Object.Module._extensions..js (module.js:579:10)
    at Module.load (module.js:487:32)
    at tryModuleLoad (module.js:446:12)
    at Function.Module._load (module.js:438:3)
    at Module.runMain (module.js:604:10)
    at run (bootstrap_node.js:394:7)
    at startup (bootstrap_node.js:149:9)
    at bootstrap_node.js:509:3