Does Hugo Modules imports work with TypeScript?

[ajschmidt]

I’m trying to import a Hugo module, moduleX, that contains a TypeScript file at moduleX/assets/main.ts.

Even after importing the Hugo module, TypeScript doesn’t seem to acknowledge that the file exists.

Is this supposed to work? Or am I doing something wrong?

I can’t seem to find any examples with Hugo modules and TypeScript.

[jmooring]

I’m not sure I understand your question.

With this directory structure:

assets/
└── js/
    └── main.js

Place this in your baseof.html template (or a partial):

{{ $opts := dict "targetPath" "js/main.js" }}
{{ if hugo.IsProduction }}
  {{ $opts = merge $opts (dict "minify" "true") }}
{{ else }}
  {{ $opts = merge $opts (dict "sourceMap" "external") }}
{{ end }}

{{ with resources.Get "main.ts" | js.Build $opts | fingerprint }}
  <script src="{{ .RelPermalink }}" integrity="{{ .Data.Integrity }}" crossorigin="anonymous"></script>
{{ end }}

Is that not working for you?

See https://gohugo.io/hugo-pipes/js/

[ajschmidt]

Thanks for the reply, Joe.

Let me elaborate.

I have a monorepo, where my Hugo frontend project resides in the same repository as my TypeScript backend.

I’ve made the backend a Go module so that it can be used as a Hugo module. It works with this hugo.yaml configuration:

module:
  replacements: "github.com/user/project/backend -> ../../backend"
  imports:
    - path: github.com/user/project/backend
      mounts:
       - source: src
         target: assets/backend

The motive behind this configuration is that I can have import statements in my frontend TypeScript files that look like this:

import { backendReponseType } from "backend/controller.ts";

instead of this:

import { backendReponseType } from "../../../../../backend/src/controllers/payment";

The problem with this configuration, however, is that VSCode doesn’t recognize this as a valid import.

See this screenshot to see what I mean:

The console.log statement works correctly and properly prints out the correct value of x, but I no longer have any TypeScript hints in VSCode.

The issue I’m trying to resolve here is related to the post below which talks about enabling path aliases for Hugo.

• Tsconfig.json is not being used on 0.78.1 - #11 by jimmy

Hope this helps clear things up.

[jmooring]

If I understand correctly, you would like the module mount to behave (within VS Code) like a symbolic link. Is that correct?

[ajschmidt]

I was able to get this working.

I added a minimal tsconfig.json file (shown below) in my frontend folder (where the Hugo project resides).

{
  "compilerOptions": {
    "lib": ["es2015", "dom"],
    "baseUrl": "./assets/ts",
    "paths": {
      "backend/*": ["../../../backend/src/*"]
    }
  }
}

After that, I could import some Typescript types from my backend with import statements like this:

import { backendReponseType } from "backend/controller.ts";

instead of this:

import { backendReponseType } from "../../../backend/src/controllers/payment";