aurelia / aurelia/loader-webpack

Using aliases/paths not supported in require tag

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

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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.