-
-
Notifications
You must be signed in to change notification settings - Fork 454
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Dynamic Import makes NextJS development server very slow #1576
Comments
This is happening to me as well, and this lag may be connected to my icons "flashing" because it takes a bit longer to load, which is not an ideal UX! Seems to be on Production and Development environments. |
according to the next.js document, it may be related to this: |
You linked the "Pages" directory for Next.js <v13, and not sure if this applies to the |
i have the same issue 🫤 when i run in production environment does not slow, but the icons are flashing when the page re rendering |
Same issue here ✋ |
I'm facing the same issue. |
Any one trying the new exemple I make for using it with NextJS? Please try and send me feedback, I will try to help you guys. For me the new implementation works like a charm. |
I had an infinite loading issue with dynamic imports |
hello, how do I use it? because I save the icon name in the database, is there an example? |
Sure it worked fine and removed the lag. But any idea on how to remove the unnecessary reloading of the icons on every page redirect? |
Sorry for the late reply, I was a bit busy with other issues and PRs. So you maybe have 12 icons in you database this object still imports all 1400+ icons on build time. But will be dynamically loaded. So there is no easy fix. Also the suggestion and docs change from @morrisseybr is not really a fix, this is just moving everything from import { LucideProps, icons } from 'lucide-react';
interface IconProps extends LucideProps {
name: keyof typeof icons;
}
const Icon = ({ name, ...props }: IconProps) => {
const LucideIcon = icons[name];
return <LucideIcon {...props} />;
};
export default Icon; Note: This only recommended when using the app router with React Server components, otherwise all icons will be shipped to the frontend as well. So we could create a separate sections in the docs about the app router and pages router. |
So what if one wants to use Lucide icons using the app router with React client components (with a component similar to the one you shared)? |
I use like this: https://lucide.dev/guide/packages/lucide-react#icon-component-example |
Isn't that the same implementation @ericfennis shared? He said:
|
Here is my client component, and works fine
|
@weiying-chen Indeed. |
Just saved me a lot of stress with this solution. thank you |
Hello, any news on this problem? |
Hey, I'm also experiencing this, it leaves a huge print on build size... Is there any other alternative? @ericfennis |
One of the most significant issues is that they are trying to work with how react.js and SVG collide. SVGs are pretty light and, therefore, have traditionally loaded towards the end of DOM, so far down that hydration errors pop up unless you make them work with a useEffect and isLoaded solution. |
Package
Version
0.279.0
Browser
Operating system
Description
I'm attempting to utilize the dynamicIconImports object to create a unified component for rendering icons based on an icon name prop in NextJS 13 with the app router. I followed the example provided in the documentation, but it significantly slows down my development server. The time it takes for the initial compilation has increased from ~8 seconds to ~22 seconds, and the time for hot reloading even minor changes (such as a simple text modification) has gone from ~800ms to ~12 seconds.
I've tried changing the component from server-side to client-side rendering. I've also attempted to add the library to the transpilePackages list in the next.config.js file. I even experimented with using the dynamicIconImports object with a fixed name (ignoring the name prop), but none of these approaches seemed to help.
My solution to the problem was to rewrite the use of the next/dynamic function for importing the 'lucide-react' module and utilize the promise result to obtain the necessary icon. This restored the development server to its normal performance.
I believe that the way the dynamicIconImports feature is implemented causes the NextJS development server to read and process all the imports when it shouldn't be doing so during compilation.
I am planning to submit a pull request to enhance the consumption of Lucide.icons by introducing a simple IconsName type. Additionally, I will revise the example of dynamic usage within the NextJS environment to eliminate the use of the dynamicIconImports object.
Would anyone like to contribute to this issue I'm addressing? Your contributions would be greatly appreciated. Thank you!
Steps to reproduce
Checklist
The text was updated successfully, but these errors were encountered: