Using React-hook-form with Preact | Astro Lounge | Page 1

Hi there , I have a problem with setting up Preact to work with library https://react-hook-form.com/

When i try to use it i get Cannot read properties of undefined (reading 'useForm')

Here is my tsconfig.json

{
  "extends": "astro/tsconfigs/base",
  "compilerOptions": {
    "jsx": "react-jsx",
    "jsxImportSource": "preact",
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": false,
    "baseUrl": "src",
    "paths": {
      "@styles/*": ["styles/*"],
      "@components/*": ["components/*"],
      "@layouts/*": ["layouts/*"],
      "react": ["./node_modules/preact/compat/"],
      "react-dom": ["./node_modules/preact/compat/"]
    }
  }
}

here is package.json

{
  "name": "portfolio",
  "type": "module",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "dev": "astro dev",
    "start": "astro dev",
    "build": "astro build",
    "preview": "astro preview",
    "astro": "astro"
  },
  "dependencies": {
    "@astrojs/preact": "^2.0.0",
    "@fontsource/lato": "^4.5.10",
    "astro": "^2.0.0",
    "astro-icon": "^0.8.0",
    "astro-imagetools": "^0.7.6",
    "preact": "^10.6.5",
    "react-hook-form": "^7.42.1"
  },
  "overrides": {
    "react": "npm:@preact/compat@latest",
    "react-dom": "npm:@preact/compat@latest"
  }
}

and the astro.config.mjs

import { defineConfig } from "astro/config";

// https://astro.build/config
import preact from "@astrojs/preact";

import { astroImageTools } from "astro-imagetools";

// https://astro.build/config
export default defineConfig({
  integrations: [preact({ compat: true }), astroImageTools],
});

Home

React hook for form validation without the hassle

#Using React-hook-form with Preact