Workaround for js.Build on modules?

support
1

I have a theme that is imported as a module to the site, it has some npm dependencies that I have now managed to get installed with the new hugo mod npm packcommand, however, it is not able to build the JS files.

index.js from the module:
import lazySizes from ‘lazysizes’;

import 'lazysizes/plugins/blur-up/ls.blur-up';

import { noscript } from "lazysizes/plugins/noscript/ls.noscript.js";

import quicklink from "quicklink";

quicklink();

partials/scripts.html, which is called in _baseof.html:

{{ $js := resources.Get "index.js" | js.Build (dict "target" "es2016") }}
{{ if not site.IsServer }}

{{ $js = $js | minify | fingerprint }}

{{ end }}

{{ with $js }}

<script type="text/javascript" src="{{ .RelPermalink }}" defer></script>

{{ end }}

When I try to build or start the server I get this error:

Error: Error building site: JSBUILD: failed to transform “index.js” (application/javascript): No matching export for import “default”

I figured this issue: Improving the ESBuild import resolver to support "Hugo modules imports" · Issue #7474 · gohugoio/hugo · GitHub might be related, but I would like to know if there exists a workaround so I can get the site built?

2

When I use modules I use webpack to create my javascript files and THEN let Hugo work with that. It’s as simple as adding a script section to your package.json and there:

"build": "cross-env NODE_ENV=production webpack --progress --hide-modules && hugo --minify"

I don’t think Hugo is already importing modules.

3

It would work like this if the npm dependencies was not loaded from a Hugo module. Since Hugo now can do PostCSS and JS processing (ESBuild) I would like to avoid having to install more tooling to compile the JS.

4

@ olafghanizadeh Were you able to find the solution for this issue? I’m facing the exact same issue while using JS Processing. Any help would be appreciated.

5

I think this should work now. What issues are you having?

Could you share a repo to your module and your project?

6

There have been lots of improvements in this area lately, so I think this should be mostly fixed.

Have a look at this test repo for inspiration

3 Likes
7

Seconding this.

I got it to work in my project. I think the main thing was having to run hugo mod npm pack in the module, and then npm install in the project.

1 Like
8

This is how my setup looks like, I was able to import other packages which do not have dependencies. Tried importing anime.js, it’s working fine.

I also tried moving the dependencies from devDependencies to dependencies in package.json.

main.ts

import * as abc from "@something/abc"; //abc package has a dependency of "@something/XYZ"

abc.init();

package.json

 "devDependencies": {
   "@something/XYZ" : "1.0.0",
   "@something/abc": "1.0.0"
  }

head.html

<head>
    {{ hugo.Generator }}
    {{ $js := resources.Get "main.ts" -}}
    {{ if eq hugo.Environment "development" -}}
    {{ $js = $js | js.Build (dict "format" "esm" "sourceMap" "inline") -}}
    {{ else -}}
    {{ $js = $js | js.Build (dict "format" "esm" "minify" true) | fingerprint -}}
    {{ end -}}
    <script type="text/javascript" src="{{ $js.Permalink }}"></script>
</head>

This is error I was getting.

Error: Error building site: JSBUILD: failed to transform "main.ts" (application/typescript): Could not resolve "@something/XYZ" (mark it as external to exclude it from the bundle).

Note: Tried hugo mod npm pack it did create package.hugo.json and moved some dependencies automatically from deveDependencies to dependencies. Also performed npm install.

1 Like
9

I think you need to transpile your TypeScript file before Hugo can deal with it? I haven’t really used TypeScript with a Hugo project before so I can’t say for sure, but check the documentation on the Babel pipe.

10

Typescript works great out of the box.

As to the problem itself, it would be easier with a failing demo project.

11

As I’m using an internal package I couldn’t setup a test repo with that. The problem seems to be coming from the internal package which is dependent on another package. Have made changes to load those modules like below fixed the issue. Thanks.

main.ts

import "@something/XYZ";
import * as abc from "@something/abc";
1 Like
12

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