[JS] Different import behavior between assets and node_modules

[razon]

Hi, I found that the import behavior is different between assets and node_modules if there is extension specified at the end of path.

{{ $js := resources.Get "js/index.ts" }}
{{ $js = $js | js.Build }}
<script src="{{ $js.Permalink }}"></script>

// assets/js/index.ts
import 'foo/index.js'; // Specify the extension as `js`.

// assets/foo/index.ts
console.log('assets/foo/index.ts');

// node_modules/foo/index.ts
console.log('node_modules/foo/index.ts');

The node_modules/foo/index.ts will be imported, which is unexpected.

Structure

├── assets
│   ├── foo
│   │   └── index.ts
│   └── js
│       └── index.ts
├── node_modules
│   └── foo
│       └── index.ts

Full example can be found on GitHub - razonyang/hugo-lab at typescript-import.

Background

I want to create a WorkBox module that mount JS lib on assets, but can’t resolve the dependencies, since their source code import modules with .js ext.
For example: https://github.com/GoogleChrome/workbox/blob/v6/packages/workbox-routing/src/index.ts.

[bep]

@razon

The node_modules/foo/index.ts will be imported, which is unexpected.

The logic in Hugo is 1) Try to find it in /assets 2) If not, let ESBuild find it in node_modules

I find the above behaviour a little surprising, but if Node/ESBuild supports this, then Hugo should. But you need to create a GitHub issue.

As to a workaround, I think you can import ts files into js files, so if you instead create

assets/foo/index.js

wouldn’t that work?

[razon]

Yes, rename to assets/foo/index.js works, but the third party source code (mount on assets) is out of my control. The source files are saved with ts ext, but import with js ext.

// assets/js/index.ts 
import 'third-party'; // import third party lib.

/* Third party codes out of my control that mounted by module. */

// assets/third-party/index.ts
import third-party/foo.js // imports with .js ext, but there isn't foo.js.

// assets/third-party/foo.ts 

[razon]

Thanks for the quick fix, what’s the next release name will be?
I want to specify the required Hugo version on my WorkBox module in advance.

[bep]

@razon

Thanks for the quick fix, what’s the next release name will be?

v0.109.0.