aurelia / aurelia/webpack-plugin

Custom Element html not given correct moduleId

Open
#213 3 comments 0 reactions 0 assignees View on GitHub
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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.