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

[AshleyGrant]

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:

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:

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.

[AshleyGrant]

Interestingly, it seems to work fine if I don't wrap it in PLATFORM.moduleName. Is that the expected behavior?

[Alexander-Taran]

@AshleyGrant have you checked it with wp4? recently?

[obedm503]

@AshleyGrant why not just import it directly and let webpack take care of it?

import 'nprogress/nprogress.css';