1

I'm trying to create a helper method to lazily import modules with a delay in react.

This first version, when I have the path in the import fixed, it works:

import { lazy } from 'react';

export function lazyLoaderWithDealy() {
  return lazy(async () => {
    const [moduleExports] = await Promise.all([
      import('components/SchemaEditor'),
      new Promise(resolve => setTimeout(resolve, 300))
    ]);
    return moduleExports;
  });
}

But in this second example, when the path to the module comes from a variable, it doesn't work, any idea why?

import { lazy } from 'react';

export function lazyLoaderWithDealy(path) {
  return lazy(async () => {
    const [moduleExports] = await Promise.all([
      import(path),
      new Promise(resolve => setTimeout(resolve, 300))
    ]);
    return moduleExports;
  });
}
Vencovsky
  • 28,550
  • 17
  • 109
  • 176
Nelson Larios
  • 312
  • 3
  • 14

2 Answers2

2

Instead of passing the path you should passe the entire import.

import { lazy } from 'react';

export function lazyLoaderWithDealy(importPromise) {
  return lazy(async () => {
    const [moduleExports] = await Promise.all([
      importPromise,
      new Promise(resolve => setTimeout(resolve, 300))
    ]);
    return moduleExports;
  });
}

// ...

lazyLoaderWithDealy(import('components/SchemaEditor'))

You should take a look to this answer. You can't do a dynamic import like import(path) because webpack won't be able to know what should be bundle up, if you pass something like that, webpack you need to bundle up your hole application (which you don't want and can't). If you pass something like import('components/' + path), webpack will bundle up everything in components, which works, but is also bad.

If you can pass the hole string to the import, it will be better for the lazyload, if you can't, you need at least to pass some folder + path.

Vencovsky
  • 28,550
  • 17
  • 109
  • 176
  • This works pretty nicely. Very cool. Important to note that the `import` statement must have a string prefix like `import('components/' + path)` for this to work. So if `path` was a string variable containing the path, this `import(path)`, won't work. Still a great solution. As pointed out [here](https://github.com/webpack/webpack/issues/6680) – Anjan Biswas Jun 04 '22 at 03:42
0

Check the following link if you are getting "Error: Cannot find module ./PATH" error. https://github.com/webpack/webpack/issues/6680. This was the issue in my case.

ilken
  • 46
  • 3