Search code examples
javascripttypescriptwebpackaurelia

Aurelia webpack 4 - Failed loading required CSS file in runtime

I have pretty strange problem with webpack and aurelia.

I've made new webpack configuration based on the internet and in official webpack and aurelia documentation. Compilation works, everything seems to be fine. But in runtime, I'm getting this error:

css-resource.js?ada4:17 Uncaught (in promise) Error: Failed loading required CSS file: aurelia-notify/style.css
    at fixupCSSUrls (css-resource.js?ada4:17)
    at eval (css-resource.js?ada4:56)
    at <anonymous>

Originally, I thought it might be some issue related to this comment:

// CSS required in templates cannot be extracted safely
// because Aurelia would try to require it again in runtime

mentioned here: https://github.com/aurelia/skeleton-navigation/blob/master/skeleton-typescript-webpack/webpack.config.js#L70 but it doesn't seem to be.

While creating working example, I made a strange discovery. Everything works, until I load one of CSS files from following dependencies:

  <require from="aurelia-bootstrap-datetimepicker/src/bootstrap-datetimepicker-bs4.css"></require>
  <require from="eonasdan-bootstrap-datetimepicker/build/css/bootstrap-datetimepicker.min.css"></require>

(Please not the dependencies and error message - they are completely unrelated).

Here is example repository: https://github.com/klinki/aurelia-webpack-issue

(also have a look at tag working-state: https://github.com/klinki/aurelia-webpack-issue/tree/working-state - only one commit back and it works).

Solution

  • I fixed your problem:

    new ModuleDependenciesPlugin({
  'aurelia-testing': [ './compile-spy', './view-spy' ],
  // 'aurelia-notify': [ './style.css' ]
}),

    First this is not needed because AureliaPlugin installs a loader by default on all HTML files to detect and process <require> dependencies. style.css is required from an HTML template somewhere inside aurelia-notify. This is handled for you, no config required.

    Second this was bad because the rest of your config is set up with appropriate loaders based on whether the CSS dependency comes from inside a .html (assuming an Aurelia <require>) or not (assuming a JS import). By using ModuleDependenciesPlugin in this way, Webpack did not see a .html origin for the dependency and incorrect loaders were applied.