Yarn vite error - Rollup failed to resolve import "vue-router"

[Elandlord]

Hi @lmiller1990 !

Currently reading your book Design Patterns for Vue.JS, very interesting read so far!

I wanted to have a go at the examples in the book. Unfortunately, they have stopped working. I have tried a fresh clone, but keep receiving the same error when running yarn vite.

[vite] Dep optimization failed with error:
[vite]: Rollup failed to resolve import "vue-router" from "node_modules/@testing-library/vue/dist/index.js".
This is most likely unintended because it can break your application at runtime.
If you do want to externalize this module explicitly add it to
`rollupInputOptions.external`

macOS Big Sur Node: v14.15.1 Yarn: 1.22.10

Do you have any idea how to fix this?

I have tried clearing the cache already using: yarn cache clean. Removing all node_modules and tried re-installing - to no avail.

[lmiller1990]

I think the problem is Node 14, let me try it out. yarn.lock should ensure the deps are the same, but I should really update to Vite 2.

[lmiller1990]

Actually, I ran npm install and then npx vite with Node 12 and 14, and it worked fine. I also tried yarn (I have yarn 2 installed) and that worked, too.

🤔

edit: I reproduced but not sure how, let me play around. Can you try using npm instead of yarn? It really shouldn't make a difference, though. Another thing to be aware of is Vite caches a LOT, you can remove it with rm -rf node_modules/.vite_opt_cache (for Vite 1, which this is using).

[lmiller1990]

You could try this branch: https://github.com/lmiller1990/design-patterns-for-vuejs-source-code/pull/4

It has all the latest versions. Use npm (not yarn). I'lll probably merge this up soon, but first I need to go over the book again to make sure it all still works with the latest versions of everything.

Thanks for checking out my content and bringing this to my attention - I really appreciate it! Ping me with any questions, or anything to do with Vue or testing 👍

[Elandlord]

Thanks @lmiller1990 for your quick response!

For me it also seems to work using npm install and npx vite on the master branch. The strange thing is, I used the examples before and they were working fine. Seemingly overnight they stopped working.

For now branch #4 seems to be working fine too, I had no issues.

Thanks again for the effort and I am looking forward to continue with Design Patterns for Vue.JS!

[lmiller1990]

Great, glad you got it working.

BTW, you should re-download the EPUB (if you are using the EPUB). I realized a page or two was missing - some weird encoding problem. It's fixed now.

The PDF did not have this problem.

[atilkan]

I am getting the same error. Can you update the project to vite 2?

vite v1.0.0-rc.4
[vite] Optimizable dependencies detected:
@testing-library/vue, axios, flush-promises, luxon, msw, node-request-interceptor, vue

[vite] Dep optimization failed with error:
[vite]: Rollup failed to resolve import "vue-router" from "node_modules/@testing-library/vue/dist/index.js".
This is most likely unintended because it can break your application at runtime.
If you do want to externalize this module explicitly add it to
`rollupInputOptions.external`

[lmiller1990]

Hey, I will update the dependencies soon. The content and concepts should still apply either way, but definitely good to update the deps. In fact, Vite 3 is out now - I'll update to that :+1:

[atilkan]

Another update may be Vitest. Rant: It makes me frustrated to use name testing-library for a testing library. It is like hacking google search results.

[lmiller1990]

Yes I agree testing-library is not exactly the most unique name.

I'm going to update to the same stack used in https://www.udemy.com/course/vuejs-3-the-composition-api/?referralCode=0C911BD2BD6C57007F36

• vitest
• pinia
• vite 3 (that one uses vite 2, basically same)
• typescript
• vue 3
• etc