Ability to add a dependency to the config external list

[SCasarotto]

Current Behavior

There isn't anything in the documentation stating there is a way to exclude a package. styled components suggests excluding it from a library: https://www.styled-components.com/docs/faqs#with-rollupjs . When I used Create React Library this was done through the use of rollup-plugin-peer-deps-external .

Desired Behavior

Ability to exclude a dep or enable rollup-plugin-peer-deps-external.

Suggested Solution

Who does this impact? Who is this for?

This is impacting me but it seems others have had similar issues:
#214
#132
#179

Describe alternatives you've considered

Additional context

It is 100% possible I am ignorant to a way to do this or how it works well enough to customize. Any help here would be really apprecaited.

[SCasarotto]

Please ignore this. I figure out the root cause of the problem I was running into.

[DevanB]

@SCasarotto I, too, am having an issue where multiple versions of styled-components are in use when I import the library that TSDX is creating.

What exactly was your fix? I'm struggling to find a way around my issue.

[SCasarotto]

I sort of didn't really find a fix for this. You shouldn't include styled-components in your library and just mark it as a peer dependency but not as a dev-dependency. This allowed me to release a version of my library. The only drawback I have right now is that I am not able to write any tests as it will yell about not having styled components.

I do still this this lib needs a way to have external deps (Maybe it does and I just don't know how to). If I know module deployment and such better I would try to achieve this but at this time don't have the cycles to devote to this.

[DevanB]

@robinwkurtz I'm unsure exactly how CommonJS works, but if you are using React and using this library on the frontend (importing like import something from 'package-name';) then you are using ESModules. The import statements will still be included, because the user of the package has to run that code and import their local dependencies (the ones you specified in peerDependencies)

[robinwkurtz]

@robinwkurtz I'm unsure exactly how CommonJS works, but if you are using React and using this library on the frontend (importing like import something from 'package-name';) then you are using ESModules. The import statements will still be included, because the user of the package has to run that code and import their local dependencies (the ones you specified in peerDependencies)

Thank you for the explanation... Late in the evening I discovered I was tricked by yarn link and was looking for a problem in the wrong place!

[agilgur5]

So TSDX automatically treats all absolute imports as externals already (you don't need to configure anything, no need for peer-deps-external), not sure exactly what the issue was here, seemed to be about linking.

#132 and #179 are both about UMD builds specifically. #132 is actually about naming, not about specifying externals, and #179 is the opposite, bundling all externals for UMD builds.

---

You shouldn't include styled-components in your library and just mark it as a peer dependency but not as a dev-dependency. This allowed me to release a version of my library. The only drawback I have right now is that I am not able to write any tests as it will yell about not having styled components.

You can have a dependency as both devDependencies and peerDependencies, that's how you would test with it.

---

./dist/reactor.cjs.development.js:

var React = _interopDefault(require('react'));
var styled = _interopDefault(require('styled-components'));

That is correct, that shows it's working -- react and styled-components aren't bundled, they are still imported. OP of this issue and OP of that comment found out their issue was with linking and not externals.

The import statements will still be included, because the user of the package has to run that code and import their local dependencies (the ones you specified in peerDependencies)

^This is correct 👍
It doesn't matter if you use CJS or ESM, that just changes the syntax