preact: 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:

Add store.js to a nextjs v12 project
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

About this issue

Original URL
State: closed
Created 3 years ago
Reactions: 4
Comments: 23 (7 by maintainers)

Most upvoted comments

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

benzizoo on Jan 12, 2022

As a workaround for anyone bumping into this issue, try importing from react instead of preact/hooks.

import { useReducer, useState } from 'react'

Hoping this helps.

scheatkode on Mar 19, 2022

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

acolle on Jul 12, 2022

Any news about this? Just created a new next.js project with latest preact and I get this error 😦

EDIT: Works fine if I add experimental: {esmExternals: false} to my next.config.js

drager on Oct 13, 2022

@JoviDeCroock Hey, I am a little late, but I checked the issue again and it still isn’t working for me.

Running yarn upgrade --latest got me the newest version (10.6.4). After running yarn dev, the first error occured again.

Error: Cannot find module 'scheduler/package.json'

After installing the scheduler package, the error described above came up again.

Do you need more info for reproduction?

{
  "private": true,
  "license": "The Unlicense",
  "scripts": {
    "dev": "npx netlify-cms-proxy-server & next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint",
    "postbuild": "next-sitemap"
  },
  "dependencies": {
    "amazon-product-api": "^0.4.4",
    "framer-motion": "^5.5.6",
    "next": "^12.0.7",
    "next-mdx-remote": "^3.0.7",
    "next-plugin-preact": "^3.0.6",
    "next-pwa": "^5.4.1",
    "preact": "^10.6.4",
    "preact-render-to-string": "^5.1.19",
    "react": "npm:@preact/compat",
    "react-dom": "npm:@preact/compat",
    "react-intersection-observer": "^8.32.5",
    "react-lazy-hydration": "^0.1.0",
    "react-responsive": "^9.0.0-beta.5",
    "react-ssr-prepass": "npm:preact-ssr-prepass",
    "tailwindcss-elevation": "^1.0.1"
  },
  "devDependencies": {
    "@tailwindcss/forms": "^0.4.0-alpha.1",
    "@tailwindcss/typography": "^0.5.0-alpha.2",
    "autoprefixer": "^10.4.2",
    "eslint": "^8.6.0",
    "eslint-config-next": "12.0.7",
    "gray-matter": "^4.0.3",
    "netlify-cms-proxy-server": "^1.3.23",
    "next-sitemap": "^1.6.245",
    "postcss": "^8.4.5",
    "postcss-flexbugs-fixes": "^5.0.2",
    "postcss-preset-env": "^7.2.0",
    "sharp": "^0.29.2",
    "tailwindcss": "^3.0.12"
  }
}

tw1t611 on Jan 7, 2022

@tw1t611 this has been published in 10.6.2

JoviDeCroock on Nov 29, 2021