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

[mthines]

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]

Is it possible that you are still using reacts h/createElement ?
Can you add /** @jsx h */ before your render()-call and test if the dom still looks like this after the change ?

[mthines]

Hey @Kanaye,
I've tried to add the /** @jsx h */ just after the imports and just before the render, but i still get the same results.

[Kanaye]

Hmm interesting, the jsx is compiled to something like this:

h(
  "div", {
      className: "app",
      __source: {
          fileName: _jsxFileName,
          lineNumber: 4
      },
      __self: this
  },
  h(
      "p", {
          className: "app-intro",
          __source: {
              fileName: _jsxFileName,
              lineNumber: 5
          },
          __self: this
      },
      "To get started, edit ",
      h(
          "code", {
              __source: {
                  fileName: _jsxFileName,
                  lineNumber: 6
              },
              __self: this
          },
          "src/App.js"
      ),
      " and save to reload."
  )

so it 's something within create-react-apps build process causing this.

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

[marvinhagemeister]

@Kanaye Yep, react uses these attributes for their customised stack-trace logging during development to get more accurate line mappings. In production mode these won't be generated.

[mthines]

Hey guys, awesome work!
I've just tried to run a build and as you said, they're not there.
I'll try to play with the babel plugins to see if I can remove them in dev build as well, and report back if I find a solution.

Thanks guys!

[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! 💪