Description

I am running into issues with React.Fragment usage in @ampproject/amp-base-carousel/react.

AMP defines the type interfaces for the Preact APIs like so:

In the React version, preact basically simply points to require('react'), otherwise it appears to be the same.

The bug here is with the preact.Fragment bit. While Fragment appears to be a function in Preact, it isn't in React. This causes JavaScript errors when running the application, saying that preact.Fragment is not a function.

In React, a Fragment needs to be created with React.createElement like any other element, e.g. React.createElement(React.Fragment, props, ...children)

The compiled Bento React components contain code like this (with preact actually pointing to the react package):

function createElement2(unusedType, unusedProps, var_args) {
	return preact.createElement.apply(void 0, arguments);
}

// ...

function Fragment2(props) {
  // TypeError: preact.Fragment is not a function
  return preact.Fragment(props);
}

Changing it to this fixed the issue for me:

function Fragment2(props) {
  return createElement2(preact.Fragment, props, ...children);
}

Reproduction Steps

I am basically doing this:

import { BaseCarousel } from '@ampproject/amp-base-carousel/react';

function SomeComponent() {
	  return (
		    <BaseCarousel
		    autoAdvance={ true }
		    loop={ true }
		    snap={ true }
		    >
	  );
}

Relevant Logs

TypeError: preact.Fragment is not a function

Browser(s) Affected

No response

OS(s) Affected

No response

Device(s) Affected

No response

AMP Version Affected

2107092322000