Bundling Preact with a library using Vite? Or another way?

[joeattardi]

Hi, not sure if this is the best place to ask this question but hopefully someone has an idea for me :)

Here's what I'm trying to do: I have a React component. I want to allow non-React apps to use this component too without having to pull in all of React. I'm using Vite to build these libraries.

So my idea was basically to create another library that uses Preact and the compat layer to render the React component using Preact, and ship that library with the component and Preact bundled. The goal is that the consumer of the compatibility package doesn't even have to be aware that it's a React/Preact component.

This idea hasn't really worked, though. I tried two ways:

1. The compability package has the component package as a peer dependency. In this case the compat package builds fine, however when I import it into a fresh vanilla JS project, I get weird errors like Uncaught TypeError: Cannot add property __, object is not extensible and a bunch of minified stack trace entries. This seems to be fixed by adding the alias to preact from react in the vanilla package, but then it blows up because it can't find Preact. I would have thought the compatiblity layer bundled Preact and it would be able to find it from there but seems that isn't correct.

2. The compatibility package includes the component package as a dependency, so it is bundled. When I do this, I can't build the compatibility package because it's not able to find preact (getting a ENOENT: no such file or directory, open 'preact/compat'), presumably it's trying to build the main package from the compatibility one. The alias for preact is working but it can't find preact (even though I have it as a dependency).

Maybe there is a more straightforward way I am missing, or a better model for distributing such components.

Thank you!

[rschristian]

Seems like you're struggling more so with Vite's library building than anything else; conceptually, I don't see any issues with your plan.

I can write up a demo w/ microbundle later, will at least get you something to test out to see if the idea works well for your needs.

Not necessarily pushing Microbundle, just one I help maintain and am most familiar with.

[joeattardi]

I wouldn’t say my primary use case is React. My main goal is just to have a component that any web app can use regardless of its framework.

Currently the component is just plain JS and there is so much extra cruft there I’ve practically been creating another framework around it.

Since React is my main strength I thought rewriting it with Preact would make a better component.

I wanted to avoid the extra Preact overhead if the project using it is already React.

I like the idea of two builds - a plain React version and a Preact web component. Is there an example or guide somewhere demonstrating such an approach?

Thanks again, I really appreciate the help.

[rschristian]

I wouldn’t say my primary use case is React. My main goal is just to have a component that any web app can use regardless of its framework.

Currently the component is just plain JS and there is so much extra cruft there I’ve practically been creating another framework around it.

If that's the case, I'd probably recommend sticking with plain JS and producing a web component. They're usable everywhere, which is the idea.

The question is, is the "extra cruft" worth ~4.5kb and maintaining two packages worth it to get rid of? I feel like I need to caution here, as it's unlikely rewriting it in a framework and translating that back will make "a better component".

I'll write up a demo real quick though.

[rschristian]

I like the idea of two builds - a plain React version and a Preact web component. Is there an example or guide somewhere demonstrating such an approach?

Just ended up updating the previous repo: https://github.com/rschristian/example-react-compat-lib

Again, I've used Microbundle but anything should work. Just what I'm most familiar with as I help maintain it.

You have two packages there, the plain React component and a web component facilitated by both preact/compat (to translate the Reactisms) and preact-custom-element (to translate the Preactisms to a web component). All you need to do is the following to use it:

// Component registers itself so a side-effectful import is all that's needed
import 'example-lib-compat';

function App() {
    return <x-component name="Ryan Christian"></x-component>;
}

[joeattardi]

If that's the case, I'd probably recommend sticking with plain JS and producing a web component. They're usable everywhere, which is the idea.

My current plain JS component has become a big mess. I had started rewriting it as a web component using lit-element which works well but lit adds more bundle size. Sounds like going a React/Preact route may have the same problem.

Another thought I had earlier was to give Svelte a try since that compiles to plain JS without a runtime dependency. I think I might pursue that idea further if sticking with plain JS is the best approach.

Really appreciate your time and insight on this.

[rschristian]

I certainly wish you luck! It's a challenging problem area.

[joeattardi]

You know, i just took a look at your repo and I actually really like this approach and I think I may run with that.

[rschristian]

Glad that could be of use. Certainly feel free to let me know if you have any further questions or issues with that.

[joeattardi]

Quick question - should the preact dependencies in the compat library be dependencies rather than devDependencies?

[rschristian]

Up to you:

• devDependencies means they both get bundled into the the output
• dependencies means they're not, and instead both installed alongside your compat lib

IMO, the current setup (devDependencies) is better for the no build tools experience; if someone isn't using NPM and wants to use your component directly in the browser, it's easiest if everything is bundled together. But like anything there are tradeoffs there. Choice for you to make.