Cannot find name 'h' with ts-loader

[UserAbuser228]

• Check if updating to the latest Preact version resolves the issue

I already have a website on React and would like to migrate to Preact. My website is bundling with Webpack and ts-loader. And that's a problem, because I couldn't find how to migrate from React to Preact if I don't use babel. For example, here are the steps for migrating using babel. But editting .babelrc will not affect in my case.

So, I decided to search the Internet and as I understand such configuration should have helped:

tsconfig.json

{
  "compilerOptions": {
    ...
    "jsx": "react",
    "jsxFactory": "h",
    "jsxFragmentFactory": "Fragment",
  },
  ...
}

webpack.config.js

module.exports = (env = {}, argv = {}) => {
  return {
    ...
    resolve: {
      extensions: ['.tsx', '.ts', '.js'],
      alias: {
        ...
        'react': 'preact/compat',
        'react-dom': 'preact/compat',
      },
    },
  }
};

But it didn't work. The building process ends up with en error: TS2304: Cannot find name 'h'.

Full version of tsconfig.json

{
  "compilerOptions": {
    "module": "es2020",
    "target": "es5",
    "skipLibCheck": true,
    "jsx": "react",
    "jsxFactory": "h",
    "jsxFragmentFactory": "Fragment",
    "allowJs": true,
    "sourceMap": true,
    "moduleResolution": "node",
    "experimentalDecorators": true,
    "allowSyntheticDefaultImports": true,
    "resolveJsonModule": true,
    "baseUrl": "./",
    "paths": {
      "@components": ["components"],
      "@components/icons": ["components/icons"],
      "@utils": ["utils"],
      "@pages/*": ["views/pages/*"],
      "@assets/*": ["assets/*"],
      "@data/*": ["data/*"]
    }
  },
  "include": ["./**/*"],
  "exclude": [
    "node_modules/**/*",
    "app/**/*"
  ]
}
  

[marvinhagemeister]

The classic JSX mode (="react") doesn't add imports for the jsx pragma function automatically. Those need to be imported by hand if the newer runtime mode isn't an option.

The new runtime mode which adds those imports automatically can be enabled by by setting jsx to either react-jsx or react-jsx-dev.

{
  "compilerOptions": {
    "jsx": "react-jsx",
    "jsxImportSource": "preact",
  }
}