aurelia / aurelia/loader-webpack
Using aliases/paths not supported in require tag
- Dominant language
- TypeScript
- Stars
- 24
- Forks
- 9
- PR merge metrics
- No merged PRs in 30d
Description
**I'm submitting a bug report**
* **Library Version:**
aurelia-loader-webpack 2.2.1
**Please tell us about your environment:**
* **Operating System:**
Windows [10]
* **Node Version:**
10.15.1
* **NPM Version:**
6.4.1
* **JSPM OR Webpack AND Version**
webpack 4.29.0
* **Browser:**
Chrome Version 72.0.3626.119 (Official Build) (64-bit)
* **Language:**
TypeScript 3.3.1
**Current behavior:**
Require custom component does not work from template when using an alias/ts path.
```html
```
```js
Error: Unable to find module with ID: @root/hello-world/hello-world.html
at WebpackLoader.eval (aurelia-loader-webpack.js?e63c:197)
at step (aurelia-loader-webpack.js?e63c:41)
at Object.eval [as next] (aurelia-loader-webpack.js?e63c:22)
at eval (aurelia-loader-webpack.js?e63c:16)
at new Promise ()
at __awaiter (aurelia-loader-webpack.js?e63c:12)
at WebpackLoader._import (aurelia-loader-webpack.js?e63c:162)
at WebpackLoader.eval (aurelia-loader-webpack.js?e63c:262)
at step (aurelia-loader-webpack.js?e63c:41)
at Object.eval [as next] (aurelia-loader-webpack.js?e63c:22)
```
**Expected/desired behavior:**
When aliases are configured in webpack I expect the loader to include these trying to resolve the module.
* **What is the motivation / use case for changing the behavior?**
Enable usage of aliases making paths in the require statement easier to maintain.
**Workaround**
Load in TS and pass the class using viewResources decorator.
```ts
import { HelloWorldCustomElement } from '@root/hello-world/hello-world';
import { viewResources } from 'aurelia-templating';
@viewResources(HelloWorldCustomElement)
export class App {}
```
Contributor guide
Research direction
Start at WebpackLoader._import and the module-resolution path shown in the error from aurelia-loader-webpack.js. Investigate how the require tag's @root path becomes the .html module ID and how configured webpack aliases or TypeScript paths are handled. Done means the example require tag resolves the aliased component without the workaround.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- typescript, webpack
- Domain
- build-system, tooling
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 42/100