search

nuxt-modules / tailwindcss

Tailwind CSS module for Nuxt
https://tailwindcss.nuxtjs.org
MIT License
1.66k stars 180 forks source link

Cannot start nuxt: Cannot read properties of undefined (reading 'push') #480

Closed jamaluddinrumi closed 1 year ago

jamaluddinrumi commented 2 years ago

Version

Steps to reproduce

i do yarn upgrade-interactive and upgrade @nuxtjs/tailwindcss@5.0.4 to @nuxtjs/tailwindcss@5.1.2

and then do yarn dev but it can not start

it shows Cannot start nuxt: Cannot read properties of undefined (reading 'push')

FollowJack commented 2 years ago

Same here. I used earlier version in my package.json until you fix this issue.

pi0 commented 2 years ago

Any hope you can provide a reproduction or better stack trace of the error?

natchasj commented 2 years ago

@pi0 I've got the same error when upgrade from 5.0.4 to 5.1.2 on both Nuxt2 and Nuxt3, here's a stack trace of this error.

On Nuxt2

 FATAL  Cannot read properties of undefined (reading 'push')                                                  

  at addDevServerHandler (node_modules/@nuxt/kit/dist/index.mjs:106:38)
  at setup (node_modules/@nuxtjs/tailwindcss/dist/module.mjs:107:7)
  at async ModuleContainer.normalizedModule (node_modules/@nuxt/kit/dist/index.mjs:583:5)
  at async ModuleContainer.addModule (node_modules/@nuxt/core/dist/core.js:239:20)
  at async ModuleContainer.ready (node_modules/@nuxt/core/dist/core.js:51:7)
  at async Nuxt._init (node_modules/@nuxt/core/dist/core.js:478:5)

On Nuxt3

 ERROR  Cannot start nuxt:  Cannot read properties of undefined (reading 'push')                                                    

  at addDevServerHandler (node_modules/@nuxtjs/tailwindcss/node_modules/@nuxt/kit/dist/index.mjs:106:38)
  at setup (node_modules/@nuxtjs/tailwindcss/dist/module.mjs:107:7)
  at async Object.normalizedModule (node_modules/@nuxtjs/tailwindcss/node_modules/@nuxt/kit/dist/index.mjs:583:5)
  at async installModule (node_modules/@nuxt/kit/dist/index.mjs:392:3)
  at async initNuxt (node_modules/nuxt/dist/index.mjs:1319:7)
  at async load (node_modules/nuxi/dist/chunks/dev.mjs:6734:9)
  at async Object.invoke (node_modules/nuxi/dist/chunks/dev.mjs:6777:5)
  at async _main (node_modules/nuxi/dist/cli.mjs:46:20)

This also happened when fresh install the module as well.

daguitosama commented 2 years ago

Any hope you can provide a reproduction or better stack trace of the error?

Im experiencing the same problem, have setted up this reproductions

CHNB128 commented 2 years ago

This issue is not related to nuxt-community/tailwindcss-module module itself. It's error in @nuxt/kit implementation. They missed type safe assignment. I was able to get rid of this issue by making this patch 

