-
Notifications
You must be signed in to change notification settings - Fork 45.9k
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
Allow for named imports in React.lazy #14603
Comments
Thanks but it's an intentional design decision to not currently allow named imports. We may reconsider it later. You can find the relevant discussion in reactjs/rfcs#64. |
This may seem stupid but I expected the feature to have the following syntax: React.lazy('./MyComponent'); No more extra function or |
It's not working, but I have tried this ->
It works fine! |
This makes SFC components pretty annoying to use... |
Summary of why named exports are not baked in and a workaround can be found in reactjs/rfcs#64 (comment) |
Thanks so much for not supporting this and making things harder on me. Probably time to reconsider this issue and the comment linked to in the previous comment. |
Working with default exports on Function Components is very inconvenient. I hope the React team can revisit this soon. IMO function lazyImport<
T extends React.ComponentType<any>,
I extends { [K2 in K]: T },
K extends keyof I,
>(
factory: () => Promise<I>,
name: K
): I {
return Object.create({
[name]: React.lazy(() => factory().then(module => ({ default: module[name] })))
});
}
// Usage
const { Home } = lazyImport(() => import("./Home.component.tsx"), "Home"); PS: The |
@JoseLion you could also use const { Component1, Component2 } = lazily(() => import('./Components')) Proxy:
You could try it out here https://codesandbox.io/s/react-lazily-example-p7hyj |
Seriously? Why not just fix the damn thing! Humans are too content with workarounds. Try to actually fix something and maybe the world won't be such a pile of trash. |
Any update on that, totally agree with @dailytabs I don't want to rely on a third party library for this. |
According to the React code splitting docs:
|
I get an error when I use React.lazy with sass, for example :
BUT! If I change this code for this example :
not working. |
Do you want to request a feature or report a bug?
Feature
What is the current behavior?
Currently, React.lazy only accepts an anonymous function that returns a dynamic import object.
readLazyComponentType
then pulls the default export off of that import object. This does not allow for importing named imports from a module.The official workaround, according to the React docs:
Another, more concise workaround:
What is the proposed behavior?
I'd be willing to submit a PR that optionally accepts named imports but defaults to importing the default import. It would look like:
This will also require some updates to the docs.
Let me know your thoughts before I start...
Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React?
react@16.7.0, Chrome 71, macOS 10.14
cc @acdlite @gaearon
The text was updated successfully, but these errors were encountered: