js.Build vs experimentalDecorators

[lschierer]

In 0.113.0 I have a typescript component included by the partial

{{- $js := resources.Get "ts/index.ts" -}}
{{ $params := (dict "search_config" site.Params.search_config "is_production" hugo.IsProduction ) }}
{{ $sourceMap := cond hugo.IsProduction "" "inline" }}
{{ $opts := dict "sourceMap" $sourceMap "minify" hugo.IsProduction "target" "es2020" "params" $params }}
{{ $js = $js | js.Build $opts }}
{{ if hugo.IsProduction }}
  {{ $js = $js | fingerprint }}
{{ end }}
<script
  src="{{ $js.RelPermalink }}"
  {{ if hugo.IsProduction }}integrity="{{ $js.Data.Integrity }}"{{ end }}
  type="module"></script>

that uses typescript decorators. This component works as expected.

On upgrading, I get the following error:

ERROR js.Build failed: "/Users/luke/src/HarryPotter/assets/ts/components/HPGC/family.ts:14:2": Transforming JavaScript decorators to the configured target environment ("es2020") is not supported yet

repeated a number of times before the build finally fails, saying

Error: error building site: JSBUILD: failed to transform "ts/index.ts" (text/typescript): "/Users/luke/src/HarryPotter/assets/ts/components/HPGC/family.ts:11:0": Transforming JavaScript decorators to the configured target environment ("es2020") is not supported yet

reverting back to 0.113.0 and the build works again.

What version of Hugo are you using (hugo version)?

hugo v0.114.1-e9b716ad9869b79e7c374bbdae4daf5ee6406bd4+extended darwin/arm64 BuildDate=2023-06-23T11:02:58Z VendorInfo=gohugoio

and

hugo v0.115.1-857374e69358f788bd31ddc55255c5c8e3dcfd80+extended darwin/arm64 BuildDate=2023-07-03T17:28:25Z VendorInfo=gohugoio

I have tried with both. The problem does not exist with 0.113.0.

Does this issue reproduce with the latest release?

Yes.

[jmooring]

In v0.113.0 we were using:
github.com/evanw/esbuild="v0.17.19"

In v0.114.0 we bumped to:
github.com/evanw/esbuild="v0.18.11"

See https://github.com/evanw/esbuild/releases/tag/v0.18.0

This release deliberately contains backwards-incompatible changes

Using experimental decorators now requires "experimentalDecorators": true (evanw/esbuild#104)

Previously esbuild would always compile decorators in TypeScript code using TypeScript's experimental decorator transform. Now that standard JavaScript decorators are close to being finalized, esbuild will now require you to use "experimentalDecorators": true to do this. This new requirement makes it possible for esbuild to introduce a transform for standard JavaScript decorators in TypeScript code in the future. Such a transform has not been implemented yet, however.

[lschierer]

so I must be setting that in the wrong place. My tsconfig has that line.

{
  "compilerOptions": {
    "target": "es2020",
    "module": "es2020",
    "lib": ["ES2020", "DOM"],
    "moduleResolution": "Node",
    "experimentalDecorators": true,
    "declaration": true,
    "useDefineForClassFields": false,
    "strict": true,
    "sourceMap": true,
    "resolveJsonModule": true,
    "esModuleInterop": true,
    "noEmit": true,
    "noUnusedLocals": false,
    "noUnusedParameters": false,
    "noImplicitReturns": true,
    "noImplicitAny": true,
    "strictNullChecks": true,
    "strictFunctionTypes": true,
    "alwaysStrict": true,
    "noFallthroughCasesInSwitch": false,
    "strictPropertyInitialization": false,
    "typeRoots": [
      "./node_modules/@types"
    ]
  },
  "exclude": [
    "node_modules",
    "cdk.out",
		"infrastructure/cdk.out"
  ]
}

[lschierer]

it occurred to me that maybe it isn't using the tsconfig? I tried three different ways of setting it.

{{- $js := resources.Get "ts/index.ts" -}}
{{ $params := (dict "search_config" site.Params.search_config "is_production" hugo.IsProduction ) }}
{{ $sourceMap := cond hugo.IsProduction "" "inline" }}
{{ $opts := dict "sourceMap" $sourceMap "minify" hugo.IsProduction "target" "es2020" "experimentalDecorators" true "params" $params  }}
{{ $js = $js | js.Build $opts }}
{{ if hugo.IsProduction }}
  {{ $js = $js | fingerprint }}
{{ end }}
<script
  src="{{ $js.RelPermalink }}"
  {{ if hugo.IsProduction }}integrity="{{ $js.Data.Integrity }}"{{ end }}
  type="module"></script>

{{- $js := resources.Get "ts/index.ts" -}}
{{ $params := (dict "search_config" site.Params.search_config "is_production" hugo.IsProduction ) }}
{{ $sourceMap := cond hugo.IsProduction "" "inline" }}
{{ $opts := dict "sourceMap" $sourceMap "minify" hugo.IsProduction "target" "es2020"  "params" $params "experimentalDecorators" true  }}
{{ $js = $js | js.Build $opts }}
{{ if hugo.IsProduction }}
  {{ $js = $js | fingerprint }}
{{ end }}
<script
  src="{{ $js.RelPermalink }}"
  {{ if hugo.IsProduction }}integrity="{{ $js.Data.Integrity }}"{{ end }}
  type="module"></script>

and

{{- $js := resources.Get "ts/index.ts" -}}
{{ $params := (dict "search_config" site.Params.search_config "is_production" hugo.IsProduction "experimentalDecorators" true  ) }}
{{ $sourceMap := cond hugo.IsProduction "" "inline" }}
{{ $opts := dict "sourceMap" $sourceMap "minify" hugo.IsProduction "target" "es2020"  "params" $params }}
{{ $js = $js | js.Build $opts }}
{{ if hugo.IsProduction }}
  {{ $js = $js | fingerprint }}
{{ end }}
<script
  src="{{ $js.RelPermalink }}"
  {{ if hugo.IsProduction }}integrity="{{ $js.Data.Integrity }}"{{ end }}
  type="module"></script>

none of them change the result.

[jmooring]

Git bisects says baef235 is the first bad commit.

---

Minimal reproducible example:

git clone --single-branch -b hugo-github-issue-11232 https://github.com/jmooring/hugo-testing hugo-github-issue-11232
cd hugo-github-issue-11232
hugo && grep decorateClass public/js/main.js | wc -l

Expected result: 2

Actual result in v0.114.0:

Error: error building site: JSBUILD: failed to transform "main.ts" (text/typescript): "/home/jmooring/code/hugo-testing/assets/main.ts:5:0": Experimental decorators are not currently enabled

[bep]

I try my best to read through the release notes/change sets of dependency updates, but esbuild has been really active lately, so I missed this one.

it occurred to me that maybe it isn't using the tsconfig? I

No, this is probably the build options that Hugo exposes -- and experimentalDecorators isn't in that list. You cannot currently set this, I'm afraid.

[bep]

Ignore my last comment, this isn't part of the Go API. According to

evanw/esbuild@6f2c029

This should live in tsconfig.

[jmooring]

As far as I can tell, in our implementation esBuild has never read tsconfig.json files (I tested back to v0.74.0). This was probably never a problem because esBuild only inspects/honors certain fields anyway (see https://esbuild.github.io/content-types/#tsconfig-json).

[github-actions]

This issue has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.