Does Hugo Modules imports work with TypeScript?

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.

I’m not sure I understand your question.

With this directory structure:

└── 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?


1 Like

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:

  replacements: " -> ../../backend"
    - path:
       - 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.

Hope this helps clear things up.

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

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";

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.