Error on Startup after Migration to Nuxt Bridge on Fresh Project

[timgoeller]

Environment

---

• Operating System: Darwin
• Node Version: v16.11.0
• Nuxt Version: 2.16.0-27358576.777a4b7f
• Package Manager: yarn@1.22.17
• Bundler: Webpack
• User Config: target, head, css, plugins, components, buildModules, modules, vuetify, build
• Runtime Modules: -
• Build Modules: @nuxtjs/vuetify@1.12.3

---

Reproduction

https://github.com/timgoeller/nuxt-bug

Describe the bug

When generating a new empty Nuxt 2 project and applying the steps provided in the Nuxt Bridge getting started guide (https://v3.nuxtjs.org/getting-started/bridge/), calling yarn dev throws an error when using nuxi dev (using nuxt still works).

The error message is as follows:

 ERROR  Cannot read properties of undefined (reading 'callHook')                                                                           16:23:36

  at Object.invoke (node_modules/nuxi/dist/chunks/dev.mjs:6773:31)
  at runMicrotasks (<anonymous>)
  at processTicksAndRejections (node:internal/process/task_queues:96:5)
  at async _main (node_modules/nuxi/dist/chunks/index.mjs:384:7)

I think it might have to do with this recent change, even though it seems like no one else encountered this issue yet: nuxt/framework@4bd7ada#diff-86f78f1673e500e055e8a1f266252abe62af18f0b52424f09275d7f2b1e96d3f

Additional context

No response

Logs

yarn run v1.22.17
$ nuxi dev
Nuxt CLI v3.0.0-27386759.b449d0b                                                                                                           16:23:25
                                                                                                                                           16:23:25
  > Local:    http://localhost:3000/
  > Network:  http://192.168.0.31:3000/

ℹ Preparing project for development                                                                                                        16:23:28
ℹ Initial build may take a while                                                                                                           16:23:28
ℹ Discovered Components: .nuxt/components/readme.md                                                                                        16:23:28
✔ Builder initialized                                                                                                                      16:23:28
✔ Nuxt files generated                                                                                                                     16:23:28

✔ Client
  Compiled successfully in 7.54s

✔ Server
  Compiled successfully in 6.49s

ℹ Waiting for file changes                                                                                                                 16:23:36

 ERROR  Cannot read properties of undefined (reading 'callHook')                                                                           16:23:36

  at Object.invoke (node_modules/nuxi/dist/chunks/dev.mjs:6773:31)
  at runMicrotasks (<anonymous>)
  at processTicksAndRejections (node:internal/process/task_queues:96:5)
  at async _main (node_modules/nuxi/dist/chunks/index.mjs:384:7)

[Dell-it]

You are not alone, I also faced the same problem

[danielroe]

Looking at this, the issue is caused by not using Bridge. (You need to update your nuxt.config.)

[wolzey]

I have an updated config and still am experiencing this issue.

[danielroe]

@wolzey Would you share a reproduction?

[wolzey]

@danielroe thanks for re-opening and the quick response. I re-applied the changes to upgrade to Nuxt 3 using Bridge and am no longer getting the error. I think we can mark this one down as a user error and re-close. Thanks!

[neothon]

I am still getting the same issue but while using nuxt bridge. I haven't tried upgrading to Nuxt 3 yet though.

[Torgian]

Update

So it turns out that this error is avoided if I change my Nuxt.config.js file to a .ts file. I'm not sure why. The docs make it seem like this is optional, but to avoid this callHook error, I had to change it to a .ts file.

End Update

I'm receiving the same error, but on an older project running nuxtJS and Vue 2, along with Vuetify.

Environment:

------------------------------
- Operating System: `Darwin`
- Node Version:     `v16.13.2`
- Nuxt Version:     `2.16.0-27358576.777a4b7f`
- Package Manager:  `yarn@1.22.4`
- Builder:          `webpack`
- User Config:      `bridge`, `env`, `serverMiddleware`, `head`, `css`, `router`, `modules`, `plugins`, `build`, `buildModules`, `optimizedImages`
- Runtime Modules:  `@nuxtjs/axios@5.13.6`, `@nuxtjs/auth@4.9.1`, `cookie-universal-nuxt@2.1.5`, `@nuxtjs/toast@3.3.1`, `@nuxtjs/vuetify@1.12.3`, `nuxt-user-agent@1.2.2`
- Build Modules:    `@nuxt/typescript-build@2.1.0`, `@aceforth/nuxt-optimized-images@1.4.0`
------------------------------

Error:

 ERROR  Cannot read properties of undefined (reading 'callHook')                                                                                  13:54:25

  at Object.invoke (node_modules/nuxi/dist/chunks/dev.mjs:6803:31)
  at runMicrotasks (<anonymous>)
  at processTicksAndRejections (node:internal/process/task_queues:96:5)
  at async _main (node_modules/nuxi/dist/cli.mjs:46:20)

Note:

I know that "@nuxt/typescript-build": "^2.0.3", should be removed, but when I remove that, I get errors with importing files in the utilities folder. I left it in and instead passed this to the Nuxt.config.js file:

  bridge: {
    typescript: false,
  },

I'm at a loss.

[Remo]

Same for me, I even got a test repo where it happens: https://github.com/Remo/laravel-nuxt-bridge

[Cally99]

Anyone fix this issue? Followed the documentation on the nuxt bridge page and came across this error. The core team seriously roll out buggy features.

[danielroe]

@Cally99 If you are encountering an issue, please create a new issue with a reproduction and we'll look into it. 😉

[Remo]

@danielroe there is another issue with the same problem and a repo where you can reproduce the problem: #314

[klausXR]

If you are still getting this error while debugging your migration process, I encountered severe issues in development and according to the migration guide that says that you can disable Bridge if you set bridge: false in your nuxt.config.js file.

If you do this, you have to start nuxt with the legacy script, because nuxi dev doesn't work.

Use nuxt dev

[kovan]

Any updates on this?

ERROR Cannot start nuxt: Cannot read properties of undefined (reading 'callHook') 05:45:23

at load (node_modules/nuxi/dist/chunks/dev.mjs:6780:33)
at async Object.invoke (node_modules/nuxi/dist/chunks/dev.mjs:6828:5)
at async _main (node_modules/nuxi/dist/cli.mjs:50:20)

I really have no idea of even where to start looking.

[gokatz]

Facing similar issue when starting dev server. nuxi build is working though.

Terminal Output:

Browser:

[oemer-aran]

Facing similar issue when starting dev server. nuxi build is working though.

Terminal Output:

Browser:

I have the exact same issue: