Component's "on" property should be a function Error

[yoheinishikubo]

I always get an error like 'Component's "on" property should be a function Error' typically with AMP development.
Although this can be solved with dangerouslySetInnerHTML feature, it's annoying with some complicated implementations.

I found the condition !('$$typeof' in vnode) // allow string refs when preact-compat is installed is not applied to the props starts with on in the source code and made a version including it to find it works fine.

Can I ask why these conditions are different from each other?

https://github.com/preactjs/preact/blob/master/debug/src/debug.js#L183-L213

		if (
			vnode.ref !== undefined &&
			typeof vnode.ref != 'function' &&
			typeof vnode.ref != 'object' &&
			!('$$typeof' in vnode) // allow string refs when preact-compat is installed
		) {
			throw new Error(
				`Component's "ref" property should be a function, or an object created ` +
					`by createRef(), but got [${typeof vnode.ref}] instead\n` +
					serializeVNode(vnode) +
					`\n\n${getOwnerStack(vnode)}`
			);
		}

		if (typeof vnode.type == 'string') {
			for (const key in vnode.props) {
				if (
					key[0] === 'o' &&
					key[1] === 'n' &&
					typeof vnode.props[key] != 'function' &&
					vnode.props[key] != null
				) {
					throw new Error(
						`Component's "${key}" property should be a function, ` +
							`but got [${typeof vnode.props[key]}] instead\n` +
							serializeVNode(vnode) +
							`\n\n${getOwnerStack(vnode)}`
					);
				}
			}
		}

[marvinhagemeister]

I always get an error like 'Component's "on" property should be a function Error' typically with AMP development.

I don't think there is enough information for us to understand what you're trying to achieve. Can you share the section of the code that lead to this error? Like the AMP component and which props you're passing to it?

The linked excerpt from Preact's source checks if we're dealing with a DOM element, for which props starting with on* are assumed to be an event handler like onclick or oninput.

The !('$$typeof' in vnode) check allows us to detect if preact/compat is used, but from the looks of it that isn't relevant to the problem you're describing.

[yoheinishikubo]

@marvinhagemeister

Thank you for pointing out my fault and sorry for lacking of enough explanations.

• I have been using preact for Next.js development. preact/compat is needed for it.
• In addition, I am using next/amp feature for AMP pages when static pages are exported as SSG.
• As you may know, AMP needs expressions for events and actions like on="tap:warning-message.hide" for tags like a, button, and others. https://amp.dev/documentation/guides-and-tutorials/learn/amp-actions-and-events/
• Obviously, this on="tap:warning-message.hide" property hits the condition in the following line and the Component's "on" property should be a function Error error always blocks building pages.
  https://github.com/preactjs/preact/blob/master/debug/src/debug.js#L199-L204
• I found the additional condition for preact/compat can be a workaround for this situation and got the simple question "Why this condition is not here (#L199-L204)?".

That's it.
Further advises and questions are much appreciated.