Parcel: Parcel 2: Typescript + Preact

[Drapegnik]

🐛 bug report

Parcel remove _unused_ Preact h in typescript (works with js):

Uncaught ReferenceError: h is not defined

💁 Possible Solution

looks like wrong jsxFactory detection, even if I add tsconfig.json with:

  "compilerOptions": {
    "jsx": "react",
    "jsxFactory": "h"
  },

I tried to investigate:

• transformer-typescript-tsc doesn't run by default, right?
• but transformer-babel has jsx pragma logic should this work with the Typescript?

💻 Code Sample

// unused `h`
import { h, render } from "preact";

const App = () => <div>Hello world!</div>;

// works if uncomment:
// console.log(h);

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

render(<App />, node!, node!.lastChild as Element);

🌍 Your Environment

| Software | Version(s) |
| ---------------- | ---------- |
| Parcel | 2.0.0-alpha.1.1
| Node | v10.14.1
| npm | 6.10.3
| Operating System | macOS
| preact | 10.0.0-rc.1

[devongovett]

There's an issue for supporting custom pragmas in TSX here: #3287. I believe that's only for TSC though.

It appears that when using babel, we should end up with preset-typescript and preset-react already. See https://github.com/parcel-bundler/parcel/blob/v2/packages/transformers/babel/src/config.js. Might be a bug there if it's not working.

[Drapegnik]

Hi! I launched it with tsc:
https://github.com/Drapegnik/parcel2-ts-preact/tree/tsc

but still have this problem with babel:
https://github.com/Drapegnik/parcel2-ts-preact

from Preact docs:

{
  "plugins": [["@babel/plugin-transform-react-jsx", { "pragma": "h" }]]
}

[mischnic]

@Drapegnik For Parcel 2 we changed the babelrc behavior: if you provide one, it will be used without any modifications, so you need:

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

As for the tsc version, your setup works with the latest Parcel 2 version.

[zackkrida]

@mischnic The recommended configuration above does not work. I made a minimal a repro as possible here: https://github.com/zackkrida/play/tree/parcel2/ts-preact-issue

I have both the specified .babelrc

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

and tsconfig.json

{
  "compilerOptions": {
    "jsxFactory": "h",
    "jsx": "react"
  }
}

and still have the ReferenceError: h is not defined error. The "unused", imported 'h' in my index.tsx file is still stripped out.

[mischnic]

@zackkrida I'm sorry, this is correct (babel's typescript preset doesn't react the tsconfig file):

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