Compiled HTML looks faulty: __source / __self [object Object]

Hey guys!

I’m sitting with a freshly installed create-react-app which I’ve converted to Preact with the simple steps. I get this weird issue when compiling my jsx files with Preact, and can’t really find the root of cause.

My Index.jsx

import { h, render } from 'preact';
import registerServiceWorker from './utilities/registerServiceWorker';

render(
  <div className="app">
    <p className="app-intro">
      To get started, edit <code>src/App.js</code> and save to reload.
    </p>
  </div>,
  document.getElementById('root')
);

registerServiceWorker();

The compiled HTML file

<div class="app" __source="[object Object]" __self="[object Object]">
  <button class="app-intro" __source="[object Object]" __self="[object Object]">
To get started, edit <code __source="[object Object]" __self="[object Object]">src/App.js</code> and save to reload.
  </button>
>

Does anybody have an idea of what might could be the problem?

[Kanaye]

Okay create-react-app uses the babel plugins: transform-react-jsx-source and transform-react-jsx-self by default in none-production builds. Preact doesn’t support those “special” attributes and just adds them as a stringified version to the dom. In a production build those attributes won’t exist.

If you are using create-react-app to have an easy quick start, you can also take a look at preact-cli.

[mthines]

I configured my babel like this, and it works as expected.

"presets": [
  "react",
  "es2015"
],
"plugins": [
  "transform-es2015-destructuring",
  "transform-object-rest-spread",
  [
    "transform-react-jsx",
    {
      "pragma": "h"
    }
  ]
]

Thanks for the help guys! 💪