Next.js Discord

Discord Forum

migration from vite to next.js

Unanswered
New Guinea Freshwater Crocodile posted this in #help-forum
Open in Discord
New Guinea Freshwater CrocodileOP
I'm migrating from vite application to next.js one of the issues I found that I'm using: import.meta.glob to get modules dynamically is there alternatives in next.js? To get similar result:
const modules = import.meta.glob('./dir/*.js')

12 Replies

Rose-breasted Grosbeak
closest thing (as per my understanding) is dynamic imports.
@Rose-breasted Grosbeak closest thing (as per my understanding) is dynamic imports.
New Guinea Freshwater CrocodileOP
Thank you, I found this in webpack but not sure if it works in next.js or no:
require.context(
  directory,
  (useSubdirectories = true),
  (regExp = /^\.\/.*$/),
  (mode = 'sync')
);
Rose-breasted Grosbeak
What are you trying to do with dynamic modules?
New Guinea Freshwater CrocodileOP
We loading plugins dynamically with wildcard from entire project and organizing it by name, not the best approach but we found it very useful in our use case
something like this:
const plugins = import.meta.glob('/src/**/*.plugin.ts')
@New Guinea Freshwater Crocodile We loading plugins dynamically with wildcard from entire project and organizing it by name, not the best approach but we found it very useful in our use case
Rose-breasted Grosbeak
at runtime? dynamic imports is the way to go.

for building..? turbopack is experimental, no point of trying. I don't even want to deal with webpack
@Rose-breasted Grosbeak at runtime? dynamic imports is the way to go. for building..? turbopack is experimental, no point of trying. I don't even want to deal with webpack
New Guinea Freshwater CrocodileOP
Interesting, thank you do you thing fs in server side can be also an alternative, to get the paths? Or this not recommended approach?
Rose-breasted Grosbeak
Definitely not, it'll read the file as text/raw data. Building will change its name anyway
@Rose-breasted Grosbeak Definitely not, it'll read the file as text/raw data. Building will change its name anyway
New Guinea Freshwater CrocodileOP
Make sense, the dynamic import works with unknown variables in next? so for example variable comes outside the module? like:
 dynamic(
  () => import(`../${variableOutsideModule}`),
);
Rose-breasted Grosbeak
no, I don't think so. Try it out
If you're using app router (which you should), you might need to disable ssr where required.

See the docs