TypeError: Cannot read properties of undefined (reading '__H') when using Preact

[brianjenkins94]

Minimal sample:

nextra-preact.zip

Steps to reproduce:

npm install
npm start

package.json:

{
  "devDependencies": {
    "@prefresh/webpack": "latest",
    "@types/node": "latest",
    "@types/react": "latest",
    "@types/react-dom": "latest",
    "@typescript-eslint/eslint-plugin": "latest",
    "@typescript-eslint/parser": "latest",
    "eslint": "latest",
    "eslint-config-next": "latest",
    "next": "^12.1",
    "nextra": "2.0.0-alpha.56",
    "nextra-theme-docs": "2.0.0-alpha.56",
    "preact-render-to-string": "latest",
    "preact": "latest",
    "react-dom": "npm:@preact/compat@latest",
    "react": "npm:@preact/compat@latest",
    "sass": "latest",
    "ts-node": "latest",
    "typescript": "latest"
  }
}

Stacktrace:

error - TypeError: Cannot read properties of undefined (reading '__H')
    at p (/node_modules/preact/hooks/dist/hooks.mjs:1:158)
    at F (/node_modules/preact/hooks/dist/hooks.mjs:1:875)
    at s (/node_modules/preact/hooks/dist/hooks.mjs:1:636)
    at y (/node_modules/@headlessui/react/dist/hooks/use-sync-refs.js:1:178)
    at /node_modules/@headlessui/react/dist/components/listbox/listbox.js:1:4473
    at Object.t (/node_modules/preact/compat/dist/compat.mjs:1:1363)
    at m (\node_modules\preact-render-to-string\dist\commonjs.js:1:2609)
    at m (\node_modules\preact-render-to-string\dist\commonjs.js:1:2724)
    at m (\node_modules\preact-render-to-string\dist\commonjs.js:1:2724)
    at m (\node_modules\preact-render-to-string\dist\commonjs.js:1:2724) {
  page: '/'
}

[brianjenkins94]

Found another person with a similar issue without using Nextra:

preactjs/preact#2690 (comment)

This comment suggests:

preactjs/preact#3512 (comment)

• It may be a Next.js thing
• It may be related to duplicated Preact bundles
• Further down:
  • It may have been introduced with React v18
  • It may be fixed by setting esmExternals: false
    • This did change the error message for me:

error - TypeError: Cannot read properties of undefined (reading 'context')
    at Object.q [as useContext] (nextra-preact/node_modules/preact/hooks/dist/hooks.mjs:1:1014)
    at useMDXComponents (/node_modules/@mdx-js/react/lib/index.js:67:35)
    at Object.MDXProvider (/node_modules/@mdx-js/react/lib/index.js:89:23)
    at m (/node_modules/preact-render-to-string/dist/commonjs.js:1:2609)
    at m (/node_modules/preact-render-to-string/dist/commonjs.js:1:2724)
    at m (/node_modules/preact-render-to-string/dist/commonjs.js:1:4459)
    at m (/node_modules/preact-render-to-string/dist/commonjs.js:1:4459)
    at m (/node_modules/preact-render-to-string/dist/commonjs.js:1:1586)
    at m (/node_modules/preact-render-to-string/dist/commonjs.js:1:1777)
    at m (/node_modules/preact-render-to-string/dist/commonjs.js:1:2724) {
  page: '/'
}

Which could indicate the problem is with @mdx-js or preact-render-to-string.

[brianjenkins94]

With esmExternals: false and this added to my package.json it appears fixed.

{
  "overrides": {
    "nextra": {
      "@mdx-js/react": "npm:@mdx-js/preact@latest"
    },
    "nextra-theme-docs": {
      "@mdx-js/react": "npm:@mdx-js/preact@latest"
    }
  }
}

Looks like this is tracked here: preactjs/next-plugin-preact#53 and here: preactjs/preact#3512

I think I'll open an new issue on preactjs/preact to see if they have any thoughts. I would like not to have to set esmExternals: false if I don't have to.