Custom Element html not given correct moduleId

[TomorrowToday]

I'm submitting a bug report

• Library Version: 5.0.4

Please tell us about your environment:

• Operating System: OSX 10.16

• Node Version: 18.12.0

• NPM Version: 8.19.2

• JSPM OR Webpack AND Version webpack 5.75.0

• Browser: Chrome 108

• Language: ESNext

Current behavior: Module names/ids for custom element html files in the resources/elements directory are being named resource/element/test-element.html even when an elements alias is created for the directory

Steps to recreate

• install a new project from the cli.
• add a custom element named test-element from the cli.
• create an alias for the resources/elements folder in the webpack.config.js:

  alias: {
  'elements': path.resolve(__dirname, 'src/resources/elements'),
  //...
  }

• require the test-element in the app.html using the alias:

  <template>
  <require from="elements/test-element"></require>
  <h1>${message}</h1>
  <test-element></test-element>
  </template>

• au run
• open in the browser and view the console error:

  Uncaught (in promise) Error: Unable to find module with ID: elements/test-element.html

Expected behavior The moduleId for the html (and probably css) should match the path for the js file--aka it should start with 'elements/', not 'resources/'.

What is the motivation / use case for changing the behavior? I am porting a large project--hundreds of custom elements and templates living in the elements directory--from requirejs to webpack. For requirejs projects the aurelia.json nicely provides the paths properties to set this up.

[Gryhyphen]

Yeah uh, I've run into fun things like this. the tldr is that you need to patch it yourself, and it's a pain in the butt.

My work around, I re-wrote the aliased paths in the html-loader preprocessor in webpack. However, this would cause the webpack build to fail as static analysis would fail. So in addition, you need to still alias the files. However, then webpack doesn't BUNDLE the files. Finally, you need to load all the aliases globally using globalResources on the aurelia configuration and then FINALLY at last, your aliases work. (at the cost of the aliases being loaded as global resources).

smh.

This is for y'all that's been waiting two years for this to be fixed. Bless your heart. And I hope you come up with a better hack around this limitation then I did.

[Maaxion]

We wanted to in our project replace the relative imports, with aliased imports in the component js files using @viewResources() but bumped into this issue as well.

It seems like a previous issue on this was marked as wontfix, so I assume that aliased paths with component imports is basically not supported with aurelia? That's quite a shame.

[bigopon]

The fix may or may not be simple, its just cannot be prioritized atm. We will be back to this after RC release of v2.