HTMLElement is not defined (using Web Components in Next.js)

issue

Describe the issue

when using web components inside a next.js app, you may get this error:

ReferenceError: HTMLElement is not defined

this is just Next.js trying to SSR your web component.

Fix

Instead of

import "wc-spinners/dist/half-circle-spinner.js"

do

function Component() {

  React.useEffect(() => {
    import("wc-spinners/dist/half-circle-spinner.js");
  });
  // etc
	return <div>
		// etc
		<half-circle-spinner />
		</div>
}
}

just filing this for future people who searched like me and found no WC stuff in this repo

[joamartico]

when I try to import it using useEffect I get this syntax error: “‘import’ and ‘export’ may only appear at the top level” How can I solve It?

[balazsorban44]

This issue has been automatically locked due to no recent activity. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.