Worker setup with next.js

[GrantCuster]

I'm trying to get this running with next.js, when I use the suggested worker code I get this error:

./src/app/page.tsx:50:15
Module not found: ESM packages (monaco-tailwindcss/tailwindcss.worker) need to be imported. Use 'import' to reference the package instead. https://nextjs.org/docs/messages/import-esm-externals
  48 |         );
  49 |       case "tailwindcss":
> 50 |         return new Worker(
     |               ^
  51 |           new URL("monaco-tailwindcss/tailwindcss.worker", import.meta.url)
  52 |         );
  53 |       default:

https://nextjs.org/docs/messages/module-not-found

I tried adding;

const nextConfig = {
  experimental: {
    esmExternal: true,
  },
}

to my next.js config but that did not help.

Here is the repo I am using https://github.com/GrantCuster/tailwind-test, with the relevant code in https://github.com/GrantCuster/tailwind-test/blob/main/src/app/page.tsx. Any tips are appreciated!

[GrantCuster]

Ah I had a typo in the config

const nextConfig = {
  experimental: {
    esmExternals: 'loose',
  },
}

Loads the page. I'll try and get it running that way. Closing this issue.

[dinhanhthi]

Hello, did you successfully integrate monaco-tailwindcss with Next.js? I check your repo but it doesn't work.

[remcohaszing]

Duplicate of #74