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

[jamaluddinrumi]

Version

---

• Operating System: Darwin
• Node Version: v16.15.0
• Nuxt Version: 3.0.0-rc.1-27525381.1f8e3e2
• Package Manager: [email protected]
• Builder: vite
• User Config: typescript, publicRuntimeConfig, privateRuntimeConfig, css, buildModules, build
• Runtime Modules: -
• Build Modules: @nuxtjs/[email protected], @vueuse/[email protected], @nuxtjs/[email protected]

---

Steps to reproduce

i do yarn upgrade-interactive and upgrade @nuxtjs/[email protected] to @nuxtjs/[email protected]

and then do yarn dev but it can not start

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

[FollowJack]

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

[pi0]

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

[natchasj]

@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]

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]

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]

This worked for me 👍 thanks

[yulafezmesi]

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

devServerHandlers: [],

[Leakageonthelamp]

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

devServerHandlers: [],

This work!! Thank youuuuuuuuu

[lucasuracosta]

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]

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]

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]

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]

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]

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]

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]

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]

I have tried that, it caused other issues.

[5asp]

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

devServerHandlers: [],

wowo ,it works !! , thanks

[theLeroy]

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

[robconery]

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]

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]

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:  `[email protected]`
- Builder:          `vite`
- User Config:      `modules`, `runtimeConfig`, `pinia`, `tailwindcss`, `apollo`, `vite`, `build`, `devServerHandlers`
- Runtime Modules:  `@vueuse/[email protected]`, `@nuxtjs/[email protected]`, `[email protected]`, `@nuxtjs/[email protected]`, `@pinia/[email protected]`
- Build Modules:    `-`

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

  at node_modules/.pnpm/@[email protected][email protected]/node_modules/@nuxtjs/tailwindcss/dist/module.mjs:126:56
  at Array.forEach (<anonymous>)
  at setup (node_modules/.pnpm/@[email protected][email protected]/node_modules/@nuxtjs/tailwindcss/dist/module.mjs:126:19)
  at async Object.normalizedModule (node_modules/.pnpm/@[email protected]/node_modules/@nuxt/kit/dist/index.mjs:642:5)
  at async installModule (node_modules/.pnpm/@[email protected][email protected]/node_modules/@nuxt/kit-edge/dist/index.mjs:427:3)
  at async initNuxt (node_modules/.pnpm/[email protected]_nhmv6e3sukomcity4darqwbwxi/node_modules/nuxt3/dist/index.mjs:1739:7)
  at async load (node_modules/.pnpm/[email protected]/node_modules/nuxi-edge/dist/chunks/dev.mjs:6778:9)
  at async Object.invoke (node_modules/.pnpm/[email protected]/node_modules/nuxi-edge/dist/chunks/dev.mjs:6839:5)
  at async _main (node_modules/.pnpm/[email protected]/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]

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

[isimmons]

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]

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]

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]

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]

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]

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

[lin2012li]

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

This also works for me!!!