framework Issues Loading Page with Windows + Content + @nuxtjs/tailwindcss

Environment

Operating System: Windows_NT
Node Version: v16.17.0
Nuxt Version: 3.0.0-rc.8
Package Manager: [email protected]
Builder: vite
User Config: content, modules, tailwindcss
Runtime Modules: @nuxt/[email protected], @nuxtjs/[email protected]
Build Modules: -

Reproduction

https://github.com/JustSomeGuy805/github-qyxx2u.git

Describe the bug

When running and trying to navigate to another page via a link, it won't go. On Firefox, the anchor tag works but the NuxtLink tag doesn't. On chrome, I get a bunch of [vite]: css hot updated messages in the console before I get a 'Reloading Server' page. Also, this only happens on my Windows 10 and 11 environments(two physically separate computers). In my Debian WSH environment and StackBlitz it works fine.

Additional context

No response

Logs

This is what the firefox console log looks like:

[Content] WS reconnecting.. web-socket.mjs:4
TypeError: error loading dynamically imported module client.ts:113:12
Loading failed for the module with source “http://localhost:3000/node_modules/@nuxtjs/tailwindcss/dist/runtime/tailwind.css?import&t=1661149338072”. localhost:3000:4:1
[hmr] Failed to reload /node_modules/@nuxtjs/tailwindcss/dist/runtime/tailwind.css. This could be due to syntax errors or importing non-existent modules. (see errors above) client.ts:115:10
[vite] hot updated: /node_modules/@nuxtjs/tailwindcss/dist/runtime/tailwind.css client.ts:448:12
XHRGEThttp://localhost:3000/api/_content/query?_params={"where":[{"_partial":{"$not":true},"navigation":{"$not":false}}],"without":["body"],"surround":{"query":"/other"},"sort":[{"_file":1,"$numeric":true}]}&previewToken
XHRGEThttp://localhost:3000/api/_content/query?_params={"where":[{"_path":"/other"}],"first":true,"sort":[{"_file":1,"$numeric":true}]}&previewToken
[HTTP/1.1 503 Server Unavailable 6ms]

[vite] connecting... client.ts:19:8
[vite] connected. client.ts:134:14
[vite] connecting... client.ts:19:8
[vite] connected. client.ts:134:14
<Suspense> is an experimental feature and its API will likely change. runtime-core.esm-bundler.js:1331:47
[Content] WS connect to ws://localhost:4000/ws web-socket.mjs:4
[Content] WS connected! web-socket.mjs:4




