Uncaught ReferenceError: preact is not defined

[didymu5]

Hello I could use some help. I'm using preact X -alpha 2 and getting the following error

index.js:32 Uncaught ReferenceError: preact is not defined
    at Module../src/index.js (index.js:32)
    at __webpack_require__ (bootstrap:63)
    at Object.2 (preact-app.bundle.js:20420)
    at __webpack_require__ (bootstrap:63)
    at bootstrap:195
    at bootstrap:195

index.js

import {h, render} from 'preact';
const App = () => {
  return (
    <div>
Hello app
    </div>
  );
};
render(<App />, document.getElementById("my-preact-app"));

package.json

"dependencies": {
"preact": "^10.0.0-alpha.2"
}

.babelrc

{
  "presets": [
    [
      "@babel/env",
      {
        "targets": {
          "browsers": ["last 2 versions", "safari >= 7"]
        }
      }
    ]
  ],
  "plugins": [
    [
      "@babel/plugin-transform-react-jsx",
      {
        "pragma": "preact.h"
      }
    ],
    "@babel/plugin-syntax-dynamic-import"
  ]
}

[didymu5]

The error is labeled when the render() is called.

[didymu5]

I could console log

console.log(h, render)

and can see that there are functions returned, however console.log preact gives me undefined.

[lukeed]

I think your babel pragma needs to just be 'h', not 'preact.h'

This would also explain why it only throws when you try rendering something. The JSX pragma only gets invoked at that point, realizing it doesn't know what "preact.h" is.

[didymu5]

OOH that did it!!! @lukeed I had kept the preact.h there while including preact via Githubissues.

Githubissues is a development platform for aggregating issues.