Can't mount component unless I use `export default class`
Closed this issue · 2 comments
Say I have a component in
(and assume I've already got JSX working with the appropriate babel plugin):
import { h, Component } from "preact"
import React from "preact/compat";
class SubscriptionRateEstimate extends Component {
render (props, state) {
return (
<h2 class='thing'>Hello, {props.hi_there}</h2>
)
}
}
I've done yarn add preact_ujs
and added the Preact UJS boilerplate to application.js
like so:
var componentRequireContext = require.context("components", true);
var PreactRailsUJS = require("preact_ujs");
PreactRailsUJS.useContext(componentRequireContext)
And in my view I render this with:
<%= preact_component('SubscriptionRateEstimate', { hi_there: 'me' }) %>
The component shell renders with the right data-preact-class
and data-preact-props
attributes, but it doesn't mount. Why? Well, looking at the getConstructor
code in Chrome, we see:
... so it require
s, but there is no default
key in component
.
If I add export default
to the class
definition in the component, it is found, but this detail isn't in the README. Should it be, or should SubscriptionRateEstimate
be found where it is and I've missed some other detail?
Ofc, Garner's law holds here, and the moment I post it I finally happen upon export default Button
in the README, so I'll apologise profusely and thank you for an excellent gem 😉
I think it would be good though to have a way of rendering non-default components...