这是indexloc提供的服务,不要输入任何密码
Skip to content

Dynamic imports in NextJS project in Turbo monorepo dont transpile correctly #318

@osdiab

Description

@osdiab

What version of Turborepo are you using?

1.0.13

Describe the Bug

I'm not sure where to put this issue, as it might have something to do with several different packages (yarn workspaces, next-transpile-modules, turbo, country-flag-icons) but I ran into the issue when trying out Turborepo with NextJS, so i'm putting it here. Maybe at a minimum can get routed to the right place this way. (Cross posted it to NextJS vercel/next.js#32559)

On a Turborepo monorepo, if I try to use a dynamic import with a specific library my site depends on, country-flag-icons, NextJS tries to import a typescript definition file and then predictably fails. If i import it directly without the lazy loading, it works, and my project without the monorepo structure also has it working, so i guess it might have something to do with the yarn workspaces setup.

Expected Behavior

It doesn't try to load a definition file and instead tries to load the actual code.

There's also a separate issue i experienced which might be related, which is that for the amplitude-js library, i was also doing a dynamic import to lazy-load that library like so:

const amplitude = await import("amplitude-js");
amplitude.getInstance(); // ...

without the monorepo, this works just fine, but with the monorepo, i need to access the default export explicitly or else it fails, saying getInstance doesn't exist:

const amplitude = (await import("amplitude-js")).default;
amplitude.getInstance(); // ...

not sure if that's related but seems theres something wonky happening with dynamic imports, both with and without the next/dynamic component.

To Reproduce

Repro repo: https://github.com/osdiab/repro-monorepo-import-definition

  1. create a turbo repo with npx create-turbo@latest
  2. add country-flag-icons as a dep of the app
  3. use next/dynamic to lazy load a flag from country-flag-icons
  4. Run yarn dev and look at the site, it fails and says it's trying to load a typescript definition file

note that it worked A) when i just used NextJS without turborepo and B) if i don't load it lazily

Metadata

Metadata

Assignees

No one assigned

    Labels

    kind: bugSomething isn't working

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions