When passing a component to a library package: “Hook can only be invoked from render methods”

I’ve read everything I could find on the issue, tried various workarounds, but nothing worked. That may be because my setup is slightly unusual (but the repro project is simple).

As an aside, I’m getting the same error if I try this with React.

Repositories for reproducing the problem:

• https://github.com/rauschma/preact-repro-lib
• https://github.com/rauschma/preact-repro-app

preact-repro-lib/ts/index.tsx:

import { VNode } from 'preact';
import render from 'preact-render-to-string';

export type SimpleView = () => VNode;

export function logRenderedView(View: SimpleView) {
  console.log('----------');
  console.log(render(<View/>));
  console.log('----------');
}

preact-repro-app/ts/main.tsx:

import { logRenderedView } from 'preact-repro-lib';
import { useState } from 'preact/hooks';

import 'preact/debug';

function MyComponent() {
  const [clickCount, setClickCount] = useState(0);
  return <div>
    <a href="" onClick={handleClick}>{clickCount}</a>
  </div>;

  function handleClick(event: MouseEvent) {
    event.preventDefault();
    setClickCount(clickCount+1);
  }
}

logRenderedView(MyComponent);

Output:

Error: Hook can only be invoked from render methods.
    at Object.n.__h (file:///Users/rauschma/tmp/preact-repro-app/node_modules/preact/debug/dist/debug.mjs:1:6090)
    at m (file:///Users/rauschma/tmp/preact-repro-app/node_modules/preact/hooks/dist/hooks.mjs:1:125)
    at p (file:///Users/rauschma/tmp/preact-repro-app/node_modules/preact/hooks/dist/hooks.mjs:1:280)
    at l (file:///Users/rauschma/tmp/preact-repro-app/node_modules/preact/hooks/dist/hooks.mjs:1:249)
    at Object.MyComponent (file:///Users/rauschma/tmp/preact-repro-app/dist/main.js:6:41)
    at x (file:///Users/rauschma/tmp/preact-repro-lib/node_modules/preact-render-to-string/dist/index.mjs:1:2257)
    at m (file:///Users/rauschma/tmp/preact-repro-lib/node_modules/preact-render-to-string/dist/index.mjs:1:1077)
    at logRenderedView (file:///Users/rauschma/tmp/preact-repro-lib/dist/index.js:5:17)
    at file:///Users/rauschma/tmp/preact-repro-app/dist/main.js:13:1
    at ModuleJob.run (node:internal/modules/esm/module_job:175:25)

[marvinhagemeister]

Good point, pnpm workspaces work too 👍

[marvinhagemeister]

You sound like there is no real solution(?)

My comment was aimed at just relying on npm. The file syntax for dependencies only works for simple cases as it doesn’t really understand the relationship between those two folders. It breaks for anything else.

Tools like yarn workspaces or lerna solve exactly this problem, which happens to be the same one as for monorepos where folders containe dependencies that depend on each other. Afaik npm is in the process of adding decent workspace support natively, but that may take a while.