aurelia / aurelia/webpack-plugin
Custom Element html not given correct moduleId
- Dominant language
- TypeScript
- Stars
- 89
- Forks
- 33
- PR merge metrics
- No merged PRs in 30d
Description
**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:
```
${message}
```
* 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.
Contributor guide
Research direction
Start with the webpack.config.js alias and the generated app.html reproduction, then run the project with `au run` and inspect the module IDs for the custom element HTML and CSS. Done means requiring `elements/test-element` resolves successfully and the generated resource module IDs use the `elements/` path instead of `resources/`.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- typescript, webpack
- Domain
- build-system, tooling
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Clearly specified
- Newbie friendliness
- 45/100