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

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"
};

[marvinhagemeister]

@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/env",
    ["@babel/typescript", { jsxPragma: "h" }], // Add jsxPragma here
  ],
  plugins: [
    ["@babel/transform-react-jsx", { pragma: "h" }]
  ],
}

[iamclaytonray]

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