reactjsparceljspreact

Why don't HTML elements render in Preact?


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.

gridStyleis 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"
    ]
}

Solution

  • 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.