Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Posted by chazel
chazel
Courses Plus Student 6,961 Points

How do I return an object when using dynamic imports in Webpack?

Hi, I've tried so many variations on how to "return" a variable from the promise/async function, but I have had no luck. Do you have any idea how to achieve what I want below?

If I take the "async" out of the function below and move the imports (without away and so on) to the top of the JS file, the code works perfectly: a DataTable object is returned and its methods are accessible. How do I get the dynamic import version show below to return the object like it does in the standard, non-dynamic version?

Dynamic Import Version

MODULE:

async function dt(selector, options) {
  const [{ default: DataTable }] = ([
    await import(
      'datatables.net-dt'
      /* webpackChunkName: "datatables" */
    ),
    await import(
      'datatables.net-responsive-dt'
      /* webpackChunkName: "datatables" */
    )
  ])

  return new DataTable(selector, options);
}

window.dt = dt;

MAIN:

let table = dt('#table', { responsive: true });
console.log(table); // Promise {<pending>}

Standard, non-dynamic Import Version

MODULE:

import DataTable from 'datatables.net-dt';
import 'datatables.net-responsive-dt';

function dt(selector, options) {
  return new DataTable(selector, options);
}

window.dt = dt;

MAIN:

let table = dt('#table', { responsive: true });
console.log(table); // Object with expandable tree of methods <== This is what I want returned.

2 Answers

Steven Parker
Steven Parker
240,995 Points
Steven Parker
Steven Parker
240,995 Points

An async function does not pass back what's in a return statement, it passes back a promise (exactly what you show). And since dt is async, the main code doesn't wait for it and the promise shows "pending". Anything in a return statement only becomes available on resolution of the promise.

So in the async version, you need to wait on the resolution to get the table:

MAIN.js 
dt('#table', { responsive: true }).then(response => {
  let table = response;
  console.log(table);
});

Unless there's other things you want to do while that dynamic loading is going on, you might want to stick with the serial code version, It's much more compact and easier to maintain.

Steven Parker
Steven Parker
240,995 Points
Steven Parker
Steven Parker
240,995 Points

Inside the "then" area is where you can be confident that the promise has been resolved. The main code will continue to run simultaneously with the async function, so even if you make the variable global it will not have the correct value yet.

The fact that your main code is dependent on the final result makes a strong case for using the simpler serial function and not making it async.

chazel
PLUS
chazel
Courses Plus Student 6,961 Points
chazel
chazel
Courses Plus Student 6,961 Points

I've tried your suggestion, and it works only inside the ".then()" area, but I need the table passed outside the dt function so that additional methods that are created by "new DataTable" can be used. For example, here's a broader view (note that DataTables can only initialize itself once; otherwise, it will throw an error if you run it again on the same selector).

let table = dt('#table', { responsive: true }.then(response => { return response });
// I even tried this:
// let table = null;
// dt('#table', { responsive: true }.then(response => { table = response });
console.log(table);

// later functionality needed
table.on('order.dt', () => console.log('Order')); // yields Uncaught TypeError: e.on is not a function (e is minified via webpack)