Subscribe on changes!

Invalid directive name produces undescriptive error

avatar
Oct 24th 2022

Vue version

3.2.41

Link to minimal reproduction

https://stackblitz.com/edit/nuxt-starter-e4etr2?file=plugins%2FoutsideClick.ts,app.vue

Steps to reproduce

When I have a directive and in a SCF I make a typo

What is expected?

I would expect an error along the lines of "directive with name "" not found. Try to check if the directive is registered using Vue.directive."

What is actually happening?

Though it does produce the correct error "[Vue warn]: Failed to resolve directive: outside-typo", it also throws a non-descriptive error, confusing devs while the actual issue is quite clear.

It throws this error: in the CLI

[nuxt] [request error] [unhandled] [500] Cannot read properties of undefined (reading 'getSSRProps')

And this one in the browser

Cannot read properties of undefined (reading 'deep')

System Info

System:
    OS: Windows 10 10.0.22621
    CPU: (16) x64 11th Gen Intel(R) Core(TM) i7-11800H @ 2.30GHz
    Memory: 15.96 GB / 31.73 GB
  Binaries:
    Node: 16.15.0 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.18 - ~\AppData\Roaming\npm\yarn.CMD
    npm: 8.9.0 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: Spartan (44.22621.674.0), Chromium (106.0.1370.47)
    Internet Explorer: 11.0.22621.1

Any additional comments?

I'm using Nuxt 3 RC 11, so I'm not sure if this error is even a thing in non-ssr environments, but it is a Vue specific issue. See this Nuxt github topic: https://github.com/nuxt/nuxt.js/issues/14568

avatar
Oct 24th 2022

Please open a new issue with a valid reproduction using the playground