[React] Improve error handling in resolveReactComponent

[teklakct]

Q	A
Bug fix?	no
New feature?	no
Issues
License	MIT

WHAT

Improve error handling and readability in window.resolveReactComponent function

• Enhance error messages for clarity:
  • Indicate when a module exists but lacks a default export.
  • (still) List available controllers when a specified controller does not exist.

With those changes, when resolving a module with no default export, an error message with a hint will be shown:

React controller "${name}" could not be resolved. Ensure the module exports the controller as default.

WHY

I found that when someone creates a module without a default export then the error message is quite confusing.
For example:

// NoDefaultExportComponent.jsx
export const SomeRandomName = () => {
    return <div>Hello</div>;
}

Whenever there will be an element like this

<div data-controller="NoDefaultExportComponent">
   ...
</div>

An error like below in console appear:

Error connecting controller

React controller "NoDefaultExportComponent" does not exist. Possible values: SomeComponent, AnotherComponent, NoDefaultExportComponent

Which is not exactly true. The module NoDefaultExportComponent was found but there is no required default export.

[teklakct]

Alternatively function importAllReactComponents may omit every module without default export. Something like this

    const importAllReactComponents = (r: __WebpackModuleApi.RequireContext) => {
-        r.keys().forEach((key) => (reactControllers[key] = r(key).default));
+        r.keys().forEach((key) => {
+            if (r(key).default !== undefined) {
+                reactControllers[key] = r(key).default;
+            }
+        });
    };

However, with these changes, it will be more difficult to determine if a module or default export is missing.

[smnandre]

Suggested change

	throw new Error(
	`React controller "${name}" could not be resolved. Ensure the module exports the controller as default.`
	);
	throw new Error(`React controller "${name}" could not be resolved. Ensure the module exports the controller as default.`);

[teklakct]

I ran biome check and applied the suggested formatter changes

[smnandre]

Hi @teklakct ! Thanks for this

Could you rebuild the JS dist files ? (that's the reason of the CI failure)

From the root of the monorepo: yarn run build

(you may need to rebase before)

[github-actions]

📊 Packages dist files size difference

Thanks for the PR! Here is the difference in size of the packages dist files between the base branch and the PR.
Please review the changes and make sure they are expected.

File	Before (Size / Gzip)	After (Size / Gzip)
React
register_controller.js	827 B / 398 B	1.03 kB+28% 📈 / 466 B+17% 📈

[teklakct]

@smnandre sorry for the delay. I must have missed the notification earlier.

[smnandre]

@teklakct don't be :) I also lost tracking of this PR to be honest!

Seems good to me !

[Kocal]

Thanks for working on this, and sorry for the delay.

Do you think we could do the same for UX Vue and UX Svelte?

[Kocal]

Thank you @teklakct.