Error: Hook can only be invoked from render methods.

Describe the bug I upgraded to nextjs v12 and got this error: Error: Hook can only be invoked from render methods. The error gets thrown on every other react hook as well.

To Reproduce

store.js

import { createContext } from "preact";
import { useReducer, useContext } from "preact/hooks";

const reducer = (state, action) => {
  switch (action.type) {
    case "filter":
      return { ...state, filter: action.data };
    default:
      return;
  }
};

const initialState = {
  filter: { category: null },
};
const StoreContext = createContext(initialState);

export function StoreProvider(props) {
  const [state, dispatch] = useReducer(reducer, initialState);

  return (
    <StoreContext.Provider value={{ state, dispatch }}>
      {props.children}
    </StoreContext.Provider>
  );
}

export function useStore() {
  const store = useContext(StoreContext);

  return store;
}

Steps to reproduce the behavior:

1. Add store.js to a nextjs v12 project
2. See error

Expected behavior The code should just work as before.

Additional Info package.json

{
  "private": true,
  "license": "The Unlicense",
  "scripts": {
    "dev": "npx netlify-cms-proxy-server & next dev",
    "build": "next build",
    "start": "next start",
    "postbuild": "next-sitemap"
  },
  "dependencies": {
    "framer-motion": "^5.2.1",
    "next": "^12.0.3",
    "next-mdx-remote": "^3.0.7",
    "next-plugin-preact": "^3.0.6",
    "next-pwa": "^5.4.0",
    "preact": "^10.5.14",
    "preact-render-to-string": "^5.1.19",
    "react": "npm:@preact/compat",
    "react-dom": "npm:@preact/compat",
    "react-intersection-observer": "^8.32.2",
    "react-lazy-hydration": "^0.1.0",
    "react-responsive": "^9.0.0-beta.4",
    "react-ssr-prepass": "npm:preact-ssr-prepass"
  },
  "devDependencies": {
    "@tailwindcss/forms": "^0.4.0-alpha.1",
    "@tailwindcss/typography": "^0.5.0-alpha.2",
    "autoprefixer": "^10.4.0",
    "eslint": "<8.0.0",
    "eslint-config-next": "12.0.3",
    "gray-matter": "^4.0.3",
    "netlify-cms-proxy-server": "^1.3.22",
    "next-sitemap": "^1.6.203",
    "postcss": "^8.3.11",
    "postcss-flexbugs-fixes": "^5.0.2",
    "postcss-preset-env": "^6.7.0",
    "sharp": "^0.29.2",
    "tailwindcss": "^3.0.0-alpha.1"
  }

node --version
v16.11.0

[benzizoo]

happens to me as well while using react-hook-form and Next js ^v12.x

[acolle]

Thanks for the clarification @scheatkode. I installed the react@npm:@preact/compat and react-dom@npm:@preact/compat packages but the issue remained for me.

In the end, I got it working by installing the latest versions of preact and preact-cli. I must have fallen a bit behind regarding the latest releases.

Thanks for your quick reply