How to use other libraries in your library (besides React and React-dom)

[reinrl]

After a long day of chasing my tail, I have a suggestion for adding some additional information to the documentation/examples/somewhere (in case it helps someone else too).

If you are creating your own library using this as your boilerplate (such as the "under construction" example), and you want to make use of another library within yours, consider the following:

• Add the library as a peer dependency in package.json (effectively requiring the calling project to provide this dependency)
• Add the library as a dev dependency in package.json (effectively allowing this library to successfully build without complaining about not having this dependency)
• This is the important one that I had to track down! Add the library to the externals config in your webpack.config file(s). By default, only react and react-dom are there, meaning that those are the only two libraries that you can use within your new shared library.

As a helpful aside, also make sure to add any peer dependency expectations to your readme.md - that way, people making use of your new shared library will understand what dependencies they need to install/already have available.

[DimiMikadze]

@reinrl thanks for this issue, i'll add those instructions in readme 👍

[DimiMikadze]

https://github.com/DimiMikadze/create-react-library/blob/master/README.md#troubleshooting

[obiwankenoobi]

I am not sure I follow the explanation. I also have this issue right now when I am trying to download the library I have built from npm and it fails to compile because Error: Cannot find module '' from... I tried to add the required dependencies in my library's devDependencies and also to add the it to webpack config i.e:

    externals: (isEnvDemo || isEnvProduction)
      ? {
        react: 'react',
        'react-dom': 'react-dom',
        'react-transition-group':'react-transition-group',
        'react-bootstrap':'react-bootstrap'
      }
      : {},

I still can't build successfully and I dont want to add it as peed dependencies because its just another thing for the use to think about. Am I missing something?

UPDATE

this solution works (:
#47 (comment)

[reinrl]

So you did get it to work? With my change, or was there more to it?

[obiwankenoobi]

Hmm, your change not worked for me. I added the libraries as regular dependencies suggested in the comment above and it worked. I didn't removed the changes I made in webpack those so it might be a combination of those solutions. So at the end I have:

1. added the libs to the webpack as suggested
2. added the libs as devDependencies
3. added the libs as regular dependencies

and it works (:

[reinrl]

I am not at a computer right now, so I will have to doublecheck my working local stuff later, but basically here is the difference:

• add as a peerDependency and add to webpack externals if the calling application will provide the actual dependency (e.g., React, react-dom, etc.)
• add as a regular dependency if you want it to be bundled with your library (and don't want the consuming application to have to provide it - this might be where I actually had one other change, I can check my computer on Monday...but, if I remember right, it was possibly more configuration instructions near the libraryTarget portion of the webpack.config)
• add as a devDependency if it will only be needed locally during dev (i.e., build tools, linter, etc.)

[obiwankenoobi]

So after more struggle, I realised it should be a combination of adding the libraries you want to use into externals AND they also need to be in your regular dependencies. It was really fun to discover it as it breaks my library only when its already on npm and I cant read the errors so basically I had to guess what is going on. Very fun. lol

[reinrl]

Admittedly, my local examples are a bit different from what originally came from here, so this might be right or it might be wrong (some of the changes I made were for other reasons) - but you didn't have to have a given dependent library listed in your regular npm dependencies unless you want your library to package/bundle it for the consumer...and you shouldn't have to have a given dependent library listed in your webpack externals unless you intend it to be a peer dependency provided by your calling app (like react/react-dom).

In your webpack.config.js, find the keywork libraryTarget (the full line should look something like libraryTarget: (isEnvDemo || isEnvProduction) ? 'umd' : undefined,), and make it look like this:

library: 'my_library', // where this matches your "name" in package.json
umdNamedDefine: true,
libraryTarget: (isEnvDemo || isEnvProduction) ? 'umd' : undefined,  // CRL: Add output.libraryTarget,

The library and umdNamedDefine bits are new. Once you have added those in, try removing anything from your externals that is not truly a peer dependency (but leave them in your dependencies). Assuming that that corrects the issue, it should be able to be added to the patch above.