Tsdx: 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:
https://github.com/jaredpalmer/tsdx/issues/214
https://github.com/jaredpalmer/tsdx/issues/132
https://github.com/jaredpalmer/tsdx/issues/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]

I've solved this with a plugin that automatically adds peerDeps to the external array:

tsdx.config.js

const peerDepsExternal = require("rollup-plugin-peer-deps-external");

module.exports = {
  rollup(config) {
    config.plugins.push(
      peerDepsExternal()
    );
    return config;
  }
}

[SCasarotto]

Oh I didn't know you could augment things like that. I will be sure to test this! Thanks @DevanB .

[SCasarotto]

@DevanB Could you share your package.json? When I try to add styled-components to devDependencies I get an error for two styled-components being used.

EDIT: Disregard this. I realized that my problem was actually coming from yarn linking the file locally during development. Using this plugin and also not linking when locally testing resolved the issue. The issue the helped me realize it was : https://github.com/styled-components/styled-components/issues/2008 . This issue isn't exactly addressing my case but in the comments people talk about their tests breaking due to linking.

[robinwkurtz]

I'm unable to exclude my peerDeps from my bundle..

./package.json:

  "peerDependencies": {
    "react": ">=16",
    "react-dom": ">=16",
    "styled-components": ">=4"
  },

./tsdx.config.js:

const peerDepsExternal = require('rollup-plugin-peer-deps-external');

module.exports = {
    rollup(config) {
        config.plugins.push(peerDepsExternal());
        return config;
    },
};

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

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

--

Also, below does not work whereas in a previous rollup project (without tsdx) I had the below working.

const pkg = require('./package.json');

module.exports = {
    rollup(config) {
        config.external = [...Object.keys(pkg.peerDependencies)];
        return config;
    },
};

Any ideas?

[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