0

I am attempting to utilize the new JavaScript dynamic import syntax to load ES6 modules. Each module exports a single class. However, I cannot access the default exports of my modules. In the inspector I can see that my module was imported and contains the expected class, however cannot be accessed using the default attribute.

I have attempted to run my code on Firefox 67 and Chrome 74, which both produced the same results. I have also tried using static imports which work correctly with some minor adaptation to my code.

My code attempts to import three modules: home, visitors and statistics. Each contains a class named HomeView, VisitorView and StatisticsView respectively.

const module_names = [
  'home',
  'visitor',
  'statistics',
];

const module_promises = 
  module_names.map(name => import(`./modules/${name}.js`));

const module_instances = Promise.all(module_promises)
  .then(module => new module.default());

However this results in the message "TypeError: module.default is not a constructor". I attempted to use it as a function, but similar error. Finally I tried printing the default attribute and found it to be undefined.

const module_instances = Promise.all(module_promises)
  .then(module => console.log(module.default)); // undefined

I was expecting to create a list of instantiated class objects. Provided that inspecting the log of my module_promises variable (screenshot below) shows the proper class stored under the default attribute, I cannot see what the problem might be.

Chrome inspector screenshot

tedm1106
  • 127
  • 1
  • 10
  • Can you post the actual module code? It's really hard to tell what's wrong from just this. – Pointy Apr 13 '19 at 16:17
  • Note that [`Promise.all`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/all)'s `then` is going to receive the results of all promises as an array, so `module` is an array of three modules... – Heretic Monkey Apr 13 '19 at 16:19

0 Answers0