aurelia / aurelia/webpack-plugin

Failed loading required CSS file in Aurelia v1 Webpack, but only from certain directories, using SCSS, seems to be a runtime error, or an issue with the plugin.

Open
#224 6 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:**
"aurelia-webpack-plugin": "^5.0.6",

**Please tell us about your environment:**
* **Operating System:**
Windows11

* **Node Version:**
v16.20.2

* **NPM Version:**
9.8.1

* **JSPM OR Webpack AND Version**
"webpack": "^5.89.0",

* **Browser:**
all

* **Language:**
"tslib": "^1.9.3",

**Current behavior:**

I'm changing over our Aurelia 1 project from jspm to webpack, the goal is to eventually upgrade to aurelia 2. Ran into an issue where at runtime it spits out `Error: Failed loading required CSS file: AdminTheme/Styles/layout.scss`.

This file is loaded in two locations through the syntax in html templates:

- `src/app/app.html`
- `src/app/components/ApiRequestGrid/api-request-grid.html`

In `src/app/app.html` it is loaded like so :

```

```

in `src/app/components/ApiRequestGrid/api-request-grid.html`

```

```

It loads correctly in `src/app/app.html`, I can see the styles being applied and no error is being logged at runtime. When I try to navigate to a page with the component `src/app/components/ApiRequestGrid/api-request-grid.html` on it, I get the error:

`Error: Failed loading required CSS file: AdminTheme/Styles/layout.scss`.

I ran webpack stats and found these lines:

```
"reasons": [
{
"active": true,
"explanation": "",
"module": "./src/app/Components/ApiRequestGrid/api-request-grid.html",
"moduleId": "app/Components/ApiRequestGrid/api-request-grid.html",
"moduleIdentifier": // I'VE OMMITED THIS
"moduleName": "./src/app/Components/ApiRequestGrid/api-request-grid.html",
"resolvedModule": "./src/app/Components/ApiRequestGrid/api-request-grid.html",
"resolvedModuleId": "app/Components/ApiRequestGrid/api-request-grid.html",
"resolvedModuleIdentifier": // I'VE OMMITED THIS
"type": "IncludeDependency",
"userRequest": "../../../AdminTheme/Styles/layout.scss"
},
{
"active": true,
"explanation": "",
"module": "./src/app/app.html",
"moduleId": "app/app.html",
"moduleIdentifier":// I've OMITTED THIS
"moduleName": "./src/app/app.html",
"resolvedModule": "./src/app/app.html",
"resolvedModuleId": "app/app.html",
"resolvedModuleIdentifier": // I'VE OMMMITTED THIS
"type": "IncludeDependency",
"userRequest": "/src/AdminTheme/Styles/layout.scss"
}
],
```

Which would seem to imply that webpack is bunding it / finding it / able to resolve the path. At least, seeing this reason array contains 2 elements, and both are the only places in the codebase that are requiring this code, it seems reasonable for me to assume that webpack is doing it's job, and this is an error with either the plugin or runtime.

**Expected/desired behavior:**

I want to know why my styles aren't loading. Previously, it worked in jspm land because we didn't bundle things properly, the file actually existed at the path on the server that we are hosting.

My understanding is that webpack should be finding the moduleId and cause aurelia likes to load things at runtime, that's why I needed to moduleId everything.

What I don't understand is why does the import in app.html work, but the import in api-request-grid.html does not?

At least, surface better error messages cause I'm at the point where I'm going to need to debug this through brute force and just tracing calls through aurelia and it's not fun.

* **What is the motivation / use case for changing the behavior?**

Allowing people to load scss files from within components to make use of features like the shadow dom.
Maybe stuff with css modules / anything to do with scoped css.
Giving me reasons to love aurelia.
Understanding the pain points people have using aurelia and how you can improve your tooling to make it easier for people to configure and use it.

Contributor guide

Open the contributing guide

Research direction

Reproduce the runtime failure using the two mentioned templates, src/app/app.html and src/app/components/ApiRequestGrid/api-request-grid.html, and compare their webpack stats entries for layout.scss. Trace how the plugin handles each require path at runtime; done means the component-scoped SCSS loads successfully or the failure reports the actual resolution problem.

Written by the indexing model from the issue text.

Assessment

Tech stack
scss, 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
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.