From 15dd25f201d34dcc1962be7fea0a20fc7e8b49ba Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Pawe=C5=82=20Tekli=C5=84ski?= Date: Wed, 24 Jul 2024 20:25:05 +0200 Subject: [PATCH 1/3] [React] improve error handling in resolveReactComponent --- src/React/assets/src/register_controller.ts | 5 +++++ src/React/assets/test/register_controller.test.tsx | 8 ++++++++ 2 files changed, 13 insertions(+) diff --git a/src/React/assets/src/register_controller.ts b/src/React/assets/src/register_controller.ts index c592f724a50..f9419a01f0a 100644 --- a/src/React/assets/src/register_controller.ts +++ b/src/React/assets/src/register_controller.ts @@ -37,6 +37,11 @@ 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(', ')}`); } diff --git a/src/React/assets/test/register_controller.test.tsx b/src/React/assets/test/register_controller.test.tsx index ff328f0937e..b39c3fa831a 100644 --- a/src/React/assets/test/register_controller.test.tsx +++ b/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.'); + }); }); From a312feea79015cc208a2ba202945255b55744de6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Pawe=C5=82=20Tekli=C5=84ski?= Date: Wed, 24 Jul 2024 21:10:32 +0200 Subject: [PATCH 2/3] [React] add note about required default export in Symfony UX React --- src/React/doc/index.rst | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/React/doc/index.rst b/src/React/doc/index.rst index e894f6a40d9..8f573cdba5d 100644 --- a/src/React/doc/index.rst +++ b/src/React/doc/index.rst @@ -76,6 +76,10 @@ For example: return
Hello {props.fullName}
; } +.. 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 #} From bb23f4a2d4c63f96a296b2566df603218fa7c4ab Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Pawe=C5=82=20Tekli=C5=84ski?= Date: Wed, 24 Jul 2024 21:36:04 +0200 Subject: [PATCH 3/3] [React] satisfy coding style rules --- src/React/assets/src/register_controller.ts | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/React/assets/src/register_controller.ts b/src/React/assets/src/register_controller.ts index f9419a01f0a..033011695d7 100644 --- a/src/React/assets/src/register_controller.ts +++ b/src/React/assets/src/register_controller.ts @@ -39,7 +39,9 @@ export function registerReactControllerComponents(context: __WebpackModuleApi.Re ); 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}" 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(', ')}`);