Cannot find module 'preact/hooks' or its corresponding type declarations.

[gerardcsaperas]

• [ x] Check if updating to the latest Preact version resolves the issue

Describe the bug I can't import useEffect from preact/hooks:

import { useEffect } from 'preact/hooks';

The error is as follows:

Cannot find module 'preact/hooks' or its corresponding type declarations.

To Reproduce

I created a preact project with TypeScript and webpack and the following configurations:

/** package.json */
{
    "name": "whatever",
    "version": "1.0.0",
    "description": "Preact widget for whatever",
    "main": "index.js",
    "module": "dist/bundle.js",
    "private": true,
    "scripts": {
        "build": "webpack",
        "test": "testcafe all tests/testcafe"
    },
    "author": "Gerard",
    "license": "ISC",
    "devDependencies": {
        "@babel/cli": "^7.17.3",
        "@babel/core": "^7.17.5",
        "@babel/plugin-transform-react-jsx": "^7.17.3",
        "@babel/preset-env": "^7.16.11",
        "@babel/preset-react": "^7.16.7",
        "@babel/preset-typescript": "^7.16.7",
        "babel-loader": "^8.2.5",
        "core-js": "^3.22.2",
        "css-loader": "^6.7.1",
        "file-loader": "^6.2.0",
        "jest": "^28.0.2",
        "regenerator-runtime": "^0.13.9",
        "style-loader": "^3.3.1",
        "testcafe": "^1.18.6",
        "typescript": "^4.6.3",
        "webpack-cli": "^4.9.2"
    },
    "dependencies": {
        "preact": "^8.5.3",
        "ts-loader": "^9.2.8",
        "webpack": "^5.72.0"
    },
    "babel": {
        "inputSourceMap": true,
        "sourceMap": true,
        "ignore": [
            "node_modules"
        ],
        "presets": [
            [
                "@babel/env",
                {
                    "debug": true,
                    "loose": true,
                    "modules": false,
                    "useBuiltIns": "usage"
                }
            ]
        ],
        "plugins": []
    },
    "browserslist": [
        "Chrome 68",
        "Edge 17",
        "Explorer 11",
        "Firefox 61",
        "iOS 11",
        "Safari 11"
    ]
}

/** tsconfig.json */
{
    "compilerOptions": {
        "removeComments": true,
        "sourceMap": true,
        "noUnusedLocals": true,
        "noUnusedParameters": true,
        "noImplicitReturns": true,
        "noFallthroughCasesInSwitch": true,
        "module": "commonjs",
        "jsx": "react",
        "jsxFactory": "h",
        "target": "es5",
        "lib": ["DOM", "ES5", "ES2015.Promise"]
    },
    "include": ["src/*.ts", "src/*.tsx", "src/shared/custom.d.ts"],
    "exclude": ["./node_modules"]
}

/** webpack.config.js */
module.exports = {
  mode: 'production',
  devtool: 'source-map',
  entry: ['./src/index'],
  output: {
    path: __dirname + "/dist/",
    filename: `whatever.iife.js`,
    iife: true
  },
  resolve: {
    extensions: ['', '.ts', '.tsx', '.js', '.jsx'],
    /**
     * Configure your build system to redirect any imports/requires
     * looking for react or react-dom with preact-compat.
     */
    alias: {
      "react": "preact-compat",
      "react-dom": "preact-compat"
    }
  },
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        exclude: [/node_modules/],
        use: [
          {
            loader: "babel-loader",
            options: {
              babelrc: false,
              plugins: [
                [
                  "@babel/plugin-transform-react-jsx",
                  { pragma: "h", pragmaFrag: "Fragment" }
                ]
              ],
              presets: [["@babel/typescript", { jsxPragma: "h" }]]
            }
          }
        ]
      },
      {
        test: /\.(sa|sc|c)ss$/,
        use: ["style-loader", "css-loader"]
      },
      {
        test: /\.(png|jp(e*)g|svg|gif)$/,
        use: [
          {
            loader: 'file-loader',
            options: {
              name: 'images/[hash]-[name].[ext]',
            },
          },
        ],
      },
    ]
  },
  devServer: {
    static: {
      directory: __dirname + '/tests/development/firefox/firefox-hbbtv',
    },
    compress: true,
    port: 9000,
  },
};

Expected behavior Shouldn't I be able to import useEffect normally?

Thank you in advance for your time.

Kind Regards,

Gerard

[ForsakenHarmony]

Shouldn't I be able to import useEffect normally?

You're using preact 8, it doesn't have hooks yet

"preact": "^8.5.3",

If you update to preact 10 you can use hooks (and also change the alias from preact-compat to preact/compat in your webpack config)