Webpack removing preact import used by jsx

Bug report

What is the current behavior?

Webpack strips the preact import from the source code which will throw an error when running the JS in the browser: MyComponent.tsx:8 Uncaught ReferenceError: preact is not defined.

If the current behavior is a bug, please provide the steps to reproduce.

See the minimal repository here: https://github.com/Badestrand/webpack-error-stripping-preact-import/tree/main

Run webpack run build and open src/index.html in browser. In the console you will see the error MyComponent.tsx:4 Uncaught ReferenceError: preact is not defined. I included the compiled main.js in the src folder of the repository as well.

What is the expected behavior?

The source code in MyComponent.tsx is

import * as preact from 'preact'

export default function MyComponent() {
	return (
		<div></div>
	)
}

The compiled source code is

/***/ "./src/MyComponent.tsx":
/*!*****************************!*\
  !*** ./src/MyComponent.tsx ***!
  \*****************************/
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {

__webpack_require__.r(__webpack_exports__);
/* harmony export */ __webpack_require__.d(__webpack_exports__, {
/* harmony export */   "default": () => (/* binding */ MyComponent)
/* harmony export */ });
function MyComponent() {
  return preact.h("div", null);
}

/***/ }),

Notice that the import of preact was stripped, which causes the code to fail.

The import does NOT get stripped and everything works fine if I either a) make it javascript instead of typescript by changing the file extension or b) reference preact directly in the file, e.g. by adding the line !!preact.h.

Other relevant information: webpack version: 5.72.0 Node.js version: v14.15.0 Operating System: Mac OS Monterey Additional tools:

[vankop]

hm… I think you should ask in babel issue tracker how to configure this… ( or maybe preact ) looks like typescript preset removes import before react transpile jsx…

[Badestrand]

The order of my presets is env->react->typescript, shouldn’t that first resolve the jsx and then pass the resolved code to typescript which now should see all the “preact.h” statements?

I played around with changing the preset order but that didn’t seem to change anything.