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!