Next.js compatibility

[pakatagoh]

Hi nteract team,

I'm currently trying to make use of @nteract/jupyter-widgets in a project of mine with Next.js but I'm running into the issue below. I'm wondering if anyone has encountered such an issue and managed to solve it.

[captainsafia]

Thanks for opening this issue, @pakatagoh!

Unfortunately, we don't own the @jupyter-widgets/base component that is being imported by the jupyter-widgets package. What version of next.js are you using? vercel/next.js#12079 (comment) seems to indicate this was fixed in the 9.5.4 release.

[pakatagoh]

currently on V10 of next.js. the setup I have is a lerna managed monorepo where the nextjs project is one of the packages. Not 100% sure if it affects anything.

[captainsafia]

We use a similar setup in the nteract monorepo. However, we don't have ipywidget support included as part of the default app.

I misspoke earlier, the code in question is actually in our codebase.

outputs/packages/jupyter-widgets/src/renderer/backbone-wrapper.tsx

Lines 9 to 14 in 2f0e9bc

	import "@jupyter-widgets/base/css/index.css";
	import "@jupyter-widgets/controls/css/labvariables.css";
	import "@jupyter-widgets/controls/css/materialcolors.css";
	import "@jupyter-widgets/controls/css/phosphor.css";
	import "@jupyter-widgets/controls/css/widgets-base.css";
	import "@jupyter-widgets/controls/css/widgets.css";

Would you be interested in trying to update this to use a require instead of an import to see if that resolves the issue?