Using js.Build outside the assets directory/generic js.Build questions

Hello, I am trying to make a section on my website for playing around with React.js. So I started using/playing with js.Build.

  1. My idea was to have a section (content/react) which would contain leaf page bundles. Then I would put the project files and directories in there (as page bundle resources) and js.Build “main.jsx” or some such.
    However, js.Build seems to do different things if the resource comes from a Page Bundle instead of the assets directory.
    I.e. I have ‘import * from “./Bar”’ in main.jsx, then in the assets/ directory this would work, but as a bundle resource, it won’t. Are there some options I can pass js build for this to work?

  1. Playing around with js.Build, I wanted to remove all babel calls from my pipelines. However, I have one function that is defined in assets/somescript.js, but called from the ‘onclick’ of a button somewhere. If I use js.Build, this functions gets removed >.< Is this because of ‘tree shaking’? It cannot find the call to my function?

Yea, Hugo’s custom import resolver does not resolve imports inside a bundle, which admittingly is something that we should fix. Make js.Build resolve imports in page bundles · Issue #9125 · gohugoio/hugo · GitHub

1 Like

Cool! It would seem nice if you can have small self contained apps/site portions in a bundle instead of sprawling them out over all Hugo directories.

I haven’t looked at/worked with the Hugo module system yet, is it applicable to this use case?

If you have a small set of these “bundles”, you can mount them inside /assets and that would work fine – but it obviously gets a little messy if you have hundreds/thousands …

Just to be clear:

  • Building js entry files that lives inside /content works great.
  • But any import from those files will currently be resolved in /assets and node_nodules only.

We can take further discussions at Work In Progress: Resolve JS imports in /content by bep · Pull Request #9126 · gohugoio/hugo · GitHub