[React] improve error handling in resolveReactComponent

src/React/assets/src/register_controller.ts

@@ -37,6 +37,13 @@ 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 default.`
+                );
+            }
+
             throw new Error(`React controller "${name}" does not exist. Possible values: ${possibleValues.join(', ')}`);
         }
 

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

@@ -19,6 +19,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,11 @@ describe('registerReactControllerComponents', () => {
 
         expect(() => resolveComponent('MyABCComponent')).toThrow('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 default.');
+    });
 });

src/React/doc/index.rst

@@ -76,6 +76,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 #}