I'm working on a Preact project, and this is the code of a page:
return (
<Fragment>
<div style={gridStyle}>
<p>Test</p>
</div>
<Keyboard offset={this.state.octaveAdj} highlightTable={highlightTable} highlightColor={colorIndex} />
<KeySelector selectedKey={selectedKey} link={true} />
<Playbox offset={this.state.octaveAdj} highlightTable={highlightTable}
raiseOctave={this.raiseOctave} lowerOctave={this.lowerOctave}
risingDisabled={this.state.octaveAdj === MAXoctaveAdj} lowerDisabled={this.state.octaveAdj === MINoctaveAdj}
color={color} />
<ChordDetail chord={chord} inversion={inversion} color={color} />
<ChordSelector selectedKey={selectedKey} />
</Fragment>
);
Everything renders as intended in the dev server (which is run by Parcel), except the div.
gridStyle
is a proper JS object:
const gridStyle = {
display: 'grid',
gridTemplateColumns: 'repeat(4, 1fr)',
gridTemplateRows: '1fr 1fr',
};
I tried to take away the div
and leave only the p
, but nothing changes. That leads me to conclude that this is a problem with every native HTML element, as opposed to components which render fine. But even when I put it in a component, like this:
import { Component } from 'preact'
const styles = {
display: 'grid',
gridTemplateColumns: 'repeat(4, 1fr)',
gridTemplateRows: '1fr 1fr',
};
export default class Test extends Component {
constructor() {
super();
}
render() {
return (
<div style={styles}>
<p>Test</p>
</div>
)
}
}
And add it to the code, it still does not render.
What can be done about this?
Edit: This is my .parcelrc
:
{
"extends": "@parcel/config-default",
"transformers": {
"*.{ts,tsx}": [
"@parcel/transformer-typescript-tsc"
]
},
"reporters": [
"...",
"parcel-reporter-static-files-copy"
]
}
This was fixed after installing @babel/plugin-transform-react-jsx-development
. I was on dev mode while finding the problem, so I think you specifically need the dev version.