lit: [lit] reexport of html from lit fails because of side effects?

Description

I would expect to have a file with

export { html } from 'lit';

to also work if I execute it in node…

Steps to Reproduce

Open Stackblitz demo https://stackblitz.com/edit/node-uqy5mf?file=index.js
execute node index.js in the stackblitz terminal

Expected Results

A console log

Actual Results

❯ node index.js
Error: document is not defined
...

seems a side effect is doing something and fails

About this issue

Original URL
State: closed
Created 2 years ago
Comments: 16 (11 by maintainers)

Most upvoted comments

sweet - for the simple test case

👉 index.js

console.log(`Hello from Node.js v${process.versions.node}!`);
export { html, css, LitElement, svg, unsafeCSS, nothing } from "lit";
console.log("✅ could export html via node");

node index.js

it works fine 💪

will check for Rocket tomorrow but I assume it will work fine 🤗

daKmoR on Jul 27, 2022

Updated and used in rocket now 🎉

Sooo nice to get rid of this “workaround” 💪 thxxx 🙇‍♂️

In case anyone is curious what it helped to clean up https://github.com/modernweb-dev/rocket/pull/398

daKmoR on Aug 13, 2022

@aomarks So, we are making a UI library using WC with Lit. We have many things like Linaria(CSS) with custom roolup plugins(for using linaria with constructed css), React portal like event proxying for actual overlays so we made it separate repo for many repos to use at once. We are planning to get it opensource as it is behind enterprise right now.

Since lit is our external deps and i dont bundle it as shown in the file. I think nextjs should not have any problem parsing browser/main field by default. i will check deeper and will update here for sure.

This is a bit new thing for ui so mentioning will help many like me in future. Thanks!

This will change saved me so much trouble of dynamic import and all in Nextjs. Many thanks!

bugwheels94 on Jul 30, 2022

@aomarks Amazing! I tried to use inside Nextjs this as soon as I saw but it broke on different error for me

../node_modules/@lit/reactive-element/node/css-tag.js (6:1220) @ c
ReferenceError: CSSStyleSheet is not defined

This import is coming from customElement()

customElement(lit/decorator.js) -> ClassDescriptor (base.js) -> Reactive Element(reactive-element.js) -> css-tag.js

Thanks for this feature.

bugwheels94 on Jul 27, 2022