Lit Element no longer reactive after Hugo upgrade

support
1

I have a Hugo site that uses Lit for performant web components. As of Hugo version 0.89.3 everything was working well. My github action config didn’t specify a version and broke when it tried to use 0.91.0, though I hadn’t pushed any updates for a couple weeks and it may have broke in a version in between and hardcoded to my local version for the time being. According to version 0.90.0 esbuild was upgraded from v0.13.12 => v0.14.2. I just upgraded Hugo locally via homebrew and I can’t figure out what’s changed or how to resolve it. I also can’t figure out how to downgrade as homebrew apparently makes that much more difficult than NPM.

I’ve also taken this example from Lit’s playground which shows the reactivity working as expected in their example but when I click the element in my updated Hugo site it doesn’t update. So it’s not my code but something with the configuration. I’m not sure if there’s something I’m missing from my tsconfig or if I need to pass something to the esbuild.

Here’s my updated tsconfig but these changes aren’t helping either.

{
  "compilerOptions": {
    "allowSyntheticDefaultImports": true,
    "declaration": true,
    "declarationMap": true,
    "experimentalDecorators": true,
    "forceConsistentCasingInFileNames": true,
    "inlineSources": true,
    "lib": ["es2020", "DOM", "DOM.Iterable"],
    "module": "es2020",
    "moduleResolution": "node",
    "noFallthroughCasesInSwitch": true,
    "noImplicitAny": true,
    "noImplicitOverride": true,
    "noImplicitReturns": true,
    "noImplicitThis": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "outDir": "./",
    "rootDir": "./assets",
    "sourceMap": true,
    "strict": true,
    "target": "es2019",
    "useDefineForClassFields": false,
    "plugins": [
      {
        "name": "ts-lit-plugin",
        "strict": true
      }
    ]
  },
  "include": ["assets/**/*.ts"],
  "exclude": []
}

Any help would be greatly appreciated.

2

It looks like after much research I thought I’d try passing the target as Hugo describes in their documentation like so:

{{ $opts := dict "target" "es2019" }}
{{ $script := resources.Get "index.ts" | js.Build $opts }}

Things seem to be working again.

So does esbuild/hugo not see my tsconfig file? Do I need to pass that as a separate option to make it known? According to esbuild’s documentation it should be finding it. Doesn’t seem to be the case here though.

3

I am hitting a related issue, after upgrading from 0.113 to 0.115.2, I started getting compile errors on some lit components that had previously worked fine. In 11232 I reported what looked to me like regression and was told that I need to set

    "experimentalDecorators": true,

but that is already in my tsconfig, indicating that file is not being used. I would also like to know how to get the tsconfig file to be used by the js.Build rather than try to keep two configs.

Thanks!!

4

We’ll handle this in the issue queue.