preact+react-modal,Uncaught TypeError: Cannot read properties of null (reading '__H')

[AprilLastCherry]

I used preact and react-modal to implement a Modal. A child component of Reacts-Modal is implemented by preact, and using hooks in a child component prompts an error

This is the scene I prepared for the reenactment https://codesandbox.io/p/github/AprilLastCherry/preact-demo/draft/purple-wildflower?file=%2Fsrc%2FApp.tsx%3A7%2C17&workspaceId=25022dc6-b7f9-4ebb-a0bd-889cc7cc7de8

Steps to reproduce the behavior:

1. An error message is displayed when Modal is opened

I don't understand how it works and hope to solve this problem, or react-modal and preact together is not a good solution，so what implementation should I use

[JoviDeCroock]

That codesandbox can't be accessed but that hooks warning is most likely due to duplicate Preact versions as many issues can be found before with __H

[AprilLastCherry]

Sorry, the example is not working properly. https://codesandbox.io/p/github/AprilLastCherry/preact-demo/draft/purple-wildflower?file=%2Fsrc%2FApp.tsx%3A10%2C24&workspaceId=25022dc6-b7f9-4ebb-a0bd-889cc7cc7de8

I'm not sure if it has to do with the use of preact or the configuration of rollup.

The code is as follows.

index.js

import { render } from "preact";
import { useState } from "preact/hooks";
import Modal from "react-modal";
import Child from "./Child";

Modal.setAppElement("#root");

const App = () => {
  const [modalIsOpen, setIsOpen] = useState(false);

  return (
    <>
      <button
        onClick={() => {
          setIsOpen(true);
        }}
      >
        Open Modal
      </button>

      <Modal isOpen={modalIsOpen}>
        <Child />
      </Modal>
    </>
  );
};

render(<App />, document.getElementById("root"));

Child.js

import { useState } from "preact/hooks";

const Content = () => {
  // get an error when use hooks 
  const [count, setCount] = useState(0);

  return <div />;
};

export default Content;

rollup.config.js

import typescript from "rollup-plugin-typescript2";
import scss from "rollup-plugin-scss";
import clear from "rollup-plugin-clear";
import { nodeResolve } from "@rollup/plugin-node-resolve";
import commonjs from "@rollup/plugin-commonjs";
import { babel } from "@rollup/plugin-babel";
import replace from "@rollup/plugin-replace";
import { terser } from "rollup-plugin-terser";
import serve from "rollup-plugin-serve";
import livereload from "rollup-plugin-livereload";
import htmlTemplate from "rollup-plugin-generate-html-template";
import postcss from "rollup-plugin-postcss";
import alias from "@rollup/plugin-alias";

export default {
  input: ["./src/index.tsx"],
  output: {
    file: "dist/main.js",
    format: "cjs",
  },
  plugins: [
    alias({
      entries: [
        { find: "react", replacement: "preact/compat" },
        { find: "react-dom/test-utils", replacement: "preact/test-utils" },
        { find: "react-dom", replacement: "preact/compat" },
        { find: "react/jsx-runtime", replacement: "preact/jsx-runtime" },
      ],
    }),
    typescript(),
    postcss({
      extensions: [".css"],
      extract: true,
      modules: true,
    }),
    clear({
      targets: ["dist"],
    }),
    replace({
      preventAssignment: true,
      "process.env.NODE_ENV": JSON.stringify("production"), 
    }),
    nodeResolve({}),
    commonjs(),
    babel(), 
    terser(),
    serve("dist"),
    livereload("src"), 
    htmlTemplate({
      template: "public/index.html",
      target: "dist/index.html",
    }),
  ],
  external: [
    {
      includeDependencies: true,
    },
  ], 
};

[JoviDeCroock]

The reproduction still doesn't work though...

[AprilLastCherry]

codesandbox is still not accessible?

[JoviDeCroock]

... still unable to access

[AprilLastCherry]

The reproduction still doesn't work though... this demo code https://github.com/AprilLastCherry/preact-demo.git

[AprilLastCherry]

... still unable to access

I'm sorry, but I don't know how to open the codesandbox permission. I thought I had already opened it. I was so stupid, cry.

[JoviDeCroock]

No problem at all, will check it out later

[AprilLastCherry]

I solved the development problem by replacing functional components with class components，Although the underlying principle is still not clear, it can be developed.I plan figure out the principle later.