Web Workers causes issues in Nuxt 3.1 and above

[Parakoos]

Environment

• Operating System: Windows_NT
• Node Version: v16.15.0
• Nuxt Version: 3.1.0
• Nitro Version: 2.3.3
• Package Manager: npm@8.5.5
• Builder: vite
• User Config: build, css
• Runtime Modules: -
• Build Modules: -

Reproduction

This is a bug only for production builds, so instead of a stackblitz, I've made a github repo with the minimal reproduction.

https://github.com/Parakoos/nuxt-3.1.0-webworker-bug

See it working on 3.0.0

The repo is initially at nuxt v3.0.0, the last version where things work. To see it working, do:

npm install
npm run build
npm run preview

On localhost, you should see a Vuetify button that when clicked, loads a web worker, tells it to do some computations and then return the answer to be displayed in the main page. You can also see some console messages from the web worker.

See it break on 3.1.0

Now switch the version of Nuxt in package.json to 3.1.0. Then run it again.

npm install
npm run build
npm run preview

You should now no longer see the vuetify button. You can also see that the web worker has gone mad in the console. And the only thing we changed was the version of Nuxt.

Describe the bug

I don't know why, but something has changed in how Vite loads the web worker from one version to another. Perhaps this is more a Vite bug than a Nuxt bug. In any case, it would be good to know what the guidance is for using Web Workers in Nuxt, especially when it comes to Typescript Web Workers that need compiling. (this example does not have that as the bug is present for vanilla workers)

Additional context

No response

Logs

No response

[Parakoos]

I am not sure if #20191 is the same issue I've got. Both seem to have issues with Web Workers, but nuxt v3.2.3 seem to work for him, while for me the issue starts already at 3.1.0.

Nevertheless, the I tried to pin Vite to version "4.3.0-beta.4" as suggested by @danielroe .

  "devDependencies": {
    "nuxt": "3.1.0",
    "vite": "4.3.0-beta.4"
  },
  "dependencies": {
    "vuetify": "3.1.14"
  },
  "overrides": {
    "vite": "4.3.0-beta.4"
  }

But it didn't help. I did notice that when building, I got the following log statement, which makes me thing that I didn't manage to pin vite down to the 4.3 version.

Building client...
vite v4.1.4 building for production...

[danielroe]

If you are using pnpm, then you either need pnpm.overrides or resolutions.

[Parakoos]

I got the vite version to 4.3.0-beta.7 (and tried beta 4 too)

But the build failed with this error:

1: import { defineComponent, h, ref, resolveComponent, computed, onMounted, onBeforeUnmount } from "vue";
                                     ^
2: import { hasProtocol } from "ufo";
3: import { preloadRouteComponents } from "../composables/preload.mjs";

 ERROR  "resolveComponent" is not exported by "../../node_modules/vue/dist/vue.runtime.esm.js", imported by "node_modules/.pnpm/nuxt@3.1.0/node_modules/nuxt/dist/app/components/nuxt-link.mjs".

[vinayakkulkarni]

vitejs/vite#12629 (comment)

[vinayakkulkarni]

This seems to work for me:

1. Install beta.8 vite:
   npm i -D vite@4.3.0-beta.8 -f

2. Update package.json:

  "overrides": {
    "vite": "4.3.0-beta.8"
  },
  "resolutions": {
    "vite": "4.3.0-beta.8"
  },

3. Build & test build:

npm run generate && npx http-server dist -p 3000

4. Visit http://localhost:3000, et. voila! 🎉

[danielroe]

Nuxt 3.4.2 now includes Vite 4.3. If this isn't fixed, do let me know with a reproduction and I'll happily reopen.

[Parakoos]

I can confirm that this now works! Awesome! Thanks!