aurelia / aurelia/framework

Webpack does not know how to load CSS files from node_modules when using `noView`.

Open
#855 3 comments 0 reactions 0 assignees View on GitHub
Dominant language
TypeScript
Stars
11.7k
Forks
608
PR merge metrics
No merged PRs in 30d

Description

**I'm submitting a bug report**

* **Library Version:**
`"aurelia-bootstrapper": "^2.1.1",`
`"aurelia-webpack-plugin": "^2.0.0-rc.4",`

**Please tell us about your environment:**
* **Operating System:**
Windows 10

* **Node Version:**
8.9.1

* **NPM Version:**
5.5.1

* **Aurelia CLI OR JSPM OR Webpack AND Version**
CLI 0.32.0

* **Browser:**
Chrome Latest, at least

* **Language:**
all

**Current behavior:**

`@noView([PLATFORM.moduleName('nprogress/nprogress.css')])`
fails with the following error:
```text
Unhandled rejection Error: Failed loading required CSS file: nprogress/nprogress.css
at fixupCSSUrls (webpack-internal:///144:23:11)
at eval (webpack-internal:///144:62:14)
From previous event:
at CSSResource.load (webpack-internal:///144:61:8)
at ResourceDescription.load (webpack-internal:///2:3047:26)
at ResourceModule.load (webpack-internal:///2:2996:35)
at eval (webpack-internal:///2:3365:41)
From previous event:
at ViewEngine.importViewResources (webpack-internal:///2:3334:50)
at ViewEngine.loadTemplateResources (webpack-internal:///2:3304:17)
at eval (webpack-internal:///2:3252:38)
From previous event:
at ViewEngine.loadViewFactory (webpack-internal:///2:3234:65)
at NoViewStrategy.loadViewFactory (webpack-internal:///2:654:23)
at HtmlBehaviorResource.load (webpack-internal:///2:4012:27)
at ResourceDescription.load (webpack-internal:///2:3047:26)
at ResourceModule.load (webpack-internal:///2:2989:23)
at eval (webpack-internal:///2:3365:41)
From previous event:
at ViewEngine.importViewResources (webpack-internal:///2:3334:50)
at ViewEngine.loadTemplateResources (webpack-internal:///2:3304:17)
at eval (webpack-internal:///2:3252:38)
From previous event:
at ViewEngine.loadViewFactory (webpack-internal:///2:3234:65)
at ConventionalViewStrategy.loadViewFactory (webpack-internal:///2:613:23)
at HtmlBehaviorResource.load (webpack-internal:///2:4012:27)
at eval (webpack-internal:///2:4617:16)
From previous event:
at CompositionEngine.createController (webpack-internal:///2:4605:69)
at CompositionEngine._createControllerAndSwap (webpack-internal:///2:4580:17)
at CompositionEngine.compose (webpack-internal:///2:4666:19)
at TemplatingEngine.compose (webpack-internal:///2:4930:36)
at Aurelia.setRoot (webpack-internal:///aurelia-framework:132:19)
at eval (webpack-internal:///main:272:20)
From previous event:
at Object.configure (webpack-internal:///main:271:19)
at eval (webpack-internal:///258:129:27)
From previous event:
at config (webpack-internal:///258:124:54)
at eval (webpack-internal:///258:160:12)
From previous event:
at bootstrap (webpack-internal:///258:159:24)
at eval (webpack-internal:///258:146:7)
From previous event:
at run (webpack-internal:///258:141:59)
at Object.eval (webpack-internal:///258:166:16)
at eval (webpack-internal:///258:167:30)
at Object.258 (http://localhost:8080/app.43f8b172d2fa1311bebe.bundle.js:1366:1)
at __webpack_require__ (http://localhost:8080/app.43f8b172d2fa1311bebe.bundle.js:20:30)
at Object.132 (http://localhost:8080/app.43f8b172d2fa1311bebe.bundle.js:359:18)
at __webpack_require__ (http://localhost:8080/app.43f8b172d2fa1311bebe.bundle.js:20:30)
at http://localhost:8080/app.43f8b172d2fa1311bebe.bundle.js:63:18
at http://localhost:8080/app.43f8b172d2fa1311bebe.bundle.js:66:10
```

Simply using `import 'nprogress/nprogress.css';` in the same file works fine. Loading CSS with `require` elements in a view works as well.

**Expected/desired behavior:**
```javascript
import nprogress from 'nprogress';
import { bindable, noView } from 'aurelia-framework';
import {PLATFORM} from 'aurelia-pal';

nprogress.configure({ showSpinner: false });

@noView([PLATFORM.moduleName('nprogress/nprogress.css')])
export class LoadingIndicator {
@bindable loading = false;

loadingChanged(newValue) {
if (newValue) {
nprogress.start();
} else {
nprogress.done();
}
}
}
```

The above should work when `nprogress` has been installed as a dependency.
* **What is the motivation / use case for changing the behavior?**
I would expect loading CSS files via the `noView` decorator to work.

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.