Issue 1:
💻

Would you like to work on a fix?

How are you using Babel?

babel-loader (webpack)

Input code

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

Configuration file name

.babelrc

Configuration

{
"presets": [
"@babel/preset-env",
"@babel/preset-react",
"@babel/preset-typescript"
],
"plugins": [
[
"@babel/plugin-transform-runtime", {
"regenerator": true
}
],
["@babel/plugin-transform-react-jsx", {
"pragma": "preact.h",
"pragmaFrag": "preact.Fragment",
}]
]
}

Current and expected behavior

I have a simple Typescript JSX preact (it's very similar to React) component:

import * as preact from 'preact'

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

This gets compiled to

/***/ "./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);
}
/***/ }),

So you can see that the preact import was removed even though preact is used by the JSX. This throws an error when executing the code.

I found in this issue that Typescript removes unused imports and I think that's what's happening here - it's just that this import shouldn't be removed.

I guess the system determines first which imports are used/unused and only AFTER resolves the JSX.

I first filed a bug for webpack but the maintainer felt it could be better suited here.

Environment

System:

OS: macOS 12.2.1

Binaries:

Node: 14.15.0 - /usr/local/bin/node

Yarn: 1.6.0 - /usr/local/bin/yarn

npm: 6.14.8 - /usr/local/bin/npm

npmPackages:

@babel/core: ^7.17.9 => 7.17.9

@babel/plugin-transform-runtime: ^7.17.0 => 7.17.0

@babel/preset-env: ^7.16.11 => 7.16.11

@babel/preset-react: ^7.16.7 => 7.16.7

@babel/preset-typescript: ^7.16.7 => 7.16.7

@babel/runtime: ^7.17.9 => 7.17.9

babel-core: ^6.26.3 => 6.26.3

babel-loader: ^8.2.5 => 8.2.5

babel-preset-react: ^6.24.1 => 6.24.1

webpack: ^5.72.0 => 5.72.0

Possible solution

No response

Additional context

No response

Issue 2:
Bug Report

I would like to work on a fix!

Input Code

import { h, render } from "preact";

const root = document.getElementById("root");

render(<div>hello</div>, root);

Current behavior

import { render } from "preact"; // `h` import is gone
const root = document.getElementById("root");
render(h("div", null, "hello"), root);

Expected behavior

import { h, render } from "preact";
const root = document.getElementById("root");
render(h("div", null, "hello"), root);

Babel Configuration (babel.config.js, .babelrc, package.json#babel, cli command, .eslintrc)

Filename: .babelrc

{
"presets": [
"@babel/preset-typescript",
["@babel/preset-react", { "pragma": "h" }]
]
}

Environment

System:
OS: macOS 10.15.5
Binaries:
Node: 14.15.3 - /usr/local/opt/node@14/bin/node
Yarn: 1.22.10 - /usr/local/bin/yarn
npm: 6.14.9 - /usr/local/opt/node@14/bin/npm
npmPackages:
@babel/cli: ^7.12.10 => 7.12.10
@babel/core: ^7.0.0 => 7.12.10
@babel/preset-react: ^7.12.10 => 7.12.10
@babel/preset-typescript: ^7.12.7 => 7.12.7

Additional context

parcel-bundler/parcel#5566