Page is not hydrated after dynamic import

[secretlifeof]

Bug report

Describe the bug

I am trying to import a custom element written in Preact using dynamic import. The custom element is loaded into the DOM but the page does not seem to get hydrated.

To Reproduce

If you open the sandbox the page gets loaded, but it should print "mounted" in the console. It should also console if you Click on "Click me".
https://codesandbox.io/s/nextjs-dynamic-import-issue-ylvsy

Expected behavior

Loading custom and javascript gets hydrated without errors.

System information

• Version of Next.js: 9.2.3-canary.28 (also tried 9.2.2)
  Preact: 10.3.3
  React: 16.13.0

How do you recommend loading an external custom element inside a .js/.ts file?

[secretlifeof]

For anybody else looking for how to add custom elements/web components to Nextjs. I tried the following and it works without dynamic import.

import './custom-element'

const CustomElementFrame = () => {
  const refContainer = useRef(null)

  useEffect(() => {
    var node = document.createElement('custom-element') // add <custom-element>
    refContainer.current.appendChild(node)
  })

  return (
    <div ref={refContainer}>
    </div>
  )
}

[developit]

Hi @secretlifeof! - the @zeit/next-preact plugin predates the current version of Preact, and doesn't actually use Preact to render. I have an example repo with the correct setup in the meantime.

[secretlifeof]

Hi @developit - Thank you for having a look. The sandbox above does not use @zeit/next-preact. Just plain Nextjs and Preact inside a custom element. I saw your sample repo a week ago and am grateful that you created that, but sadly that also does not work. This time there seems to be a continuous loop crashing my browser tab. Please look at the following repo:

https://codesandbox.io/s/github/secretlifeof/nextjs-preact-demo-custom-element-not-loading