This is what Chrome looks like when I click on the anchor(page doesn't navigate):

[vite] css hot updated: /node_modules/@nuxtjs/tailwindcss/dist/runtime/tailwind.css
client.ts:192 [vite] css hot updated: /node_modules/@nuxtjs/tailwindcss/dist/runtime/tailwind.css
client.ts:192 [vite] css hot updated: /node_modules/@nuxtjs/tailwindcss/dist/runtime/tailwind.css
client.ts:192 [vite] css hot updated: /node_modules/@nuxtjs/tailwindcss/dist/runtime/tailwind.css
client.ts:448 [vite] hot updated: /node_modules/@nuxtjs/tailwindcss/dist/runtime/tailwind.css
client.ts:192 [vite] css hot updated: /node_modules/@nuxtjs/tailwindcss/dist/runtime/tailwind.css
client.ts:192 [vite] css hot updated: /node_modules/@nuxtjs/tailwindcss/dist/runtime/tailwind.css
client.ts:192 [vite] css hot updated: /node_modules/@nuxtjs/tailwindcss/dist/runtime/tailwind.css
client.ts:192 [vite] css hot updated: /node_modules/@nuxtjs/tailwindcss/dist/runtime/tailwind.css
3client.ts:448 [vite] hot updated: /node_modules/@nuxtjs/tailwindcss/dist/runtime/tailwind.css
client.ts:192 [vite] css hot updated: /node_modules/@nuxtjs/tailwindcss/dist/runtime/tailwind.css
client.ts:192 [vite] css hot updated: /node_modules/@nuxtjs/tailwindcss/dist/runtime/tailwind.css
client.ts:192 [vite] css hot updated: /node_modules/@nuxtjs/tailwindcss/dist/runtime/tailwind.css
client.ts:192 [vite] css hot updated: /node_modules/@nuxtjs/tailwindcss/dist/runtime/tailwind.css
2client.ts:448 [vite] hot updated: /node_modules/@nuxtjs/tailwindcss/dist/runtime/tailwind.css
client.ts:192 [vite] css hot updated: /node_modules/@nuxtjs/tailwindcss/dist/runtime/tailwind.css
client.ts:192 [vite] css hot updated: /node_modules/@nuxtjs/tailwindcss/dist/runtime/tailwind.css
client.ts:192 [vite] css hot updated: /node_modules/@nuxtjs/tailwindcss/dist/runtime/tailwind.css
client.ts:192 [vite] css hot updated: /node_modules/@nuxtjs/tailwindcss/dist/runtime/tailwind.css
client.ts:192 [vite] css hot updated: /node_modules/@nuxtjs/tailwindcss/dist/runtime/tailwind.css
client.ts:192 [vite] css hot updated: /node_modules/@nuxtjs/tailwindcss/dist/runtime/tailwind.css
client.ts:192 [vite] css hot updated: /node_modules/@nuxtjs/tailwindcss/dist/runtime/tailwind.css
client.ts:192 [vite] css hot updated: /node_modules/@nuxtjs/tailwindcss/dist/runtime/tailwind.css
client.ts:448 [vite] hot updated: /node_modules/@nuxtjs/tailwindcss/dist/runtime/tailwind.css
client.ts:192 [vite] css hot updated: /node_modules/@nuxtjs/tailwindcss/dist/runtime/tailwind.css
client.ts:192 [vite] css hot updated: /node_modules/@nuxtjs/tailwindcss/dist/runtime/tailwind.css
client.ts:192 [vite] css hot updated: /node_modules/@nuxtjs/tailwindcss/dist/runtime/tailwind.css
client.ts:192 [vite] css hot updated: /node_modules/@nuxtjs/tailwindcss/dist/runtime/tailwind.css
3client.ts:448 [vite] hot updated: /node_modules/@nuxtjs/tailwindcss/dist/runtime/tailwind.css
Navigated to http://localhost:3000/
client.ts:19 [vite] connecting...
client.ts:134 [vite] connected.
client.ts:19 [vite] connecting...
client.ts:134 [vite] connected.
runtime-core.esm-bundler.js:1331 <Suspense> is an experimental feature and its API will likely change.
web-socket.mjs:4 [Content] WS connect to ws://localhost:4000/ws
web-socket.mjs:4 [Content] WS connected!

Aug 22 '22 06:08 JustSomeGuy805

I am able to reproduce this on linux and windows, but not on macos.

The websocket connection ws://localhost:24678/ keeps getting spammed with full-reload messages, even though there are no file changes:

{"type":"connected"}
{"type":"update","updates":[{"type":"js-update","path":"/node_modules/@nuxtjs/tailwindcss/dist/runtime/tailwind.css","acceptedPath":"/node_modules/@nuxtjs/tailwindcss/dist/runtime/tailwind.css","timestamp":1663844257197},{"type":"css-update","path":"/node_modules/@nuxtjs/tailwindcss/dist/runtime/tailwind.css?direct","acceptedPath":"/node_modules/@nuxtjs/tailwindcss/dist/runtime/tailwind.css?direct","timestamp":1663844257197}]}
{"type":"full-reload"}
{"type":"update","updates":[{"type":"js-update","path":"/node_modules/@nuxtjs/tailwindcss/dist/runtime/tailwind.css","acceptedPath":"/node_modules/@nuxtjs/tailwindcss/dist/runtime/tailwind.css","timestamp":1663844257198},{"type":"css-update","path":"/node_modules/@nuxtjs/tailwindcss/dist/runtime/tailwind.css?direct","acceptedPath":"/node_modules/@nuxtjs/tailwindcss/dist/runtime/tailwind.css?direct","timestamp":1663844257198}]}
{"type":"full-reload"}

Not sure if this is a bug in nuxt or nuxtjs/tailwindcss.

EDIT:

https://stackblitz.com/github/JustSomeGuy805/github-qyxx2u

EDIT2:

Might be relevant

https://github.com/nuxt-modules/tailwindcss/issues/448#issuecomment-1150271570

EDIT3:

I found a workaround: https://github.com/nuxt-modules/tailwindcss/issues/449#issuecomment-1084768347

I can confirm it no longer loops in linux. This defeats the purpose though, because it no longer uses the tailwind.css

Sep 22 '22 11:09 sevillaarvin

I am able to reproduce this on linux and windows, but not on macos.

What versions of Nuxt, Tailwind and Content are you using in your environment?

Sep 22 '22 16:09 JustSomeGuy805

got the same issue after upgrading nuxt/content to ^2.1.1

Sep 23 '22 05:09 gaminglifex

I am able to reproduce this on linux and windows, but not on macos.

What versions of Nuxt, Tailwind and Content are you using in your environment?

I cloned your repo. Here are my nuxi info:

linux

Nuxt CLI v3.0.0-rc.8
RootDir: /tmp/github-qyxx2u
Nuxt project info: 

------------------------------
- Operating System: `Linux`
- Node Version:     `v18.7.0`
- Nuxt Version:     `3.0.0-rc.8`
- Package Manager:  `[email protected]`
- Builder:          `vite`
- User Config:      `content`, `modules`
- Runtime Modules:  `@nuxt/[email protected]`, `@nuxtjs/[email protected]`
- Build Modules:    `-`
------------------------------

windows

[90mNuxi [1m3.0.0-rc.11[22m[39m
RootDir: C:/Users/User/sandbox/github-qyxx2u
Nuxt project info: 

------------------------------
- Operating System: `Windows_NT`
- Node Version:     `v18.9.0`
- Nuxt Version:     `3.0.0-rc.11`
- Nitro Version:    `0.5.4`
- Package Manager:  `[email protected]`
- Builder:          `vite`
- User Config:      `content`, `modules`
- Runtime Modules:  `@nuxt/[email protected]`, `@nuxtjs/[email protected]`
- Build Modules:    `-`

macos

Nuxt CLI v3.0.0-rc.8
RootDir: /private/tmp/github-qyxx2u
Nuxt project info: 

------------------------------
- Operating System: `Darwin`
- Node Version:     `v18.8.0`
- Nuxt Version:     `3.0.0-rc.8`
- Package Manager:  `[email protected]`
- Builder:          `vite`
- User Config:      `content`, `modules`
- Runtime Modules:  `@nuxt/[email protected]`, `@nuxtjs/[email protected]`
- Build Modules:    `-`
------------------------------

Sep 23 '22 06:09 sevillaarvin

framework framework copied to clipboard

Issues Loading Page with Windows + Content + @nuxtjs/tailwindcss

Environment

Reproduction

Describe the bug

Additional context

Logs

framework
framework copied to clipboard