[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.`);

[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)