WebStorm cannot resolve files when using <NuxtLink>
We are currently starting a new version of our application moving from Vue.js 2.x to Nuxt.js 4.x (and therefore Vue.js 3.5.x)
While getting everything set up and stubbed we have encountered two problems that seem to be WebStorm specific, in that the same issues are not seen under VS Code. I am creating an issue for each
This issue relates to using `<NuxtLInk>`, but also occurs when using <RouterLink> when using dynamic routes
In the linked example we have three links on the index page.
Link 1 is using a bound definition of the `:to` object that uses the generated name of the file (id-test) and passes a param within the object
LInk 2 has the link “hard coded” using the to as a string.
Link 3 links to a file in a static folder, without passing any parameters, and uses to as a string.
CodeSandbox
All three links work as expected with Links 1 and 2 showing the passed parameter in the `<pre>` block, and Link 3 loads the approprate page statically,
If you open copy the project into WebStorm you will see the issue. Of the three links described above, only Link 3, with the static link that matches the file system path, is not marked as having an error.
Both Link 1 and Link 2 give the error “Cannot resolve file '” in the IDE, and “Cannot resolve file/directory” when “Inspect Code” is run.
As mentioned at the start VS Code has no issue with the above example, and also allows name to be selected when autocompleting the example in “Link 1”
Please sign in to leave a comment.
Thank you for sharing the sample.
Unfortunately such dynamic paths can't be resolved using static code analysis. Resolving them would require evaluating the code. as a workaround, I can only suggest disabling the HTML | Unresolved file in a link inspection in Settings | Editor | Inspections.
VSCode doesn't indeed show any errors as it doesn't have such inspections. But it doesn't allow navigating to a file in `to:` link.
That's a shame but what I suspected.
While I recognise that VS Code doesn't have the inspections (and indeed that is part of what keeps me in WebStorm) I had hoped that Nuxt was generating a file that would be possible to be indexed - certainly some of the autocomplete only appears to work after a dev server restart.
In the meantime I will disable the Unresolved file inspection.
Further to the above Nuxt has an experimental setting `experimental: typedPages` that creates a `typed-router.d.ts` file that may prove useful for resolving this issue should it reach production.
I had assumed that a similar file already existed.