Refer to https://github.com/vuejs/vite/issues/22

Also refer to the file https://github.com/vuejs/vite/blob/master/src/node/serverPluginModules.ts

There is a resolveVue to resolve Vue JS paths properly.

    if (id === 'vue') {
      const vuePath = resolveVue(root).vue
      debugger
      await cachedRead(ctx, vuePath)
      debugModuleResolution(`vue -> ${getDebugPath(vuePath)}`)
      return
    }

A resolve for Vuex and VueRouter (and possible other libraries) may also be needed...

@ais-one Evan is doing a pretty good job. Would you please change the "adn" typo in the title. Shows respect to provide our issues polished, clean and concise. :)

For me, this works (with vue-router 4.0.0-alpha.9; Mac):

import { createRouter, createWebHistory } from 'vue-router/dist/vue-router.esm.js';

There was earlier a mention in the README that Vite might have a path mapper, at some point in the future. It also mentioned import maps as one long term solution.

Would you be fine with that approach?

typo fixed... I can try out your suggestion... I think a fix is already on the way. I am on windows...

For me, this works (with vue-router 4.0.0-alpha.9; Mac):

import { createRouter, createWebHistory } from 'vue-router/dist/vue-router.esm.js';

this works

There was earlier a mention in the README that Vite might have a path mapper, at some point in the future. It also mentioned import maps as one long term solution.

Would you be fine with that approach?

let me read up more on this

It appears the resolver is matching twice for Vuex

import { useStore } from "vuex";

The browser attempts to load bundler as: http://10.0.75.1:3000/@modules/%5C@modules%5Cvuex%5Cdist%5Cvuex.esm-bundler.js

Where as the following import works:

import { useStore } from "vuex/dist/vuex.esm-bundler";

Tested with latest vite and it's working with vuex@next and vue-router@next. Please open new issue if still having problems.