@nuxtjs/tailwindcss: "Cannot read property 'importedModules' of undefined"

[phamhongphuc]

I am trying to setup a project with Nuxt + Vite and TailwindCSS but I have some problems.

With some specific versions, TailwindCSS doesn't work and can't start dev server.

With some other specific versions, hot reload doesn't work well with tailwind and nuxt-vite. It seems that tailwind is not catching changes in the <template> tag. But changes in the <style> tag along with @apply still work.

See the following table for more details.

Reproduction & Versions

https://github.com/phamhongphuc/nuxt-vite-tailwindcss

branch	nuxt-vite	@nuxtjs/tailwindcss	jit mode	dev server	hot reload
tw-jit	no	4.2.1	✔	✔	✔
vite-old-tw-jit	0.1.1	4.2.0	✔	✔	❌
vite-tw-jit	0.1.1	4.2.1	✔	❌	❌
vite-tw-no-jit	0.1.1	4.2.1	❌	✔	✔

Description

1. Hot Reload issue

Related to #159

2. Start dev server failed

 ERROR  Cannot read property 'importedModules' of undefined                                                   14:47:14

  at warmup (node_modules\nuxt-vite\dist\nuxt-vite.js-vite.js:387:71)
  at async Promise.all (index 3)
  at async warmup (node_modules\nuxt-vite\dist\nuxt-vite.js-vite.js:388:5)
  at async Promise.all (index 5)
  at async warmup (node_modules\nuxt-vite\dist\nuxt-vite.js-vite.js:388:5)
  at async Promise.all (index 8)
  at async warmup (node_modules\nuxt-vite\dist\nuxt-vite.js-vite.js:388:5)
  at async Promise.all (index 4)
  at async warmup (node_modules\nuxt-vite\dist\nuxt-vite.js-vite.js:388:5)
  at async Promise.all (index 0)
  at async warmupViteServer (node_modules\nuxt-vite\dist\nuxt-vite.js-vite.js:390:3)

i Waiting for file changes                                                                                    14:47:14
i Memory usage: 94.1 MB (RSS: 170 MB)                                                                         14:47:14
i Listening on: http://localhost:3000/

[ctwhome]

thanks for the extensive details on the issue!

[weleo]

vite 2.3.8 is required to work with tailwind jit

[ctwhome]

Nuxt vite is a bit behind with the npm packages overall with vite.

[ctwhome]

Uploading to vite 2.4.4 doesn't seem to be the solution, you can test it by installing the nuxt-vite module from the fork https://github.com/ctwhome/vite

 yarn add -D ctwhome/vite

[phamhongphuc]

I just check branch vite-tw-jit, it is already installed [email protected], but jit and dev server don't work.

// yarn.lock

vite@^2.3.4:
  version "2.4.2"
  resolved "https://registry.yarnpkg.com/vite/-/vite-2.4.2.tgz#07d00615775c808530bc9f65641062b349b67929"
  integrity sha512-2MifxD2I9fjyDmmEzbULOo3kOUoqX90A58cT6mECxoVQlMYFuijZsPQBuA14mqSwvV3ydUsqnq+BRWXyO9Qa+w==
  dependencies:
    esbuild "^0.12.8"
    postcss "^8.3.5"
    resolve "^1.20.0"
    rollup "^2.38.5"
  optionalDependencies:
    fsevents "~2.3.2"

---

But it seems that if we upgrade vite to version 2.4.4, only jit will not work (this upgrade will fix the dev server issue I described above).

{
  // package.json
  "devDependencies": {
    "@nuxtjs/tailwindcss": "4.2.1",
    "nuxt-vite": "0.1.1"
  },
  "dependencies": {
    "nuxt": "2.15.7"
  },
  "resolutions": {
    "vite": "2.4.4"
  }
}

Yarn resolutions

[ctwhome]

I didn't know about yarn resolutions, thanks for the tip

[ctwhome]

I have tried the latest nuxt-bridge with nuxt-vite and still doesn't work.

[ctwhome]

It doesn't work with Windicss either

[oceangravity]

Same issue here, JIT still not working

[ctwhome]

it is better to not use the module at this moment. 

Install TailwindCSS yourself, you can see an implementation running with nuxt3 https://github.com/ctwhome/top-nuxt3