diff --git a/node_modules/@nuxt/kit/dist/index.mjs b/node_modules/@nuxt/kit/dist/index.mjs
index 120b935..a4912df 100644
--- a/node_modules/@nuxt/kit/dist/index.mjs
+++ b/node_modules/@nuxt/kit/dist/index.mjs
@@ -103,7 +103,11 @@ function addServerHandler(handler) {
   useNuxt().options.serverHandlers.push(handler);
 }
 function addDevServerHandler(handler) {
-  useNuxt().options.devServerHandlers.push(handler);
+  let nuxt = useNuxt()
+  if (!nuxt.options.devServerHandlers) {
+    nuxt.options.devServerHandlers = [];
+  }
+  nuxt.options.devServerHandlers.push(handler)
 }

 async function checkNuxtCompatibility(constraints, nuxt = useNuxt()) {
loehx commented 2 years ago

This worked for me 👍 thanks

yulafezmesi commented 2 years ago

also, adding an empty array named devServerHandlers to nuxt.config file will solve the issue.

devServerHandlers: [],

Leakageonthelamp commented 2 years ago

also, adding an empty array named devServerHandlers to nuxt.config file will solve the issue.

devServerHandlers: [],

This work!! Thank youuuuuuuuu

lucasuracosta commented 2 years ago

also, adding an empty array named devServerHandlers to nuxt.config file will solve the issue.

devServerHandlers: [],

Thank you so much!! I was struggling to make a project run in Windows and your answer helped me with the last step 🙌

alejosky commented 2 years ago

also, adding an empty array named devServerHandlers to nuxt.config file will solve the issue.

devServerHandlers: [],

Thank you! How did you know? Is this something one can find in the documentation?

natchasj commented 2 years ago

also, adding an empty array named devServerHandlers to nuxt.config file will solve the issue. devServerHandlers: [],

Thank you! How did you know? Is this something one can find in the documentation?

devServerHandlers is nitro's option used for register server routes on dev mode which @nuxtjs/tailwindcss generated via tailwind viewer.

src/module.ts from module's repo

// Add _tailwind config viewer endpoint
if (nuxt.options.dev && moduleOptions.viewer) {
  const route = '/_tailwind/'
  const createServer = await import('tailwind-config-viewer/server/index.js').then(r => r.default || r) as any
  const { withoutTrailingSlash } = await import('ufo')
  const _viewerDevMiddleware = createServer({ tailwindConfigProvider: () => tailwindConfig }).asMiddleware()
  const viewerDevMiddleware = (req, res) => {
    if (req.originalUrl === withoutTrailingSlash(route)) {
      res.writeHead(301, { Location: withTrailingSlash(req.originalUrl) })
      res.end()
    }
    _viewerDevMiddleware(req, res)
  }
  addDevServerHandler({ route, handler: viewerDevMiddleware })
  nuxt.hook('listen', (_, listener) => {
    const fullPath = `${withoutTrailingSlash(listener.url)}${route}`
    logger.info(`Tailwind Viewer: ${chalk.underline.yellow(fullPath)}`)
  })
}

But for some reason, addDevServerHandler() give an error (unless you use nuxt-3.0.0-rc.3) because of devServerHandlers is not an Array. So we have to add devServerHandlers: [] to fix this.

VentroArt commented 2 years ago

also, adding an empty array named devServerHandlers to nuxt.config file will solve the issue.

devServerHandlers: [],

And after this I'm receiving 


 node_modules/axios/lib/core/createError.js

✖ Server
  Compiled with some errors in 3.21s

✖ Client
  Compiled with some errors in 7.08s

✖ Server
  Compiled with some errors in 3.21s

 ERROR  Failed to compile with 1 errors                                                                                              friendly-errors 09:34:06

This relative module was not found:                                                                                                  friendly-errors 09:34:06
                                                                                                                                     friendly-errors 09:34:06
* ../middleware/router-auth.ts in ./.nuxt/middleware.js                                                                              friendly-errors 09:34:06
ℹ Waiting for file changes                                                                                                                           09:34:06
ℹ Memory usage: 437 MB (RSS: 633 MB)                                                                                                                 09:34:07
ℹ Listening on: http://localhost:53515/    ```
cannap commented 2 years ago

also, adding an empty array named devServerHandlers to nuxt.config file will solve the issue. devServerHandlers: [],

And after this I'm receiving

 node_modules/axios/lib/core/createError.js

✖ Server
  Compiled with some errors in 3.21s

✖ Client
  Compiled with some errors in 7.08s

✖ Server
  Compiled with some errors in 3.21s

 ERROR  Failed to compile with 1 errors                                                                                              friendly-errors 09:34:06

This relative module was not found:                                                                                                  friendly-errors 09:34:06
                                                                                                                                     friendly-errors 09:34:06
* ../middleware/router-auth.ts in ./.nuxt/middleware.js                                                                              friendly-errors 09:34:06
ℹ Waiting for file changes                                                                                                                           09:34:06
ℹ Memory usage: 437 MB (RSS: 633 MB)                                                                                                                 09:34:07
ℹ Listening on: http://localhost:53515/    ```

did you made a full restart?

ed-bbwmc commented 2 years ago

The same issue still exists, I solved it by downgrading to v5.0.0 the issue appears after v5.0.0, So I assume all the >= v5.0.1 and v5.1.x will have the same issue. Not to fall behind with the changes I will accept changes from ^5.2.x which is not available yet and hopefully, it will be fixed by then.

"devDependencies": { ...., "@nuxtjs/tailwindcss": "5.0.0||^5.2.x", ...., },

ItzMeDwii commented 2 years ago

The same issue still exists, I solved it by downgrading to v5.0.0 the issue appears after v5.0.0, So I assume all the >= v5.0.1 and v5.1.x will have the same issue. Not to fall behind with the changes I will accept changes from ^5.2.x which is not available yet and hopefully, it will be fixed by then.

"devDependencies": { ...., "@nuxtjs/tailwindcss": "5.0.0||^5.2.x", ...., },

Im using nuxt 2.15.8, no problem with v5.0.4

kn0wn commented 2 years ago

Leaving this here for anyone else that may need it;

  /**
   * Temporary workaround for @nuxt-community/tailwindcss-module.
   *
   * Reported: 2022-05-23
   * See: [Issue tracker](https://github.com/nuxt-community/tailwindcss-module/issues/480)
   */
  devServerHandlers: [],

Thanks @yulafezmesi for the workaround

ed-bbwmc commented 2 years ago

I have tried that, it caused other issues.

alfuckk commented 2 years ago

此外，将一个名为 devServerHandlers 的空数组添加到 nuxt.config 文件将解决此问题。

devServerHandlers: [],

wowo ,it works !! , thanks

theLeroy commented 2 years ago

I still have this issue. :( The fix is working

robconery commented 1 year ago

I just worked through this issue and I think is has something to do with npx caching. I tried the fixes above but nothing worked, so I reinstalled node (same version) which I think killed the npx cache. When I ran npx nuxi init nuxt-app again the setup process was completely different.

You can kill the npx cache without reinstalling Node 🤣 this using rm -rf ~/.npm/_npx, which will cause it to install again. I'm not clear on the internals - but I do know that I was working with an earlier nuxt 3 beta so it seems reasonable that the starter site isn't aligned with the installer app.

I also named my app app which seems to make the problem come back... renaming it to something else and things work. I'm still really confused... but it's working (on 3.0.0-rc-11, Node 16.17 LTS)

joshistoast commented 1 year ago

Adding devServerHandlers: [] to nuxt.config.ts did not fix this for me. This was working yesterday, and I just booted my project up today to find it no longer working :/

joshistoast commented 1 year ago

More specifically:

- Operating System: `Darwin`
- Node Version:     `v17.5.0`
- Nuxt Version:     `3.0.0-rc.13-27781436.1f6b3be`
- Nitro Version:    `0.6.1-27781459.72c912e`
- Package Manager:  `pnpm@7.13.4`
- Builder:          `vite`
- User Config:      `modules`, `runtimeConfig`, `pinia`, `tailwindcss`, `apollo`, `vite`, `build`, `devServerHandlers`
- Runtime Modules:  `@vueuse/nuxt@9.4.0`, `@nuxtjs/tailwindcss@6.1.1`, `nuxt-icon@0.1.7`, `@nuxtjs/apollo@5.0.0-alpha.2`, `@pinia/nuxt@0.4.3`
- Build Modules:    `-`
 ERROR  Cannot start nuxt:  Cannot read properties of undefined (reading 'push')                                                                           10:45:15

  at node_modules/.pnpm/@nuxtjs+tailwindcss@6.1.1_webpack@5.74.0/node_modules/@nuxtjs/tailwindcss/dist/module.mjs:126:56
  at Array.forEach (<anonymous>)
  at setup (node_modules/.pnpm/@nuxtjs+tailwindcss@6.1.1_webpack@5.74.0/node_modules/@nuxtjs/tailwindcss/dist/module.mjs:126:19)
  at async Object.normalizedModule (node_modules/.pnpm/@nuxt+kit@3.0.0-rc.12/node_modules/@nuxt/kit/dist/index.mjs:642:5)
  at async installModule (node_modules/.pnpm/@nuxt+kit-edge@3.0.0-rc.13-27781436.1f6b3be_rollup@2.79.1/node_modules/@nuxt/kit-edge/dist/index.mjs:427:3)
  at async initNuxt (node_modules/.pnpm/nuxt3@3.0.0-rc.13-27781436.1f6b3be_nhmv6e3sukomcity4darqwbwxi/node_modules/nuxt3/dist/index.mjs:1739:7)
  at async load (node_modules/.pnpm/nuxi-edge@3.0.0-rc.13-27781436.1f6b3be/node_modules/nuxi-edge/dist/chunks/dev.mjs:6778:9)
  at async Object.invoke (node_modules/.pnpm/nuxi-edge@3.0.0-rc.13-27781436.1f6b3be/node_modules/nuxi-edge/dist/chunks/dev.mjs:6839:5)
  at async _main (node_modules/.pnpm/nuxi-edge@3.0.0-rc.13-27781436.1f6b3be/node_modules/nuxi-edge/dist/cli.mjs:50:20)

This points me to a module.mjs file inside the tailwind module where nuxt.options.watch appears to be undefined? But upon peering into it, it does in fact exist 🤷

if (nuxt.options.dev) {
  configPaths.forEach((path) => nuxt.options.watch.push(path));
}
joshistoast commented 1 year ago

Downgraded from edge channel (rc-13) to rc-12, this fixed it for me

isimmons commented 1 year ago

I had this error after upgrading nuxt3 to RC 13. I manually updated @nuxt/tailwindcss from 6.1.1 to 6.1.3 and it fixed it.

bayramorhan commented 1 year ago

I had this error after upgrading nuxt3 to RC 13. I manually updated @nuxt/tailwindcss from 6.1.1 to 6.1.3 and it fixed it.

This is the exact solution.

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

dxphilo commented 1 year ago

I had this error after upgrading nuxt3 to RC 13. I manually updated @nuxt/tailwindcss from 6.1.1 to 6.1.3 and it fixed it.

This is the exact solution.

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

This did the trick for me.

onpix commented 1 year ago

I had this error after upgrading nuxt3 to RC 13. I manually updated @nuxt/tailwindcss from 6.1.1 to 6.1.3 and it fixed it.

This is the exact solution.

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

This also works for me!!!

nickap commented 1 year ago

Be sure to use nuxt ^3.0.0 and nuxtjs/tailwindcss ^6.1.3, also, follow the official installation guide: https://tailwindcss.com/docs/guides/nuxtjs#3

"devDependencies": {
    "@nuxtjs/tailwindcss": "^6.1.3",
    "autoprefixer": "^10.4.13",
    "nuxt": "^3.0.0",
    "postcss": "^8.4.19",
    "tailwindcss": "^3.2.4"
  }
marysmech commented 1 year ago

Combination of nuxt 3.0.0 with @nuxtjs/tailwindcss 6.x fixed problem for me.

lin2012li commented 1 year ago

将 nuxt3 升级到 RC 13 后出现此错误。我手动将 @nuxt/tailwindcss 从 6.1.1 更新到 6.1.3 并修复了它。

This also works for me!!!

linhltn commented 1 year ago

ERROR Cannot restart nuxt: Cannot read properties of undefined (reading 'moment') 09:29:13

at momentModule (node_modules\@nuxtjs\moment\lib\module.js:19:21) at installModule (/C:/Users/Le%20Lac%20Binh/Desktop/backup_task/Stucco/Stucco_backup/stucco-frontend/node_modules/@nuxt/kit/dist/index.mjs:416:9)
at async initNuxt (/C:/Users/Le%20Lac%20Binh/Desktop/backup_task/Stucco/Stucco_backup/stucco-frontend/node_modules/nuxt/dist/index.mjs:1360:7)
at async load (/C:/Users/Le%20Lac%20Binh/Desktop/backup_task/Stucco/Stucco_backup/stucco-frontend/node_modules/nuxi/dist/chunks/dev.mjs:6734:9)
at async _applyPromised (/C:/Users/Le%20Lac%20Binh/Desktop/backup_task/Stucco/Stucco_backup/stucco-frontend/node_modules/nuxi/dist/chunks/dev.mjs:6686:10)

I need help

"devDependencies": { "@nuxtjs/moment": "^1.6.1", "@nuxtjs/style-resources": "^1.2.1", "autoprefixer": "^10.4.4", "node-sass": "^8.0.0", "nuxt": "3.0.0-rc.1", "postcss": "^8.4.12", "prettier": "^2.2.1", "sass": "^1.42.1", "sass-loader": "^10.2.0", "tailwindcss": "^3.0.23", "vue-stripe-js": "^1.0.1", "webpack": "^5.75.0" },

lukzerom commented 1 year ago

I had same issue. I realized that because of NVM i was using older version of node (14x), changing it to proper 18x fixed issue