Need Help understanding lazy loading in nextjs #65047
Replies: 3 comments
-
|
It seems like you're encountering an issue with lazy loading a named export from a client component in a server component using Next.js. The error message suggests that the bundler cannot find the module in the React Client Manifest. Here are a few things you might want to check or try: Verify the Path=> Double-check the path to the component you're trying to import. Ensure that the path is correct and matches the actual location of the component. |
Beta Was this translation helpful? Give feedback.
-
|
Ok, I will check.
…On Thu, Apr 25, 2024, 3:55 PM shanakasp ***@***.***> wrote:
It seems like you're encountering an issue with lazy loading a named
export from a client component in a server component using Next.js. The
error message suggests that the bundler cannot find the module in the React
Client Manifest.
Here are a few things you might want to check or try:
Verify the Path=> Double-check the path to the component you're trying to
import. Ensure that the path is correct and matches the actual location of
the component.
Check React Client Manifest=> Ensure that the component you're trying to
import is correctly registered in the React Client Manifest. Sometimes, if
the component is not properly registered, it can lead to such errors.
Named Export=> Confirm that the component MyDenonyms is indeed exported as
a named export from CreatePosts.tsx. The error message suggests that it's
trying to find MyDenonyms#default, which indicates that it might be
treating it as a default export rather than a named export.
Try Default Export=> If possible, try exporting MyDenonyms as the default
export from CreatePosts.tsx and see if that resolves the issue.
Check Next.js Version=> Ensure that you're using a compatible version of
Next.js. Sometimes, issues like this can be related to specific versions or
configurations.
File Extensions=> Make sure that the file extensions in your import paths
are correct (tsx for TypeScript files). Incorrect file extensions can
sometimes cause issues with module resolution.
Community Support=> If none of the above solutions work, consider reaching
out to the Next.js community or checking their GitHub repository for any
reported issues or solutions related to lazy loading named exports.
By checking these points, you might be able to identify and resolve the
issue you're facing with lazy loading the named export in your Next.js
application.
—
Reply to this email directly, view it on GitHub
<#65047 (comment)>,
or unsubscribe
<https://github.com/notifications/unsubscribe-auth/AR2NQOLQ3GTDC7SUU5MPSATY7EKOHAVCNFSM6AAAAABGY6PHWWVHI2DSMVQWIX3LMV43SRDJONRXK43TNFXW4Q3PNVWWK3TUHM4TEMRWGQYTG>
.
You are receiving this because you authored the thread.Message ID:
***@***.***>
|
Beta Was this translation helpful? Give feedback.
-
|
Sorry to be a pest but I also have another issue, when I run the lighthouse
test on my nextjs app the performance is really dragging ok 73 % there are
some issues that I really don't know how to directly handle, like
preloading an image from tbe public folder as it's the lcp, but the issue
is that, the image gets cached and so even when i add the link preload tag
the cached version still gets loaded, and this only solution i could use
was to copy the link to the cached image and preload it instead the issue
with this in production is that cache key changes is there a way I can
programmatically preload the image without the cached ine getting in the
way, or get the cached link dynamically and prefetch it, the other issue I
have is still on performance, there is a lot of unused js and css where
these are coming from resources like layout.css or global-error.js,
layout.js
Please how can I reduce all these and optimize performance I am already
implementing code splitting
On Fri, Apr 26, 2024, 11:10 AM SOLOMON HEMI ***@***.***>
wrote:
… Ok, I will check.
On Thu, Apr 25, 2024, 3:55 PM shanakasp ***@***.***> wrote:
> It seems like you're encountering an issue with lazy loading a named
> export from a client component in a server component using Next.js. The
> error message suggests that the bundler cannot find the module in the React
> Client Manifest.
>
> Here are a few things you might want to check or try:
>
> Verify the Path=> Double-check the path to the component you're trying to
> import. Ensure that the path is correct and matches the actual location of
> the component.
> Check React Client Manifest=> Ensure that the component you're trying to
> import is correctly registered in the React Client Manifest. Sometimes, if
> the component is not properly registered, it can lead to such errors.
> Named Export=> Confirm that the component MyDenonyms is indeed exported
> as a named export from CreatePosts.tsx. The error message suggests that
> it's trying to find MyDenonyms#default, which indicates that it might be
> treating it as a default export rather than a named export.
> Try Default Export=> If possible, try exporting MyDenonyms as the default
> export from CreatePosts.tsx and see if that resolves the issue.
> Check Next.js Version=> Ensure that you're using a compatible version of
> Next.js. Sometimes, issues like this can be related to specific versions or
> configurations.
> File Extensions=> Make sure that the file extensions in your import paths
> are correct (tsx for TypeScript files). Incorrect file extensions can
> sometimes cause issues with module resolution.
> Community Support=> If none of the above solutions work, consider
> reaching out to the Next.js community or checking their GitHub repository
> for any reported issues or solutions related to lazy loading named exports.
> By checking these points, you might be able to identify and resolve the
> issue you're facing with lazy loading the named export in your Next.js
> application.
>
> —
> Reply to this email directly, view it on GitHub
> <#65047 (comment)>,
> or unsubscribe
> <https://github.com/notifications/unsubscribe-auth/AR2NQOLQ3GTDC7SUU5MPSATY7EKOHAVCNFSM6AAAAABGY6PHWWVHI2DSMVQWIX3LMV43SRDJONRXK43TNFXW4Q3PNVWWK3TUHM4TEMRWGQYTG>
> .
> You are receiving this because you authored the thread.Message ID:
> ***@***.***>
>
|
Beta Was this translation helpful? Give feedback.
-
Summary
Hi, so i read the lazy loading docs from the nextjs site and when i tried the named import of a client component as so
into a server component, but I get this error Error: Could not find the module "/home/uriel/projects/aa/denonymous/src/FE/components/subcomponents/CreatePosts.tsx#MyDenonyms#default" in the React Client Manifest. This is probably a bug in the React Server Components bundler. and the component is exported under that name, there is no issue with the export as i was using the normal import and it worked just fine
Additional information
No response
Example
No response
Beta Was this translation helpful? Give feedback.
All reactions