Turbopack dynamic import problem

Unanswered

Asian black bear posted this in #help-forum

Asian black bearOP

2023-10-06T14:00:55.000Z

Hey, I have a problem with importing files in for loop using Turbopack.
As suggested in the github issue template, it's better to clarify it before populating a new one.

Please consider this code:

const files = await fs.readdir(filesPath);
for (const file of files) {
   const newsletter = await import(`../newsletters/${file}`);
   console.log({name: newsletter.Name, path: `../newsletters/${file}`})
}

Essentially, it loads a module, checks forName and shows path and name;

So, with --turbo I get next output:

{ name: 'Launch 2.0', path: '../newsletters/launch2-0.tsx' }
{ name: 'Launch 2.0', path: '../newsletters/patch4.0.tsx' }
{ name: 'Launch 2.0', path: '../newsletters/patch4.1.tsx' }

And without I receive correct names

{ name: 'Launch 2.0', path: '../newsletters/launch2-0.tsx' }
{ name: 'Patch 4.0', path: '../newsletters/patch4.0.tsx' }
{ name: 'Patch 4.1', path: '../newsletters/patch4.1.tsx' }

So it seems to cache it or something?..

10 Replies

Clown

2023-10-06T14:05:08.000Z

Create a issue on github. Turbo pack is still not stable and only available experimentally so these things can definitely happen.

Asian black bearOP

2023-10-06T14:10:07.000Z

Okay, thanks!
Maybe also I can ask you about another inconsistent thing between turbopack and webpack?

I use App folder, and there is a page, that imports dynamically a module, using async import. With turbopack, changes in this module trigger hot-reloading of the page, but without don't.

export default async function Page ({params}: PreviewProps) {
  const {slug, project} = params;
  const { default: MyComponent, Name = null } = await import(`../${project}/${slug}`);
  return <MyComponent/>
}