Dependency on `window`?
I'm using
babel-preset-solid
and for some reason the generated output has a dependency on window
:
This makes my library unusable in server-rendered environments.
Why does this happen and how do I get rid of this dependency?6 Replies
npm
babel-preset-solid
Babel preset to transform JSX for Solid.js. Latest version: 1.8.0, last published: 7 days ago. Start using babel-preset-solid in your project by running
npm i babel-preset-solid
. There are 53 other projects in the npm registry using babel-preset-solid.Unfortunately that seems to generate an actual SSR bundle. What I want to do is to have Solid make the normal browser bundle, but I don't want it to error out on the server.
I've investigated the issue a bit further and found that it's because I'm bundling Solid.js into my library. The function
delegateEvents
in Solid.js depends on window
when declared (because of a default parameter). Therefore, the moment my library is imported, if window
isn't present, it errors out.
I'm still not quite sure how I can solve this. I don't want to have Solid.js as an external library that my consumers need to import.so your lib is client only?
ie it shouldn’t be used in the server, but you just don’t want it to throw when imported
or is it meant to be used both on the server and client?
Yes, client only, but I don't want it to throw on the server
It shouldn't do anything on the server
(It doesn't expose any methods that will be called on the server so there's no need to no-op them, its main purpose is to register a web component)
so you can either import the client only module dynamically with import()
or create a separate server entry with noops and configure export conditions in package. json
I think the separate entry point would work best here. Thank you!
Unfortunately this doesn't seem to work as I expected. Some frameworks (like Angular) now complain about importing inexistent symbols (even if they aren't used server-side).
The
delegateEvents
function being generated by the Babel transform plugin seems to be the only cause of the problem (no other dependencies on window
). It's also generated rather than imported so even a dynamic import doesn't help (note that I am compiling JSX down to JS because I don't want to expose Solid.js to end-users of the library).