A high-performance TypeScript static website generator for building highly-interactive websites. Localization inbuilt. Flexible URLs. Content managed and templates separated.
I was writing a LitEnginePlugin using the same format as the PreactEnginePlugin (referencing this code) and when I import and try and use render from @lit-labs/ssr it breaks and shows this error.
import {render} from '@lit-labs/ssr';
^
Error [ERR_REQUIRE_ESM]: require() of ES Module /Users/me/amagaki-lit/node_modules/@lit-labs/ssr/index.js from /Users/me/amagaki-lit/plugins/lit-engine.ts not supported.
Instead change the require of index.js in /Users/me/amagaki-lit/plugins/lit-engine.ts to a dynamic import() which is available in all CommonJS modules.
at Object.<anonymous> (/Users/me/amagaki-lit/plugins/lit-engine.ts:4:12)
This happens specifically during the amagaki build step, the gulp build completes successfully.
Example of the lit-engine.ts code I wrote below - which is basically the same as the preact-engine.ts code:
Note: if I comment out import {render} from '@lit-labs/ssr'; everything works as expected - I see "Footer" show up in the final /build HTML where the footer partial is used in the templates, and "Spacer" for spacer - but when I import {render} from '@lit-labs/ssr';amagaki build shows the above error.
Second note: I'm logging render like console.log(render) just so typescript pulls in '@lit-labs/ssr';`, otherwise typescript will ignore the import). Everthing besides the {render} import and logging that out is basically the exact same as the preact-engine file.
I stopped digging here and figured I would open an issue, but I'd love to build out a version of amagaki leaning on lit-html and their ssr/hydration stuff!
I was writing a
LitEnginePlugin
using the same format as thePreactEnginePlugin
(referencing this code) and when I import and try and use render from@lit-labs/ssr
it breaks and shows this error.This happens specifically during the
amagaki build
step, thegulp build
completes successfully.Example of the
lit-engine.ts
code I wrote below - which is basically the same as thepreact-engine.ts
code:Note: if I comment out
import {render} from '@lit-labs/ssr';
everything works as expected - I see "Footer" show up in the final/build
HTML where the footer partial is used in the templates, and "Spacer" for spacer - but when Iimport {render} from '@lit-labs/ssr';
amagaki build
shows the above error.Second note: I'm logging render like
console.log(render)
just so typescript pulls in '@lit-labs/ssr';`, otherwise typescript will ignore the import). Everthing besides the {render} import and logging that out is basically the exact same as the preact-engine file.I poked around the 11ty lit plugin code to see why a simiilar issue isn't happening there and noticed this: https://github.com/lit/lit/blob/main/packages/labs/eleventy-plugin-lit/src/index.ts#L143
I stopped digging here and figured I would open an issue, but I'd love to build out a version of amagaki leaning on lit-html and their ssr/hydration stuff!