aurelia-loader-webpack fails to load HTML templates when app is built with webpack mode=production

[josundt]

I'm submitting a bug report

• Library Version: 5.0.0

Please tell us about your environment:

• Operating System: Windows 10

• Node Version: 14.17.3 (current LTS)

• NPM Version: 6.14.13

• JSPM OR Webpack AND Version webpack 5.41.1 webpack-cli 4.7.2
  webpack-dev-server 3.11.2

• Browser: All (tested in Chrome 91.0.4472.164)

• Language: TypeScript 4.3.5

Current behavior: NB! This issue appears even after applying the fix from https://github.com/aurelia/loader-webpack/pull/59.

I got my whole application up and running using webpack 5 with aurelia-webpack-plugin and aurelia-loader-webpack, but then it broke when building with mode=production.

I have not been able to create a fix for the problem, so instead I created a repository with a simple aurelia app created using aurelia-cli, where I afterwards have applied the necessary changes to migrate to webpack 5. (The webpack 5 migration is in a seaparate commit in case you want to review that). The simple app demonstrates how this problem only exists when webpack mode=production (--env production). Please use this app to easily reproduce the problem.

Steps to reproduce using the sample app: The app works perfectly with the standard npm start command (development mode), but when running the app with npm run start:prod (production mode), console errors will appear in the browser.

https://github.com/josundt/aurelia1-wp5-bug-repro

I have done some debugging, comparing production and development mode, and I was hoping that information from these screenshots could lead you in the right direction:

Screenshot from debugging aurelia-loader-webpack.js after building with mode=development:

_Notice that __webpack_require__.m[moduleId] returns a function with parameters, body and a return statement, and that __webpack_require__(moduleId) returns a Module with the HTML template string content as the default export ._

Screenshot from debugging aurelia-loader-webpack.js after building with mode=production:

PS! Since code is minified in production, the variables on the watch are different

Notice that __webpack_require__.m[moduleId] returns a parameterless empty void function, and that __webpack_require__(moduleId) returns an 'empty' Object._

To me it looks as if aurelia-webpack-plugin registered the HTML template modules to the webpack bundle in production mode, but it looks like they were not added correctly.

Expected/desired behavior: HTML templates should load in both production and development mode with webpack

[bigopon]

@josundt can you try with the latest version from master (not yet published on npm) and see if you are getting the same error?

[josundt]

@bigopon I'll try that and get back to you

[josundt]

@bigopon Seems to work when using code from master! 👍 I guess this case can be closed.

FYI: I will create one last issue that causes some problems in our applications. The problem occurs when using more than one webpack entry point. With the webpack 4 plugin our setup worked fine, and the aurelia-webpack-plugin ignored the entry points that did not concern the AureliaPlugin. With webpack 5 version it throws an error. I'll provide the details in a new issue and hope this can also be fixed before the next release. That issue is the last showstopper for us - so if that will be fixed and a new release of aurelia/loader-webpack will be released we are ready to migrate.

[bigopon]

@josundt That sounds good 👍 Thanks for helping with the fixes.

[josundt]

@bigopon I now made a PR with a fix to last remaining (known) issue from my side: #190