tailwindcss
tailwindcss copied to clipboard
Infinite loop with nuxt-bridge and [email protected]
Version
@nuxtjs/tailwindcss: 5.0.2 nuxt: nuxt-edge@latest
Reproduction Link
https://github.com/m4sny/nuxt-bridge-tailwind
Steps to reproduce
-
git clone https://github.com/m4sny/nuxt-bridge-tailwind
-
yarn install
-
yarn dev
What is Expected?
It should work without loop
What is actually happening?
After you type the command, the loop begins. I tested on two systems ( Linux and Windows) and I get different results.
On Linux it compiles correctly (screenshot below), the page looks like it works on localhost:3000, but there is this unfortunate compilation loop that starts every 100s on average
On Windows it completely crashes. localhost:3000 doesn't work and the terminal runs like crazy (gif and log below)
GIF: https://gyazo.com/1c6dd1e4f8eb3c6cbe501694c7f4a68d
yarn dev log
$ yarn dev
yarn run v1.22.17
$ nuxi dev
Nuxt CLI v3.0.0-27470397.9ebea90 15:45:42
15:45:43
> Local: http://localhost:3000/
> Network: http://192.168.50.250:3000/
i Merging Tailwind config from ~/tailwind.config.js nuxt:tailwindcss 15:45:44
i Preparing project for development 15:45:46
i Initial build may take a while 15:45:46
i Discovered Components: .nuxt/components/readme.md 15:45:46
√ Builder initialized 15:45:46
i Directory components/ created. Restarting nuxt... 15:45:46
FATAL Cannot read properties of null (reading 'close') 15:45:46
at Builder.unwatch (node_modules\@nuxt\builder-edge\dist\builder.js:666:30)
at Builder.close (node_modules\@nuxt\builder-edge\dist\builder.js:674:10)
at node_modules\@nuxt\builder-edge\dist\builder.js:195:42
at node_modules\hable\dist\hable.js:1:990
at node_modules\hable\dist\hable.js:1:208
at processTicksAndRejections (node:internal/process/task_queues:96:5)
at async Nuxt.callHook (node_modules\hable\dist\hable.js:1:959)
at async Nuxt.close (node_modules\@nuxt\core-edge\dist\core.js:363:5)
at async load (/F:/Dev/Private/nuxt-bridge/node_modules/nuxi/dist/chunks/dev.mjs:6748:11)
at async _applyPromised (/F:/Dev/Private/nuxt-bridge/node_modules/nuxi/dist/chunks/dev.mjs:6696:10)
i Merging Tailwind config from ~/tailwind.config.js nuxt:tailwindcss 15:45:46
√ Nuxt files generated 15:45:46
✖ Client
Compiled with some errors in 283.07ms
i Preparing project for development 15:45:47
i Initial build may take a while 15:45:47
i Discovered Components: .nuxt/components/readme.md 15:45:47
√ Builder initialized 15:45:47
√ Nuxt files generated 15:45:48
ERROR Failed to compile with 5 errors friendly-errors 15:45:48
These relative modules were not found: friendly-errors 15:45:48
friendly-errors 15:45:48
* ./components/nuxt-link.client.js in ./.nuxt/client.js friendly-errors 15:45:48
* ./index.js in ./.nuxt/client.js friendly-errors 15:45:48
* ./middleware.js in ./.nuxt/client.js friendly-errors 15:45:48
* ./mixins/fetch.client in ./.nuxt/client.js friendly-errors 15:45:48
* ./utils.js in ./.nuxt/client.js friendly-errors 15:45:48
i Tailwind Viewer: /_tailwind/ nuxt:tailwindcss 15:45:48
ERROR Watchpack Error (initial scan): Error: ENOTDIR: not a directory, scandir 'F:\Dev\Private\nuxt-bridge\.nuxt\components\nuxt-link.client.js' 15:45:48
ERROR Watchpack Error (initial scan): Error: ENOTDIR: not a directory, scandir 'F:\Dev\Private\nuxt-bridge\.nuxt\index.js' 15:45:48
ERROR Watchpack Error (initial scan): Error: ENOTDIR: not a directory, scandir 'F:\Dev\Private\nuxt-bridge\.nuxt\middleware.js' 15:45:48
ERROR Watchpack Error (initial scan): Error: ENOTDIR: not a directory, scandir 'F:\Dev\Private\nuxt-bridge\.nuxt\mixins\fetch.client.js' 15:45:48
ERROR Watchpack Error (initial scan): Error: ENOTDIR: not a directory, scandir 'F:\Dev\Private\nuxt-bridge\.nuxt\utils.js' 15:45:48
● Client █████████████████████████ after emitting (98%)
WARN 15:45:51
WARN warn - The purge/content options have changed in Tailwind CSS v3.0. 15:45:51
WARN warn - Update your configuration file to eliminate this warning. 15:45:51
WARN warn - https://tailwindcss.com/docs/upgrade-guide#configure-content-sources 15:45:51
● Client █████████████████████████ compiling (0%)
WARN 15:45:51
WARN warn - The purge/content options have changed in Tailwind CSS v3.0. 15:45:51
WARN warn - Update your configuration file to eliminate this warning. 15:45:51
WARN warn - https://tailwindcss.com/docs/upgrade-guide#configure-content-sources 15:45:51
ERROR Failed to compile with 1 errors friendly-errors 15:45:51
● Client █████████████████████████ building (10%) 3/8 modules 5 active
node_modules\eventsource-polyfill\dist\eventsource.js
WARN 15:45:51
WARN warn - The purge/content options have changed in Tailwind CSS v3.0. 15:45:51
WARN warn - Update your configuration file to eliminate this warning. 15:45:51
WARN warn - https://tailwindcss.com/docs/upgrade-guide#configure-content-sources 15:45:51
ERROR Failed to compile with 1 errors friendly-errors 15:45:51
● Client █████████████████████████ building (10%) 7/18 modules 11 active
node_modules\webpack\buildin\module.js
WARN 15:45:51
WARN warn - The purge/content options have changed in Tailwind CSS v3.0. 15:45:51
WARN warn - Update your configuration file to eliminate this warning. 15:45:51
WARN warn - https://tailwindcss.com/docs/upgrade-guide#configure-content-sources 15:45:51
ERROR Failed to compile with 1 errors friendly-errors 15:45:51
● Client █████████████████████████ building (11%) 15/21 modules 6 active
babel-loader › node_modules\@nuxt\bridge\dist\runtime\vue2-bridge.mjs
WARN 15:45:51
WARN warn - The purge/content options have changed in Tailwind CSS v3.0. 15:45:51
WARN warn - Update your configuration file to eliminate this warning. 15:45:51
WARN warn - https://tailwindcss.com/docs/upgrade-guide#configure-content-sources 15:45:51
ERROR Failed to compile with 1 errors friendly-errors 15:45:51
● Client █████████████████████████ building (12%) 22/32 modules 10 active
node_modules\regenerator-runtime\runtime.js
WARN 15:45:51
WARN warn - The purge/content options have changed in Tailwind CSS v3.0. 15:45:51
WARN warn - Update your configuration file to eliminate this warning. 15:45:51
WARN warn - https://tailwindcss.com/docs/upgrade-guide#configure-content-sources 15:45:51
ERROR Failed to compile with 1 errors friendly-errors 15:45:51
● Client █████████████████████████ building (13%) 27/94 modules 67 active
node_modules\core-js\internals\object-to-string.js
WARN 15:45:51
WARN warn - The purge/content options have changed in Tailwind CSS v3.0. 15:45:51
WARN warn - Update your configuration file to eliminate this warning. 15:45:51
WARN warn - https://tailwindcss.com/docs/upgrade-guide#configure-content-sources 15:45:51
ERROR Failed to compile with 1 errors friendly-errors 15:45:51
● Client █████████████████████████ building (15%) 45/94 modules 49 active
node_modules\core-js\internals\object-to-string.js
WARN 15:45:51
WARN warn - The purge/content options have changed in Tailwind CSS v3.0. 15:45:51
WARN warn - Update your configuration file to eliminate this warning. 15:45:51
WARN warn - https://tailwindcss.com/docs/upgrade-guide#configure-content-sources 15:45:51
ERROR Failed to compile with 1 errors friendly-errors 15:45:51
● Client █████████████████████████ building (17%) 60/97 modules 37 active
node_modules\@babel\runtime\helpers\esm\typeof.js
WARN 15:45:51
WARN warn - The purge/content options have changed in Tailwind CSS v3.0. 15:45:51
WARN warn - Update your configuration file to eliminate this warning. 15:45:51
WARN warn - https://tailwindcss.com/docs/upgrade-guide#configure-content-sources 15:45:51
ERROR Failed to compile with 1 errors friendly-errors 15:45:51
● Client █████████████████████████ building (21%) 92/97 modules 5 active
node_modules\@babel\runtime\helpers\esm\typeof.js
WARN 15:45:51
WARN warn - The purge/content options have changed in Tailwind CSS v3.0. 15:45:51
WARN warn - Update your configuration file to eliminate this warning. 15:45:51
WARN warn - https://tailwindcss.com/docs/upgrade-guide#configure-content-sources 15:45:51
ERROR Failed to compile with 1 errors friendly-errors 15:45:51
● Client █████████████████████████ building (21%) 97/102 modules 5 active
node_modules\core-js\internals\function-name.js
WARN 15:45:51
WARN warn - The purge/content options have changed in Tailwind CSS v3.0. 15:45:51
WARN warn - Update your configuration file to eliminate this warning. 15:45:51
WARN warn - https://tailwindcss.com/docs/upgrade-guide#configure-content-sources 15:45:51
ERROR Failed to compile with 1 errors friendly-errors 15:45:51
● Client █████████████████████████ building (22%) 100/147 modules 47 active
node_modules\core-js\internals\engine-is-ios.js
WARN 15:45:51
WARN warn - The purge/content options have changed in Tailwind CSS v3.0. 15:45:51
WARN warn - Update your configuration file to eliminate this warning. 15:45:51
WARN warn - https://tailwindcss.com/docs/upgrade-guide#configure-content-sources 15:45:51
ERROR Failed to compile with 1 errors friendly-errors 15:45:51
● Client █████████████████████████ building (25%) 127/160 modules 33 active
node_modules\core-js\modules\es.math.to-string-tag.js
WARN 15:45:51
WARN warn - The purge/content options have changed in Tailwind CSS v3.0. 15:45:51
WARN warn - Update your configuration file to eliminate this warning. 15:45:51
WARN warn - https://tailwindcss.com/docs/upgrade-guide#configure-content-sources 15:45:51
ERROR Failed to compile with 1 errors friendly-errors 15:45:51
● Client █████████████████████████ building (25%) 128/197 modules 69 active
babel-loader › .nuxt\empty.js
WARN 15:45:51
WARN warn - The purge/content options have changed in Tailwind CSS v3.0. 15:45:51
WARN warn - Update your configuration file to eliminate this warning. 15:45:51
WARN warn - https://tailwindcss.com/docs/upgrade-guide#configure-content-sources 15:45:51
ERROR Failed to compile with 1 errors friendly-errors 15:45:51
● Client █████████████████████████ building (28%) 154/202 modules 48 active
node_modules\core-js\modules\es.object.set-prototype-of.js
WARN 15:45:51
WARN warn - The purge/content options have changed in Tailwind CSS v3.0. 15:45:51
WARN warn - Update your configuration file to eliminate this warning. 15:45:51
WARN warn - https://tailwindcss.com/docs/upgrade-guide#configure-content-sources 15:45:51
ERROR Failed to compile with 1 errors friendly-errors 15:45:51
● Client █████████████████████████ building (29%) 159/206 modules 47 active
babel-loader › node_modules\h3\dist\index.mjs
WARN 15:45:51
WARN warn - The purge/content options have changed in Tailwind CSS v3.0. 15:45:51
WARN warn - Update your configuration file to eliminate this warning. 15:45:51
WARN warn - https://tailwindcss.com/docs/upgrade-guide#configure-content-sources 15:45:51
ERROR Failed to compile with 1 errors friendly-errors 15:45:51
● Client █████████████████████████ building (31%) 179/206 modules 27 active
babel-loader › node_modules\h3\dist\index.mjs
WARN 15:45:51
WARN warn - The purge/content options have changed in Tailwind CSS v3.0. 15:45:51
WARN warn - Update your configuration file to eliminate this warning. 15:45:51
WARN warn - https://tailwindcss.com/docs/upgrade-guide#configure-content-sources 15:45:51
ERROR Failed to compile with 1 errors friendly-errors 15:45:51
● Client █████████████████████████ building (32%) 189/206 modules 17 active
babel-loader › node_modules\h3\dist\index.mjs
WARN 15:45:51
WARN warn - The purge/content options have changed in Tailwind CSS v3.0. 15:45:51
WARN warn - Update your configuration file to eliminate this warning. 15:45:51
WARN warn - https://tailwindcss.com/docs/upgrade-guide#configure-content-sources 15:45:51
ERROR Failed to compile with 1 errors friendly-errors 15:45:51
● Client █████████████████████████ building (34%) 204/216 modules 12 active
node_modules\core-js\internals\create-property-descriptor.js
WARN 15:45:51
WARN warn - The purge/content options have changed in Tailwind CSS v3.0. 15:45:51
WARN warn - Update your configuration file to eliminate this warning. 15:45:51
WARN warn - https://tailwindcss.com/docs/upgrade-guide#configure-content-sources 15:45:51
ERROR Failed to compile with 1 errors friendly-errors 15:45:51
● Client █████████████████████████ compiling (0%)
WARN 15:45:51
WARN warn - The purge/content options have changed in Tailwind CSS v3.0. 15:45:51
WARN warn - Update your configuration file to eliminate this warning. 15:45:51
WARN warn - https://tailwindcss.com/docs/upgrade-guide#configure-content-sources 15:45:51
ERROR Failed to compile with 1 errors friendly-errors 15:45:51
● Client █████████████████████████ building (36%) 219/249 modules 30 active
node_modules\core-js\modules\es.string.starts-with.js
WARN 15:45:51
WARN warn - The purge/content options have changed in Tailwind CSS v3.0. 15:45:51
WARN warn - Update your configuration file to eliminate this warning. 15:45:51
WARN warn - https://tailwindcss.com/docs/upgrade-guide#configure-content-sources 15:45:51
ERROR Failed to compile with 1 errors friendly-errors 15:45:51
● Client █████████████████████████ building (37%) 227/264 modules 37 active
node_modules\core-js\internals\freezing.js
WARN 15:45:51
WARN warn - The purge/content options have changed in Tailwind CSS v3.0. 15:45:51
WARN warn - Update your configuration file to eliminate this warning. 15:45:51
WARN warn - https://tailwindcss.com/docs/upgrade-guide#configure-content-sources 15:45:51
ERROR Failed to compile with 1 errors friendly-errors 15:45:51
● Client █████████████████████████ building (39%) 242/274 modules 32 active
babel-loader › .nuxt\router.js
WARN 15:45:51
WARN warn - The purge/content options have changed in Tailwind CSS v3.0. 15:45:51
WARN warn - Update your configuration file to eliminate this warning. 15:45:51
WARN warn - https://tailwindcss.com/docs/upgrade-guide#configure-content-sources 15:45:51
ERROR Failed to compile with 1 errors friendly-errors 15:45:51
● Client █████████████████████████ building (39%) 249/274 modules 25 active
babel-loader › .nuxt\router.js
WARN 15:45:51
WARN warn - The purge/content options have changed in Tailwind CSS v3.0. 15:45:51
WARN warn - Update your configuration file to eliminate this warning. 15:45:51
WARN warn - https://tailwindcss.com/docs/upgrade-guide#configure-content-sources 15:45:51
ERROR Failed to compile with 1 errors friendly-errors 15:45:51
● Client █████████████████████████ building (40%) 252/282 modules 30 active
node_modules\core-js\internals\v8-prototype-define-bug.js
WARN 15:45:51
WARN warn - The purge/content options have changed in Tailwind CSS v3.0. 15:45:51
WARN warn - Update your configuration file to eliminate this warning. 15:45:51
WARN warn - https://tailwindcss.com/docs/upgrade-guide#configure-content-sources 15:45:51
ERROR Failed to compile with 1 errors friendly-errors 15:45:51
● Client █████████████████████████ building (42%) 268/283 modules 15 active
node_modules\core-js\internals\regexp-exec-abstract.js
WARN 15:45:51
WARN warn - The purge/content options have changed in Tailwind CSS v3.0. 15:45:51
WARN warn - Update your configuration file to eliminate this warning. 15:45:51
WARN warn - https://tailwindcss.com/docs/upgrade-guide#configure-content-sources 15:45:51
ERROR Failed to compile with 1 errors friendly-errors 15:45:51
● Client █████████████████████████ building (43%) 277/294 modules 17 active
node_modules\core-js\internals\object-get-own-property-names.js
WARN 15:45:51
WARN warn - The purge/content options have changed in Tailwind CSS v3.0. 15:45:51
WARN warn - Update your configuration file to eliminate this warning. 15:45:51
WARN warn - https://tailwindcss.com/docs/upgrade-guide#configure-content-sources 15:45:51
ERROR Failed to compile with 1 errors friendly-errors 15:45:51
● Client █████████████████████████ building (44%) 287/301 modules 14 active
node_modules\core-js\internals\same-value.js
WARN 15:45:51
WARN warn - The purge/content options have changed in Tailwind CSS v3.0. 15:45:51
WARN warn - Update your configuration file to eliminate this warning. 15:45:51
WARN warn - https://tailwindcss.com/docs/upgrade-guide#configure-content-sources 15:45:51
ERROR Failed to compile with 1 errors friendly-errors 15:45:51
● Client █████████████████████████ building (45%) 294/302 modules 8 active
node_modules\core-js\internals\array-buffer-non-extensible.js
WARN 15:45:51
WARN warn - The purge/content options have changed in Tailwind CSS v3.0. 15:45:51
WARN warn - Update your configuration file to eliminate this warning. 15:45:51
WARN warn - https://tailwindcss.com/docs/upgrade-guide#configure-content-sources 15:45:51
ERROR Failed to compile with 1 errors friendly-errors 15:45:51
● Client █████████████████████████ building (46%) 304/325 modules 21 active
node_modules\ohmyfetch\dist\index.mjs
WARN 15:45:51
WARN warn - The purge/content options have changed in Tailwind CSS v3.0. 15:45:51
WARN warn - Update your configuration file to eliminate this warning. 15:45:51
WARN warn - https://tailwindcss.com/docs/upgrade-guide#configure-content-sources 15:45:51
ERROR Failed to compile with 1 errors friendly-errors 15:45:51
● Client █████████████████████████ building (47%) 310/331 modules 21 active
babel-loader › vue-loader › .nuxt\components\nuxt-loading.vue
WARN 15:45:51
WARN warn - The purge/content options have changed in Tailwind CSS v3.0. 15:45:51
WARN warn - Update your configuration file to eliminate this warning. 15:45:51
WARN warn - https://tailwindcss.com/docs/upgrade-guide#configure-content-sources 15:45:51
ERROR Failed to compile with 1 errors friendly-errors 15:45:51
● Client █████████████████████████ building (48%) 318/334 modules 16 active
vue-loader › vue-loader › .nuxt\layouts\default.vue
WARN 15:45:51
WARN warn - The purge/content options have changed in Tailwind CSS v3.0. 15:45:51
WARN warn - Update your configuration file to eliminate this warning. 15:45:51
WARN warn - https://tailwindcss.com/docs/upgrade-guide#configure-content-sources 15:45:51
ERROR Failed to compile with 1 errors friendly-errors 15:45:51
● Client █████████████████████████ building (50%) 335/341 modules 6 active
node_modules\@babel\runtime\helpers\esm\setPrototypeOf.js
WARN 15:45:51
WARN warn - The purge/content options have changed in Tailwind CSS v3.0. 15:45:51
WARN warn - Update your configuration file to eliminate this warning. 15:45:51
WARN warn - https://tailwindcss.com/docs/upgrade-guide#configure-content-sources 15:45:51
ERROR Failed to compile with 1 errors friendly-errors 15:45:51
ERROR in ./node_modules/@nuxtjs/tailwindcss/dist/runtime/tailwind.css friendly-errors 15:45:51
Module build failed (from ./node_modules/@nuxt/postcss8/node_modules/postcss-loader/dist/cjs.js): friendly-errors 15:45:51
TypeError: Cannot read properties of undefined (reading 'raw')
at F:\Dev\Private\nuxt-bridge\node_modules\tailwindcss\lib\lib\setupTrackingContext.js:90:90
at Array.filter (<anonymous>)
at resolvedChangedContent (F:\Dev\Private\nuxt-bridge\node_modules\tailwindcss\lib\lib\setupTrackingContext.js:90:63)
at F:\Dev\Private\nuxt-bridge\node_modules\tailwindcss\lib\lib\setupTrackingContext.js:158:44
at F:\Dev\Private\nuxt-bridge\node_modules\tailwindcss\lib\processTailwindFeatures.js:43:11
at plugins (F:\Dev\Private\nuxt-bridge\node_modules\tailwindcss\lib\index.js:20:104)
at LazyResult.runOnRoot (F:\Dev\Private\nuxt-bridge\node_modules\postcss\lib\lazy-result.js:339:16)
at LazyResult.runAsync (F:\Dev\Private\nuxt-bridge\node_modules\postcss\lib\lazy-result.js:393:26)
at async Object.loader (F:\Dev\Private\nuxt-bridge\node_modules\@nuxt\postcss8\node_modules\postcss-loader\dist\index.js:95:14)
friendly-errors 15:45:51
@ ./node_modules/@nuxtjs/tailwindcss/dist/runtime/tailwind.css 4:14-207 15:3-20:5 16:22-215
@ ./.nuxt/App.js
@ ./.nuxt/index.js
@ ./.nuxt/client.js
@ multi ./node_modules/@nuxt/bridge/dist/runtime/capi.plugin.mjs ./node_modules/eventsource-polyfill/dist/browserify-eventsource.js (webpack)-hot-middleware/client.js?reload=true&timeout=30000&ansiColors=&overlayStyles=&path=%2F__webpack_hmr%2Fclient&name=client ./.nuxt/client.js
friendly-errors 15:45:51
i Waiting for file changes 15:45:52
Nuxt CLI v3.0.0-27470397.9ebea90 15:45:52
15:45:52
> Local: http://localhost:3000/
> Network: http://192.168.50.250:3000/
i Directory components/ created. Restarting nuxt... 15:45:52
i Merging Tailwind config from ~/tailwind.config.js nuxt:tailwindcss 15:45:52
i Preparing project for development 15:45:52
i Initial build may take a while 15:45:52
i Discovered Components: .nuxt/components/readme.md 15:45:52
√ Builder initialized 15:45:52
ERROR Watchpack Error (initial scan): Error: ENOTDIR: not a directory, scandir 'F:\Dev\Private\nuxt-bridge\.nuxt\index.js' 15:45:52
ERROR Watchpack Error (initial scan): Error: ENOTDIR: not a directory, scandir 'F:\Dev\Private\nuxt-bridge\.nuxt\utils.js' 15:45:52
ERROR Watchpack Error (initial scan): Error: ENOTDIR: not a directory, scandir 'F:\Dev\Private\nuxt-bridge\.nuxt\components\nuxt-link.client.js' 15:45:52
√ Nuxt files generated 15:45:52
ERROR Watchpack Error (initial scan): Error: ENOTDIR: not a directory, scandir 'F:\Dev\Private\nuxt-bridge\.nuxt\mixins\fetch.client.js' 15:45:52
ERROR Watchpack Error (initial scan): Error: ENOTDIR: not a directory, scandir 'F:\Dev\Private\nuxt-bridge\.nuxt\middleware.js'
When I run the repository provided above on Windows, I get a compiling loop.
I tried fully overwriting the content
in the tailwind.config.js file with a function and removing nuxt.config.ts and tailwind.config.ts from the list, the compiling loop seemed to stop. (although I can't see the correct page due to another Rollup error).
content: () => { // fully overwrite using a function
return [
"./components/**/*.{js,vue,ts}",
"./layouts/**/*.vue",
"./pages/**/*.vue",
"./plugins/**/*.{js,ts}",
"./nuxt.config.js", // .{js,ts} -> .js
"./tailwind.config.js", // .{js,ts} -> .js
];
},
I hope this helps with workarounds and problem-solving.
We also have this problem and watching this issue with great interest 😃
@avanderhoek does solution provided by @moochannel work for you? I get an error on both windows and linux
Windows:
✔ Client
Compiled successfully in 400.09ms
ERROR [worker reload] [worker init] Only file and data URLs are supported by the default ESM loader. On Windows, absolute paths must be valid file:// URLs. Received protocol 'c:'
at new NodeError (internal/errors.js:322:7)
at Loader.defaultResolve [as _resolve] (internal/modules/esm/resolve.js:859:11)
at Loader.resolve (internal/modules/esm/loader.js:89:40)
at Loader.getModuleJob (internal/modules/esm/loader.js:242:28)
at ModuleWrap.<anonymous> (internal/modules/esm/module_job.js:76:40)
at link (internal/modules/esm/module_job.js:75:36)
Linux
✔ Client
Compiled successfully in 7.85s
✔ Nitro built in 639 ms nitro 20:21:19
ℹ Waiting for file changes 20:21:19
ℹ Tailwind Viewer: /_tailwind/ nuxt:tailwindcss 20:21:19
[nitro] [request error] Cannot find module '/home/debian/nuxt-bridge-tailwind/.nuxt/dist/server/server.mjs' imported from /home/debian/nuxt-bridge-tailwind/.nuxt/dev/index.mjs
at new NodeError (node:internal/errors:371:5)
at finalizeResolution (node:internal/modules/esm/resolve:416:11)
at moduleResolve (node:internal/modules/esm/resolve:932:10)
at defaultResolve (node:internal/modules/esm/resolve:1044:11)
at ESMLoader.resolve (node:internal/modules/esm/loader:422:30)
at ESMLoader.getModuleJob (node:internal/modules/esm/loader:222:40)
at ESMLoader.import (node:internal/modules/esm/loader:276:22)
at importModuleDynamically (node:internal/modules/esm/translators:111:35)
at importModuleDynamicallyCallback (node:internal/process/esm_loader:35:14)
at ./.nuxt/dev/index.mjs:371:66
P.S. Nuxt team is working hard on [email protected]
so we'll have to wait a bit longer
There are two options that worked for me.
A) use version 4.2.1, but then you're downgraded to tailwind 2
B) remove @nuxtjs/tailwindcss
😄 and install tailwind 3 through postcss
General steps for B:
- in
nuxt.config.{js,ts}
remove@nuxtjs/tailwindcss
- remove
@nuxtjs/tailwindcss
frompackage.json
-
yarn add --dev tailwindcss postcss autoprefixer
- inside
nuxt.config.{js,ts}
yourbuild
object should look like: ℹ️ it might show you type errors, don't worry ℹ️
build: {
postcss: {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
},
}
- ofc you have to provide a css/scss source of tailwind:
css: [
'@/assets/css/main.css'
],
-
assets/css/main.css
has at the top of the file:
@tailwind base;
@tailwind components;
@tailwind utilities;
- 'tailwind.config.js':
// GOOD
content: [
(...)
'./nuxt.config.ts'
],
OR
// GOOD
content: [
(...)
'./nuxt.config.js'
],
you have to specify the extension, DON'T USE:
// WRONG
content: [
(...)
'./nuxt.config.{js,ts}'
],
Nothing works for me. I get stuck on the infinite loop no matter what I try
Hi all, Just an FYI that I also ran into this issue, running nuxt bridge and the latest version of this module, as of today (v5.3.2)
I followed the instructions provided by @michasik in his comment https://github.com/nuxt-community/tailwindcss-module/issues/448#issuecomment-1150271570 and it has resolved the reported issue for me. Obviously a workaround, bur thanks very much @michasik
Echoing what others have found, this suggestion seems to point at the nuxt config {js,ts} being the issue: https://github.com/nuxt-community/tailwindcss-module/issues/449#issuecomment-1084722344
I've also dropped this module in favour of a direct install of tailwind and that's resolved the issue.
@michasik's recommendation works but it might get out of date, it's mostly the same as the official tailwind recommendation: https://tailwindcss.com/docs/guides/nuxtjs with the change of using "./nuxt.config.ts"
instead of "./nuxt.config.{js,ts}"
.
This 'native' setup is also a lot faster for development than using @nuxtjs/tailwindcss
which causes a big lag in yarn dev
at one point.
Best way for Nuxt 2 is to use it without module if you hit an issue yes
Using @michasik's I'm running into https://github.com/nuxt-modules/tailwindcss/issues/471 on every hot reload. Any solutions?
Just FYI, the reason this module doesn't work with nuxt 2 is because of this: https://github.com/nuxt-modules/tailwindcss/issues/359#issuecomment-867956745 (TLDR it's causing the whole ${srcDir} including .nuxt to be watched)
I was able to remove the following from the tailwind config:
`${srcDir}/{App,app}.{js,ts,vue}`,
`${srcDir}/{Error,error}.{js,ts,vue}`
And it totally fixed the issue.
So this is just an FYI in case anyone wanted to know the underlying reason why 'nuxt.config.{ts,js}' in the tailwind config will cause infinite hmr loop.