[BUGFIX] Regression [Ember 5.12+] Non helpful error when the function for on modifier was forget to add #21045 #20783

Author: johanrd

packages/@glimmer/runtime/lib/modifiers/on.ts

@@ -79,12 +79,13 @@ export class OnModifierState {
       }
     ) as EventListener;
 
-    localAssert(
-      typeof userProvidedCallback === 'function',
-      `You must pass a function as the second argument to the \`on\` modifier; you passed ${
-        userProvidedCallback === null ? 'null' : typeof userProvidedCallback
-      }. While rendering:\n\n${args.positional[1]?.debugLabel ?? `{unlabeled value}`}`
-    );
+    if (DEBUG && typeof userProvidedCallback !== 'function') {
+      throw new Error(
+        `You must pass a function as the second argument to the \`on\` modifier; you passed ${
+          userProvidedCallback === null ? 'null' : typeof userProvidedCallback
+        }. While rendering:\n\n${args.positional[1]?.debugLabel ?? `{unlabeled value}`}`
+      );
+    }
 
     if (DEBUG && args.positional.length !== 2) {
       throw new Error(

smoke-tests/scenarios/basic-test.ts

@@ -269,6 +269,44 @@ function basicTest(scenarios: Scenarios, appName: string) {
                   let allNodes = flattenTree(tree);
                   let names = allNodes.filter(n => n.type === 'component').map(n => n.name);
                   assert.true(names.includes('HelloWorld'), 'HelloWorld component name is preserved in the render tree (found: ' + names.join(', ') + ')');
+                  });
+              });
+            `,
+            'on-modifier-error-test.gjs': `
+              import { module, test } from 'qunit';
+              import { render, setupOnerror, resetOnerror } from '@ember/test-helpers';
+              import { setupRenderingTest } from 'ember-qunit';
+              import { on } from '@ember/modifier';
+
+              module('on modifier | error handling', function (hooks) {
+                setupRenderingTest(hooks);
+
+                hooks.afterEach(function () {
+                  resetOnerror();
+                });
+
+                test('throws helpful error when callback is undefined', async function (assert) {
+                  assert.expect(1);
+                  const noop = undefined;
+                  setupOnerror((error) => {
+                    assert.true(
+                      /You must pass a function as the second argument to the \`on\` modifier/.test(error.message),
+                      'Expected helpful error message, got: ' + error.message
+                    );
+                  });
+                  await render(<template><div {{on "click" noop}}>Click</div></template>);
+                });
+
+                test('throws helpful error when callback is null', async function (assert) {
+                  assert.expect(1);
+                  const noop = null;
+                  setupOnerror((error) => {
+                    assert.true(
+                      /You must pass a function as the second argument to the \`on\` modifier/.test(error.message),
+                      'Expected helpful error message, got: ' + error.message
+                    );
+                  });
+                  await render(<template><div {{on "click" noop}}>Click</div></template>);
                 });
               });
             `,