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

fix(runtime): always throw if component can not be loaded #5762

Merged
merged 1 commit into from
May 15, 2024
Merged

fix(runtime): always throw if component can not be loaded #5762

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
2 changes: 1 addition & 1 deletion src/client/client-load-module.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@ export const loadModule = (
cmpMeta: d.ComponentRuntimeMeta,
hostRef: d.HostRef,
hmrVersionId?: string,
): Promise<d.ComponentConstructor> | d.ComponentConstructor => {
): Promise<d.ComponentConstructor | undefined> | d.ComponentConstructor => {
// loadModuleImport
const exportName = cmpMeta.$tagName$.replace(/-/g, '_');
const bundleId = cmpMeta.$lazyBundleId$;
Expand Down
8 changes: 6 additions & 2 deletions src/hydrate/platform/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ let customError: d.ErrorHandler;

export const cmpModules = new Map<string, { [exportName: string]: d.ComponentConstructor }>();

const getModule = (tagName: string): d.ComponentConstructor => {
const getModule = (tagName: string): d.ComponentConstructor | null => {
if (typeof tagName === 'string') {
tagName = tagName.toLowerCase();
const cmpModule = cmpModules.get(tagName);
Expand All @@ -17,7 +17,11 @@ const getModule = (tagName: string): d.ComponentConstructor => {
return null;
};

export const loadModule = (cmpMeta: d.ComponentRuntimeMeta, _hostRef: d.HostRef, _hmrVersionId?: string): any => {
export const loadModule = (
cmpMeta: d.ComponentRuntimeMeta,
_hostRef: d.HostRef,
_hmrVersionId?: string,
): d.ComponentConstructor | null => {
return getModule(cmpMeta.$tagName$);
};

Expand Down
20 changes: 13 additions & 7 deletions src/runtime/initialize-component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ export const initializeComponent = async (
cmpMeta: d.ComponentRuntimeMeta,
hmrVersionId?: string,
) => {
let Cstr: any;
let Cstr: d.ComponentConstructor | undefined;
// initializeComponent
if ((hostRef.$flags$ & HOST_FLAGS.hasInitializedComponent) === 0) {
// Let the runtime know that the component has been initialized
Expand All @@ -37,17 +37,19 @@ export const initializeComponent = async (
// lazy loaded components
// request the component's implementation to be
// wired up with the host element
Cstr = loadModule(cmpMeta, hostRef, hmrVersionId);
if (Cstr.then) {
const CstrImport = loadModule(cmpMeta, hostRef, hmrVersionId);
if (CstrImport && 'then' in CstrImport) {
// Await creates a micro-task avoid if possible
const endLoad = uniqueTime(
`st:load:${cmpMeta.$tagName$}:${hostRef.$modeName$}`,
`[Stencil] Load module for <${cmpMeta.$tagName$}>`,
);
Cstr = await Cstr;
Cstr = await CstrImport;
endLoad();
} else {
Cstr = CstrImport as d.ComponentConstructor | undefined;
}
if ((BUILD.isDev || BUILD.isDebug) && !Cstr) {
if (!Cstr) {
throw new Error(`Constructor for "${cmpMeta.$tagName$}#${hostRef.$modeName$}" was not found`);
}
if (BUILD.member && !Cstr.isProxied) {
Expand Down Expand Up @@ -96,12 +98,16 @@ export const initializeComponent = async (
customElements.whenDefined(cmpMeta.$tagName$).then(() => (hostRef.$flags$ |= HOST_FLAGS.isWatchReady));
}

if (BUILD.style && Cstr.style) {
if (BUILD.style && Cstr && Cstr.style) {
// this component has styles but we haven't registered them yet
let style = Cstr.style;

if (BUILD.mode && typeof style !== 'string') {
style = style[(hostRef.$modeName$ = computeMode(elm))];
hostRef.$modeName$ = computeMode(elm) as string | undefined;
if (hostRef.$modeName$) {
style = style[hostRef.$modeName$];
}

if (BUILD.hydrateServerSide && hostRef.$modeName$) {
elm.setAttribute('s-mode', hostRef.$modeName$);
}
Expand Down