build errors not shown in dev mode

lschierer commented 22 hours ago

Type of Change

Bug

Summary

build and dev mode show different behaviors with typescript. Something that works in dev should at least build.

Details

if you check out https://github.com/lschierer/greenwood-repoductions/tree/bare-css-typescript (note the branch)
look at the header.ts file in components. there are 3 import lines, 2 of which are commented out.
- The first, as I understand it, is the recommended way to import. This does not work at all.
- The second will run with pnpm run dev but will show a runtime error saying it cannot find the module. The component will not render. If you run pnpm run build you will be told

ReferenceError [Error]: CSSStyleSheet is not defined
    at file:///Users/lschiere/src/schierer/greenwood-repoductions/node_modules/.pnpm/@spectrum-css+tokens@14.6.0/node_modules/@spectrum-css/tokens/dist/index.css:1:15
    at ModuleJob.run (node:internal/modules/esm/module_job:268:25)
    at async onImport.tracePromise.__proto__ (node:internal/modules/esm/loader:543:26)
    at async executeRouteModule (file:///Users/lschiere/src/schierer/greenwood-repoductions/node_modules/.pnpm/@greenwood+plugin-renderer-lit@0.31.0-alpha.0_@greenwood+cli@0.31.0-alpha.0_lit@3.2.1/node_modules/@greenwood/plugin-renderer-lit/src/execute-route-module.js:18:7)
    at async executeModule (file:///Users/lschiere/src/schierer/greenwood-repoductions/node_modules/.pnpm/@greenwood+cli@0.31.0-alpha.0/node_modules/@greenwood/cli/src/lib/ssr-route-worker.js:6:16)
    at async MessagePort.<anonymous> (file:///Users/lschiere/src/schierer/greenwood-repoductions/node_modules/.pnpm/@greenwood+cli@0.31.0-alpha.0/node_modules/@greenwood/cli/src/lib/ssr-route-worker.js:12:3)

The third will run with pnpm run dev and the component will render. However, if you run pnpm run build you get

Error [ERR_MODULE_NOT_FOUND]: Cannot find module '/node_modules/@spectrum-css/tokens/dist/index.css' imported from /Users/lschiere/src/schierer/greenwood-repoductions/src/components/header.ts
at finalizeResolution (node:internal/modules/esm/resolve:257:11)
at moduleResolve (node:internal/modules/esm/resolve:913:10)
at defaultResolve (node:internal/modules/esm/resolve:1037:11)
at nextResolve (node:internal/modules/esm/hooks:748:28)
at resolve (file:///Users/lschiere/src/schierer/greenwood-repoductions/node_modules/.pnpm/@greenwood+cli@0.31.0-alpha.0/node_modules/@greenwood/cli/src/loader.js:91:10)
at nextResolve (node:internal/modules/esm/hooks:748:28)
at Hooks.resolve (node:internal/modules/esm/hooks:240:30)
at handleMessage (node:internal/modules/esm/worker:199:24)
at Immediate.checkForMessages (node:internal/modules/esm/worker:141:28)
at process.processImmediate (node:internal/timers:491:21) {
code: 'ERR_MODULE_NOT_FOUND',
url: 'file:///node_modules/@spectrum-css/tokens/dist/index.css'
}

This has been reproduced with 0.30.2 and with 0.31.0-alpha.0

This description has been updated to remove portions that were not in fact bugs but reflected failures of my understanding.

thescientist13 commented 22 hours ago

So there are a couple of issues here but to try and break them down

it will fail saying that HTMLElement is not defined in header.ts.

So the issue here is that Lit's SSR capability does not support native HTMLElement, which is what is happening when the prerender: true flag is being set in your greenwood.config.js. So basically if you are using Lit + SSR, you would always have to be using LitElement base class.

I could have sworn I had this called out in the caveat's section but it is not there, so I have opened a PR to document this, so thanks for catching this! 👀

edit: I agree not seeing the error during development is annoying, and so we plan to bring the prerender workflow to development soon - https://github.com/ProjectEvergreen/greenwood/issues/1249

also using the 0.31.0 alpha.0 release, in my HP_Stuff repo that I've used in other reports, I see that the line import SpectrumCard from "@spectrum-css/card/dist/index.css" with { type: "css" }; works in dev mode, but results in a module not found error at build. I've not yet reproduced that one in the greenwood-reproductions repo because I keep hitting various other type not defined errors at build like noted just above.

Based on the demo repo I have been validating these changes in, I was able to confirm all the Spectrum JS and CSS imports work in both dev and prod builds and you can see a production build here hosted on Vercel. https://greenwood-lit-ssr-yp27-git-demo-74cdbd-thescientist13s-projects.vercel.app Screenshot 2024-12-02 at 4 48 45 PM

Do note I use the bare specifier when calling it from JavaScript https://github.com/thescientist13/greenwood-lit-ssr/pull/24/files#diff-722cfecf5ea0a6fe1f48c236297b7945594a72d211a78bc5680de5bfbf85a8afR12

import SpectrumCard from '@spectrum-css/card' with { type: 'css' };

console.log({ SpectrumCard });

The path you're using looks to be more of their recommendation when using @import in a CSS file https://github.com/adobe/spectrum-css?tab=readme-ov-file#including-assets

Let me add an example of the CSS flavor that to that demo though just to make sure I don't forget any use cases.

(Also keeping in mind this is all in alpha stage, I would ask that we use Discord for this kind of pre-release feedback, or the existing issue if one exists to help keep the conversations in one place)

thescientist13 commented 21 hours ago

So added a demonstration of using @import but found an issue when the @imports are nested within another @import that seems specific to usage with _nodemodules, so let me look into getting that out in the next alpha release for all this ecosystem compat work. 👍

lschierer commented 21 hours ago

Oh. I forgot to put I had also tested in 0.30.2, what I was actually trying to type was that it was still there.

thescientist13 commented 18 hours ago

Oh. I forgot to put I had also tested in 0.30.2, what I was actually trying to type was that it was still there.

Sorry, could you clarify to which of the above points you are referring to here?

lschierer commented 3 hours ago

when I filed the bug, I first observed the behaviors listed with

    "@greenwood/cli": "~0.30.2",
    "@greenwood/plugin-google-analytics": "^0.30.2",
    "@greenwood/plugin-postcss": "^0.30.2",
    "@greenwood/plugin-renderer-lit": "^0.30.2",
    "@greenwood/plugin-typescript": "^0.30.2",

and then upgraded to the alpha to see if the changes fixed them. I reported only after seeing that they persisted. From our further discussions, I realize that the first bullet point about the html element is almost certainly me misunderstanding the prerendering and the lit renderer plugin, so I'm exploring that more.

lschierer commented 2 hours ago

Updated the description to reflect the part that remains an outstanding bug now that you've explained things to me. The tip of the branch now has a better minimal reproduction.

ProjectEvergreen / greenwood