Nuxt 3 Tailwindcss Viewer errors

[mdr0414]

I run "npm run dev" and launch localhost:3000/_tailwind and I am getting a console error in Chrome Version 107.0.5304.106 (Official Build) (64-bit) that reads:

Uncaught SyntaxError: Unexpected token '<' (at chunk-vendors.d4b2e20c.js:1:1) app.487587de.js:1 
Uncaught SyntaxError: Unexpected token '<' (at app.487587de.js:1:1)

And nothing happens, no tailwind viewer, nothing.

Version

"@nuxtjs/tailwindcss": "^6.1.3"
"nuxt": "3.0.0-rc.13",

Steps to reproduce

Fresh install from: npx nuxi init my-app
npm run dev

Here's my setup, I need original TailwindCSS for custom colors, etc.:

// npm run dev
Nuxi 3.0.0-rc.13
Nuxt 3.0.0-rc.13 with Nitro 0.6.1
 
  > Local:    http://localhost:3000/ 
  > Network:  http://192.168.1.8:3000/

i Using default Tailwind CSS file from runtime/tailwind.css                                         
i Tailwind Viewer: http://localhost:3000/_tailwind/
i Vite client warmed up in 3334ms
v Nitro built in 1224 ms

Uncaught SyntaxError: Unexpected token '<' (at chunk-vendors.d4b2e20c.js:1:1) app.487587de.js:1 
Uncaught SyntaxError: Unexpected token '<' (at app.487587de.js:1:1)

// package.json

{
  "private": true,
  "scripts": {
    "build": "nuxt build",
    "dev": "nuxt dev",
    "generate": "nuxt generate",
    "preview": "nuxt preview",
    "postinstall": "nuxt prepare"
  },
  "devDependencies": {
    "@nuxtjs/tailwindcss": "^6.1.3",
    "@tailwindcss/forms": "^0.5.3",
    "@tailwindcss/typography": "^0.5.8",
    "nuxt": "3.0.0-rc.13",
    "tailwindcss": "^3.2.2"
  }
}

// nuxt.config.ts

// https://v3.nuxtjs.org/api/configuration/nuxt.config
export default defineNuxtConfig({
    modules: ['@nuxtjs/tailwindcss']
})

[mlutsiuk]

Also encountered this issue but only on disabled server side rendering (ssr: true in nuxt.config.ts)

[sifferhans]

This is still a problem when setting ssr: false in nuxt config.

Could it have something to do with this issue? rogden/tailwind-config-viewer#49

[michaelpumo]

It does not work for me in latest Nuxt 3.8.0 either but I did not see any errors in the console at all. Just a blank screen.

#746

[wJoenn]

I also have an issue where going to localhost:3000/_tailwind shows a blank page and returns a 404 in the console but localhost:3000/_tailwind/ works fine.

I'm not sure it's related but the Nuxt Devtools is not showing the tailwind viewer either. It's trying to access a /modules/_tailwind page which returns a 404 too. It's problematic because contrary to accessing the viewer from another tab where I can just add a / at the end of the url, I can't modify the path used by the Devtools.

ssr is not set to false in any of my project.
You can replicate this quite easily by making a new Nuxt project, enable the devtools, install the tailwind module, launch the server and try to access the tailwind viewer from the devtools

[blowsie]

I also have an issue where going to localhost:3000/_tailwind shows a blank page and returns a 404 in the console but localhost:3000/_tailwind/ works fine.

I'm not sure it's related but the Nuxt Devtools is not showing the tailwind viewer either. It's trying to access a /modules/_tailwind page which returns a 404 too. It's problematic because contrary to accessing the viewer from another tab where I can just add a / at the end of the url, I can't modify the path used by the Devtools.

ssr is not set to false in any of my project. You can replicate this quite easily by making a new Nuxt project, enable the devtools, install the tailwind module, launch the server and try to access the tailwind viewer from the devtools

I created a PR to this effect, but im not sure how to test my changes

[blowsie]

I think the fact that the iframe still has /modules/ in the path is going to be an issue.

[wJoenn]

@blowsie Yeah the /modules seems to be the obvious issue but I'm not sure whether that's coming from this module or the devtools 🤔

[ineshbose]

Does the latest version bring improvements?

[wJoenn]

No matching version found for @nuxtjs/tailwindcss@^6.9.5
The latest release of @nuxtjs/tailwindcss is "6.9.4".

[ineshbose]

No matching version found for @nuxtjs/tailwindcss@^6.9.5
The latest release of @nuxtjs/tailwindcss is "6.9.4".

Published now.

[wJoenn]

Fixed for me 🙌
Thank you

[ineshbose]

All persisting issues with the viewer should now be resolved on the nightly release channel!

Let me know if the issues have been resolved or if they persist; I'll release 6.11.2 accordingly or reopen this issue. 🙂