# Does Hugo Modules imports work with TypeScript?

**URL:** <https://discourse.gohugo.io/t/does-hugo-modules-imports-work-with-typescript/44994>\
**Category:** support\
**Tags:** modules\
**Created:** [June 26, 2023, 4:02am UTC](https://discourse.gohugo.io/t/does-hugo-modules-imports-work-with-typescript/44994 "2023-06-26T04:02:32Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![ajschmidt](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/ajschmidt/32/19755_2.png) [@ajschmidt](https://discourse.gohugo.io/u/ajschmidt)\
**Post date:** [June 26, 2023, 4:02am UTC](https://discourse.gohugo.io/t/does-hugo-modules-imports-work-with-typescript/44994/1 "2023-06-26T04:02:32Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![jmooring](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/jmooring/32/4214_2.png) [@jmooring](https://discourse.gohugo.io/u/jmooring)\
**Post date:** [June 26, 2023, 4:40am UTC](https://discourse.gohugo.io/t/does-hugo-modules-imports-work-with-typescript/44994/2 "2023-06-26T04:40:29Z")

</div>

I’m not sure I understand your question.

With this directory structure:

```auto
assets/
└── js/
    └── main.js

```

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

```plaintext
{{ $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/](https://gohugo.io/hugo-pipes/js/)

---

<div class="post-metadata">

**Author:** ![ajschmidt](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/ajschmidt/32/19755_2.png) [@ajschmidt](https://discourse.gohugo.io/u/ajschmidt)\
**Post date:** [June 27, 2023, 3:18am UTC](https://discourse.gohugo.io/t/does-hugo-modules-imports-work-with-typescript/44994/3 "2023-06-27T03:18:26Z")

</div>

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:

```yaml
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:

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

```

instead of this:

```ts
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:

 ![image](https://canada1.discourse-cdn.com/flex036/uploads/gohugo/original/3X/a/f/af3ae27824fc2e7e107dc8e7642610c129b9072e.png)

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](https://discourse.gohugo.io/t/tsconfig-json-is-not-being-used-on-0-78-1/29310/11)

Hope this helps clear things up.

---

<div class="post-metadata">

**Author:** ![jmooring](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/jmooring/32/4214_2.png) [@jmooring](https://discourse.gohugo.io/u/jmooring)\
**Post date:** [June 27, 2023, 3:28am UTC](https://discourse.gohugo.io/t/does-hugo-modules-imports-work-with-typescript/44994/4 "2023-06-27T03:28:46Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![ajschmidt](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/ajschmidt/32/19755_2.png) [@ajschmidt](https://discourse.gohugo.io/u/ajschmidt)\
**Post date:** [July 8, 2023, 11:22pm UTC](https://discourse.gohugo.io/t/does-hugo-modules-imports-work-with-typescript/44994/5 "2023-07-08T23:22:35Z")

</div>

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).

```json
{
  "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:

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

```

instead of this:

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

```

---

<div class="post-metadata">

**Author:** ![system](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/system/32/1_2.png) [@system](https://discourse.gohugo.io/u/system)\
**Post date:** [July 10, 2023, 11:22pm UTC](https://discourse.gohugo.io/t/does-hugo-modules-imports-work-with-typescript/44994/6 "2023-07-10T23:22:44Z")

</div>

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