1

I am currently creating a React component library. This component needed a lightweight tooltip, and as I could not find anything as light as I wanted, I made another component library that I can use for the main or any other projects I want. This works very well.

However, what I'd like to do is offer users of my library a way to disable tooltips and not be penalized for doing so. From my tests it seem that, even if the tooltip is not used, it is still added to the bundle. Webpack apparently can't shake it out. It will also need to be installed as a dependency.

To give an idea of how it's used:

return (
  <div>
    {showTooltip ? (
      <Tooltip>
        //...children
      </Tooltip>
    ) : (
      //children
    )}
  </div>
);

showTooltip is just a destructured prop. I get why this doesn't work, as it's impossible for the bundler to know that showTooltip is never going to change value, but how do I do what I want here? How do I allow users to not install the tooltip lib and not be weighed down by a feature they've disabled?

Improve this question
7
  • As per your use case it seems like you would have to manage external configuration file which will consists of flags like showTooltip and based on that file you would have to you Dynamic Imports javascript.info/modules-dynamic-imports Commented Sep 27, 2020 at 5:12
  • Interesting. I'll definitely need to play around with this to see if it'll work. Will probably be pretty janky in a React + TS context though. Commented Sep 27, 2020 at 5:34
  • Great!, Would like to know the outcome from you, if you come up with something, Mean while we can also wait for suggestions from other SO members. Commented Sep 27, 2020 at 5:39
  • Yeah lord only knows how I'm supposed to make that work with children needing to be passed around and strict typing. That turns into absolute spaghetti real quickly. Commented Sep 27, 2020 at 5:48
  • Finally wrangled the spaghetti into something that looks like it would work but no. TS will not allow you to do that. It cannot compile import() of a resource that does not exist. Not even with a @ts-ignore. TS spec apparently says import() is unconditional. So that won't work. Commented Sep 27, 2020 at 6:58
Related questions
1
How can I conditionally import/export libraries in TypeScript?
9
using React component library without @types
1
typescript: namespace import + specific import
Load 7 more related questions Show fewer related questions

0

Reset to default

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.