Errors in dynamic imports are silenced

[vjpr]

• I have searched the issues of this repository and believe that this is not a duplicate.

Notice how promise.then() is called without a .catch().

https://github.com/zeit/next.js/blob/e093441bad588e98765a05df90f76f75283eda07/lib/dynamic.js#L56-L74

In my code I have this line:

const Foo = dynamic(import('./test'), {ssr: false})

Which transpiles to this via the handle-import babel plugin:

var Foo = (0,
_dynamic.default)(new (__webpack_require__("../../../../../../../../../dev-live/next.js/dist/lib/dynamic.js").SameLoopPromise)(function(resolve, reject) {
  var weakId = /*require.resolve*/
  ("./pages/test.js");

  try {
    var weakModule = __webpack_require__(weakId);

    return resolve(weakModule);
  } catch (err) {}

  __webpack_require__.e /* require.ensure */
  (5).then((function(require) {
    try {
      var m = __webpack_require__("./pages/test.js");

      m.__webpackChunkName = 'app_pages_test_57cb2b7894b1a841c4b5aa44c2077b83';
      resolve(m);
    } catch (error) {
      reject(error);
    }
  }
  ).bind(null, __webpack_require__)).catch(__webpack_require__.oe);
}
), {
  ssr: false
});

Which cleaned up looks like this:

dynamicComponent(new SameLoopPromise(cb), {ssr: false})

// NB: Not sure what 5 corresponds to...
cb = function(resolve, reject) {
  require.ensure(5).then(require => {
    try {
      require('./pages/test.js')
      resolve(m)
    } catch (error) {
      reject(error)
    }
  }).catch(__webpack_require__.oe)
}

Now, if our require throws an error (e.g. ReferenceError):

• reject is called, but in dynamicComponent#loadComponent() as seen above, there is nothing to catch it.
• Also, the .catch(__webpack_require__.oe) after require.ensure is never called either because our require is wrapped in its own try catch.

Solution

Add }).catch(e => console.error(e)) at the end of dynamicComponent#loadComponent().

Your Environment

Tech	Version
next	6.0.0
node	8.1.2
OS	macOS
browser	Chrome
etc

[vjpr]

Closing in favor of #3897