Skip to content
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.

Sign up for GitHub

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

Propagate errors while resolving lazy() default export #21639

Closed
wants to merge 6 commits into from
Closed

Propagate errors while resolving lazy() default export #21639

Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
e76ba10
Propagate errors while resolving lazy() default export
gaearon Jun 7, 2021
acaefca
Revert "Propagate errors while resolving lazy() default export"
gaearon Jun 7, 2021
8afbe09
Use try/catch instead
gaearon Jun 7, 2021
509b649
Add a DEV warning for common case
gaearon Jun 7, 2021
9dac2c8
Move out onFulfill code into a named function
gaearon Jun 7, 2021
b98e967
Don't throw undefined
gaearon Jun 7, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
100 changes: 69 additions & 31 deletions packages/react/src/ReactLazy.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,44 +49,82 @@ export type LazyComponent<T, P> = {
};

function lazyInitializer<T>(payload: Payload<T>): T {
function onFulfill(moduleObject) {
if (payload._status === Pending) {
let defaultExport;
if (__DEV__) {
if (moduleObject === undefined) {
console.error(
'lazy: Expected the result of a dynamic import() call. ' +
'Instead received: undefined.\n\nYour code should look like: \n ' +
// Break up imports to avoid accidentally parsing them as dependencies.
'const MyComponent = lazy(() => imp' +
"ort('./MyComponent'))\n\n" +
'Did you accidentally put curly braces around the import?',
);
}
}
try {
defaultExport = moduleObject.default;
} catch (e) {
Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is for a lazy(async () => { import(...) }) case.

onReject(e);
return;
}
if (__DEV__) {
if (defaultExport === undefined) {
console.error(
'lazy: Expected the result of a dynamic import() call. ' +
'Instead received: %s\n\nYour code should look like: \n ' +
// Break up imports to avoid accidentally parsing them as dependencies.
'const MyComponent = lazy(() => imp' +
"ort('./MyComponent'))",
moduleObject,
);
}
}
// Transition to the next state.
const resolved: ResolvedPayload<T> = (payload: any);
resolved._status = Resolved;
resolved._result = defaultExport;
}
}

function onReject(error) {
if (payload._status === Pending) {
// Transition to the next state.
const rejected: RejectedPayload = (payload: any);
rejected._status = Rejected;
rejected._result = error;
}
}

if (payload._status === Uninitialized) {
const ctor = payload._result;
const thenable = ctor();
if (__DEV__) {
if (thenable === undefined) {
console.error(
'lazy: Expected the result of a dynamic import() call. ' +
'Instead received: undefined.\n\nYour code should look like: \n ' +
// Break up imports to avoid accidentally parsing them as dependencies.
'const MyComponent = lazy(() => imp' +
"ort('./MyComponent'))\n\n" +
'Did you accidentally put curly braces around the import?',
);
}
}
// Transition to the next state.
const pending: PendingPayload = (payload: any);
pending._status = Pending;
pending._result = thenable;
thenable.then(
moduleObject => {
if (payload._status === Pending) {
const defaultExport = moduleObject.default;
if (__DEV__) {
if (defaultExport === undefined) {
console.error(
'lazy: Expected the result of a dynamic import() call. ' +
'Instead received: %s\n\nYour code should look like: \n ' +
// Break up imports to avoid accidentally parsing them as dependencies.
'const MyComponent = lazy(() => imp' +
"ort('./MyComponent'))",
moduleObject,
);
}
}
// Transition to the next state.
const resolved: ResolvedPayload<T> = (payload: any);
resolved._status = Resolved;
resolved._result = defaultExport;
}
},
error => {
if (payload._status === Pending) {
// Transition to the next state.
const rejected: RejectedPayload = (payload: any);
rejected._status = Rejected;
rejected._result = error;
}
},
);
try {
thenable.then(onFulfill, onReject);
} catch (e) {
Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is for a lazy(() => { import(...) }) case.

// If then() itself throws for some reason,
// or if this is not a thenable, record that
// so we don't keep throwing undefined later.
onReject(e);
}
}
if (payload._status === Resolved) {
return payload._result;
Expand Down