Preact throwing Children.only() expects only one child when using 4Catalyzer/found

Viewed 175

My app.jsx was essentially built off of the redux example in the 4Catalyzer/found repo: https://github.com/4Catalyzer/found/blob/master/examples/redux/src/index.js

What I have basically looks like this:

class CustomerApp extends Component {
  constructor() {
    super();

    this.state = {
      locale: language,
      translations,
    };
  }

  componentDidMount() {
    initializeGA();
  }

  render() {
    return (
      <IntlProvider locale={this.state.locale} messages={this.state.translations}>
        <div style={{ height: '100%' }}>
          <ErrorBoundary>
            { this.props.children }
          </ErrorBoundary>
        </div>
      </IntlProvider>
    );
  }
}

const routeConfig = [
  {
    path: '/',
    Component: CustomerApp,
    children: customerRoutes,
  },
];

const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;

const store = createStore(
  combineReducers(reducers),
  composeEnhancers(
    createHistoryEnhancer({
      protocol: new BrowserProtocol(),
      middlewares: [ queryMiddleware ],
    }),
    createMatchEnhancer(
      new Matcher(routeConfig),
    ),
    applyMiddleware(thunk.withExtraArgument(vhx)),
  ),
);

store.dispatch(FarceActions.init());

const ConnectedRouter = createConnectedRouter({
  render: createRender({
    renderError: ({ error }) => ( // eslint-disable-line react/prop-types
      <div>
        {error}
      </div>
    ),
  }),
});

ReactDOM.render(
  <Provider store={store}>
    <ConnectedRouter resolver={resolver} matchContext={{ store }} />
  </Provider>,
  document.getElementById('customer-app'),
);

When using React, it works just fine. But when I try to drop in Preact/Preact-Compat/Preact-Redux, I always get this error:

preact-compat.es.js?017d:219 Uncaught Error: Children.only() expects only one child.
    at Object.only (preact-compat.es.js?017d:219)
    at StaticContainer.render (StaticContainer.react.js?073e:63)
    at callMethod (preact-compat.es.js?017d:504)
    at StaticContainer.eval [as render] (preact-compat.es.js?017d:515)
    at renderComponent (preact.mjs?f144:518)
    at renderComponent (preact.mjs?f144:546)
    at renderComponent (preact.mjs?f144:546)
    at setComponentProps (preact.mjs?f144:467)
    at buildComponentFromVNode (preact.mjs?f144:633)
    at idiff (preact.mjs?f144:244)

For some context, I'm using Webpack 3.11.0 to bundle, and have set my aliases to:

'preact': 'preact',
'react': 'preact-compat',
'react-dom': 'preact-compat',
'react-redux': 'preact-redux'

I've been stuck on this bug and am not really sure how to debug. Any help or guidance would be appreciated!

0 Answers
Related