feature #2006 [React] Improve error handling in resolveReactComponent (teklakct)

This PR was merged into the 2.x branch.

Discussion
----------

[React] Improve error handling in `resolveReactComponent`

| 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:
```js
// NoDefaultExportComponent.jsx
export const SomeRandomName = () => {
    return <div>Hello</div>;
}
```
Whenever there will be an element like this

```html
<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.

Commits
-------

9e36018 [React] Improve error handling in `resolveReactComponent`

Author: Kocal

src/React/CHANGELOG.md

@@ -1,9 +1,13 @@
 # CHANGELOG
 
+## 2.26.0
+
+-   Improve error handling when resolving a React component
+
 ## 2.21.0
 
--   Add `permanent` option to the `react_component` Twig function, to prevent the 
-    _unmounting_ when the component is deconnected and immediately re-connected. 
+-   Add `permanent` option to the `react_component` Twig function, to prevent the
+    _unmounting_ when the component is deconnected and immediately re-connected
 
 ## 2.13.2
 

src/React/assets/dist/register_controller.js

@@ -10,6 +10,10 @@ function registerReactControllerComponents(context) {
         const component = reactControllers[`./${name}.jsx`] || reactControllers[`./${name}.tsx`];
         if (typeof component === 'undefined') {
             const possibleValues = Object.keys(reactControllers).map((key) => key.replace('./', '').replace('.jsx', '').replace('.tsx', ''));
+            if (possibleValues.includes(name)) {
+                throw new Error(`
+                    React controller "${name}" could not be resolved. Ensure the module exports the controller as a default export.`);
+            }
             throw new Error(`React controller "${name}" does not exist. Possible values: ${possibleValues.join(', ')}`);
         }
         return component;

src/React/assets/src/register_controller.ts

@@ -37,6 +37,12 @@ export function registerReactControllerComponents(context: __WebpackModuleApi.Re
             const possibleValues = Object.keys(reactControllers).map((key) =>
                 key.replace('./', '').replace('.jsx', '').replace('.tsx', '')
             );
+
+            if (possibleValues.includes(name)) {
+                throw new Error(`
+                    React controller "${name}" could not be resolved. Ensure the module exports the controller as a default export.`);
+            }
+
             throw new Error(`React controller "${name}" does not exist. Possible values: ${possibleValues.join(', ')}`);
         }
 

src/React/assets/test/register_controller.test.tsx

@@ -17,6 +17,7 @@ const createFakeFixturesContext = (): RequireContext => {
     const files: any = {
         './MyJsxComponent.jsx': { default: MyJsxComponent },
         './MyTsxComponent.tsx': { default: MyTsxComponent },
+        './NoDefaultExportComponent.jsx': { default: undefined },
     };
 
     const context = (id: string): any => files[id];
@@ -45,4 +46,13 @@ describe('registerReactControllerComponents', () => {
             'React controller "MyABCComponent" does not exist. Possible values: MyJsxComponent, MyTsxComponent'
         );
     });
+
+    it('throws when no default export found in imported module', () => {
+        registerReactControllerComponents(createFakeFixturesContext());
+        const resolveComponent = (window as any).resolveReactComponent;
+
+        expect(() => resolveComponent('NoDefaultExportComponent')).toThrow(
+            'React controller "NoDefaultExportComponent" could not be resolved. Ensure the module exports the controller as a default export.'
+        );
+    });
 });

src/React/doc/index.rst

@@ -81,6 +81,10 @@ For example:
         return <div>Hello {props.fullName}</div>;
     }
 
+.. note::
+
+    Ensure your module exports the controller as the ``export default``. The default export is used when resolving components.
+
 .. code-block:: html+twig
 
     {# templates/home.html.twig #}