[Question] Dynamic imports

[zaydek]

I’m experimenting with using esbuild for a page-based router for React (work here: https://github.com/zaydek/page-based-router) and I just ran into the warning about dynamic imports using esbuild:

• warning: This dynamic import will not be bundled because the argument is not a string literal (surround with a try/catch to silence this warning)
• warning: This call to "require" will not be bundled because the argument is not a string literal (surround with a try/catch to silence this warning)

I did search and found these: https://github.com/evanw/esbuild/issues?q=This+call+to+%22require%22+will+not+be+bundled+because+the+argument+is+not+a+string+literal but I didn’t get an answer I was looking for.

When building something that requires dynamic imports, would it be recommended that instead I build a JS / TS file to disk that uses static imports and then use esbuild on that file?

Step 1: Build the following file from dynamic paths ["A", "B"]:

import A from "./A"
import B from "./B"

// ...

Step 2: Run esbuild on this generated file.

Or this there another way to resolve dynamic imports using esbuild? I understand the intention to not resolve dynamic imports but I also don’t know what to do instead, other than the previous two steps.

Could dynamic imports be resolved using a custom plugin?

[nettybun]

Are you asking for something like a resolve() call that uses esbuild's resolver to return a path to a module that is aware of node_modules and tsconfig path settings?

As a router I imagine you want the import to not be bundled.

[ggoodman]

Are you asking for something like a resolve() call that uses esbuild's resolver to return a path to a module that is aware of node_modules and tsconfig path settings?

As a router I imagine you want the import to not be bundled.

Check out #641 @heyheyhello.

[zaydek]

Hey @heyheyhello. I don’t have experience with resolve() (is that different from a promise resolve?). Edit: Looks like this is an idiom for resolving modules in Rollup?

I’ll try to provide some more context: For the router I’m working on, I would like the router to be invisible to the end-user. This would be different from routers like React Router and more similar to routers like Gatsby and Next.

The user creates pages page-a.js, page-b.js. My router would then emit files out/page-a.html, out/page-b.html, and out/spa.js where spa.js is the runtime for the whole app / hydrates page-a.html, page-b.html.

@ggoodman Is what you’re talking about similar to what I’m trying to achieve but is internal only right now?

[nettybun]

@zaydek it has not been implemented in esbuild. or, yes, it's internal in Go but not JS.

@ggoodman thanks that's exactly what I was talking about

[zaydek]

Got it. Thank you!

I’ll try my naive solution for now (writing a file to disk and running esbuild on that) and hopefully in the future I can skip this step and use esbuild without an intermediary step.

I’ll leave this open to give Evan a chance to see this. Otherwise, I think this can be closed in general.

[evanw]

Closing per the conversation above. Glad you were able to find a workaround.

[zaydek]

Nevermind, still figuring this out.