Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Using named imports results in "Uncaught ReferenceError: h is not defined"

See original GitHub issue

I’m currently trying to setup a project with Preact, Typescript and Babel7/webpack. When I import preact members explicitly, as stated in the documentation, I get an Uncaught ReferenceError at runtime. I can work around this issue by importing via namespace, but that doesn’t feel right.

import { h, render } from "preact";

// This actually works as expected from the code above
// import * as preact from "preact";
// const { h, render } = preact;

// Uncaught ReferenceError: h is not defined
render(<h1>Hello, preact!</h1>, document.body);

Corresponding webpack.config.js:

const path = require("path");
const CleanWebpackPlugin = require("clean-webpack-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const OUTPUT_DIR = "dist";

module.exports = {
  entry: "./src/index.tsx",
  output: {
    filename: "main.js",
    path: path.resolve(__dirname, OUTPUT_DIR)
  module: {
    rules: [
        test: /\.tsx?$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader",
          options: {
            presets: ["@babel/env", "@babel/typescript"],
            plugins: [["@babel/transform-react-jsx", { pragma: "h" }]]
  resolve: {
    extensions: [".ts", ".tsx", ".json"]
  plugins: [
    new CleanWebpackPlugin([OUTPUT_DIR]),
    new HtmlWebpackPlugin({
      template: "./public/index.html"
  devtool: "eval-source-map"

Issue Analytics

  • State:closed
  • Created 5 years ago
  • Reactions:1
  • Comments:11 (3 by maintainers)

github_iconTop GitHub Comments

marvinhagemeistercommented, Nov 18, 2018

@codecab Thanks for the repo link, that made reproducing this issue much easier👍

It turns out that the error is thrown by @babel/typescript, which is applied before @babel/transform-react-jsx. Adding the pragma to @babel/typescript fixes this issue.

  presets: [
    ["@babel/typescript", { jsxPragma: "h" }], // Add jsxPragma here
  plugins: [
    ["@babel/transform-react-jsx", { pragma: "h" }]
iamclaytonraycommented, Dec 24, 2018

Has anyone been able to resolve this using Parcel? Seems to still throw this error regardless of my babel config changes. Thanks!

Read more comments on GitHub >

github_iconTop Results From Across the Web

Preact/Compat in PreactX - ReferenceError: h is not defined
To get it to work I can change the ReactDOM.render... line in app.js to use the preact render function and just import preact...
Read more >
TypeError: "x" is not a function - JavaScript - MDN Web Docs
The JavaScript exception "is not a function" occurs when there was an attempt to call a value from a function, but the value...
Read more >
process is not defined" when importing Mongoose - Reddit
Mongoose is listed as dependency ("mongoose": "^6.3.1") in my package.json file. `process` is a Node.js global variable.
Read more >
vite referenceerror: require is not defined -
When importing a react component that imports a CSS file, vite fails with the message: Uncaught ReferenceError: require is not defined. If you...
Read more >
Preact/Compat in PreactX - ReferenceError: h is not defined ...
[Solved]-Preact/Compat in PreactX - ReferenceError: h is not defined-Reactjs. Search. score:2. import React from "react"; import ReactDOM from 'react-dom'; ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Post

No results found

github_iconTop Related Hashnode Post

No results found