S
SolidJS14mo ago
ringsig

Dependency on `window`?

I'm using babel-preset-solid and for some reason the generated output has a dependency on window:
function delegateEvents(eventNames, document = window.document) {
const e = document[$$EVENTS] || (document[$$EVENTS] = new Set());
for (let i = 0, l = eventNames.length; i < l; i++) {
const name = eventNames[i];
if (!e.has(name)) {
e.add(name);
document.addEventListener(name, eventHandler);
}
}
}
function delegateEvents(eventNames, document = window.document) {
const e = document[$$EVENTS] || (document[$$EVENTS] = new Set());
for (let i = 0, l = eventNames.length; i < l; i++) {
const name = eventNames[i];
if (!e.has(name)) {
e.add(name);
document.addEventListener(name, eventHandler);
}
}
}
This makes my library unusable in server-rendered environments. Why does this happen and how do I get rid of this dependency?
6 Replies
thetarnav
thetarnav14mo ago
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.
ringsig
ringsigOP14mo ago
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.
thetarnav
thetarnav14mo ago
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?
ringsig
ringsigOP14mo ago
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)
thetarnav
thetarnav14mo ago
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
ringsig
ringsigOP14mo ago
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).
Want results from more Discord servers?
Add your server