Bug in import function of webpack plugin

[patroza]

There's a bug in the webpack loader _import implementation, when you require the same resource multiple times from within the same template, then the import function will return an object on all subsequent calls, and only the first call will resolve properly.

Viewmodel error will be: No view model found in module "..." Template error will be: Template markup must be wrapped in a <template> element e.g. <template> <!-- markup here --> </template>

my workaround:

return new Promise(function (resolve, reject) {
...

->

WebpackLoader.map = {};
...
return WebpackLoader.map[moduleId] || ( WebpackLoader.map[moduleId] = new Promise(function (resolve, reject) {
... );

[niieani]

Can you post that workaround again, seems something got lost, I can't make out what's the code supposed to do? Thanks

[patroza]

@niieani I am caching the promise based on moduleId, so that on re-entry of the import method, the cached instance is being re-used.

(So far what I believe is going wrong is that the second time the request is made, it is made without a loader specified)

I hope I can find some time to make a repro project for you, it's just really busy atm..

[niieani]

I think that's a race condition, where certain variables are already set when the second loading is being done. Can you post the full code of your workaround, please?

[patroza]

@niieani

inside the dist\commonjs\aurelia-loader-webpack.js

  WebpackLoader.modulePromiseMap = {};

  WebpackLoader.prototype._import = function _import(moduleId) {
    var _this2 = this;

    var moduleIdParts = moduleId.split('!');
    var path = moduleIdParts.splice(moduleIdParts.length - 1, 1)[0];
    var loaderPlugin = moduleIdParts.length === 1 ? moduleIdParts[0] : null;

    return WebpackLoader.modulePromiseMap[moduleId] ||
               (WebpackLoader.modulePromiseMap[moduleId] =
                 new Promise(function (resolve, reject) {
      try {
        if (loaderPlugin) {
          resolve(_this2.loaderPlugins[loaderPlugin].fetch(path));
        } else {
          try {
            var result = __webpack_require__(path);
            resolve(result);
            return;
          } catch (_) {}
          require.ensure([], function (require) {
            var result = require('aurelia-loader-context/' + path);
            if (typeof result === 'function') {
              result(function (res) {
                return resolve(res);
              });
            } else {
              resolve(result);
            }
          }, 'app');
        }
      } catch (e) {
        reject(e);
      }
    }));
  };

[niieani]

Thank you. I'll try to get this fixed soon.

[patroza]

@niieani thanks a lot. I had the issue before with CSS files since the RC, and since the Stable it happens on all files, somehow that's a relief :) I also wonder if this might've been the root cause of my other issue before (can't call call of undefined when running with the multi chunks)

[niieani]

Good that we're tracking this then. Could you give me a a short snippet of how I could reproduce this in testing?

[niieani]

A release with this in will be out shortly.

[patroza]

@niieani thanks, however now this one is back :(

https://github.com/aurelia/skeleton-navigation/issues/613#issuecomment-236354161

(I dont know if it ever was really away, as it just appears and disappears from compile to compile :))