NPM / Vite problem: Could not resolve "vue" in Framework7 project - node.js

Question

I'm having an unusual problem running a basic Framework7 project with vue.
Once created a Framework7 Vue project with the command: framework7 create --ui and installed the dependencies with npm i get the following problem: Could not resolve "vue"
in all packages because the script is looking for vue inside a esm folder like: ../../../node_modules/swiper/esm/vue/swiper.js:1:79 and it's quite strange because esm folder is never existed.
The strange thing is that the same project, with the same package.json works perfectly in another pc with the same version of node (v16.14.2) and npm (8.7.0)
So the problem must be in my pc. I thought about some cache problem, but despite forcing a cache cleanup the problem remains.
For completeness I leave the json package, which is the same that framework7 create --ui command creates for a Vue project.
Has anyone ever had a similar problem or know what the cause might be?
I guess the problem could be related to npm or vite.
{
"name": "my-app",
"private": true,
"version": "1.0.0",
"description": "My App",
"repository": "",
"license": "UNLICENSED",
"scripts": {
"start": "npm run dev",
"dev": "cross-env NODE_ENV=development vite",
"build": "cross-env NODE_ENV=production vite build && npx workbox generateSW workbox-config.js",
"build-capacitor-ios": "cross-env NODE_ENV=production vite build && npx cap copy ios",
"build-capacitor-android": "cross-env NODE_ENV=production vite build && npx cap copy android",
"postinstall": "cpy --flat ./node_modules/framework7-icons/fonts/*.* ./src/fonts/ && cpy --flat ./node_modules/material-icons/iconfont/*.* ./src/fonts/"
},
"browserslist": [
"IOS >= 13",
"Safari >= 13",
"last 5 Chrome versions",
"last 5 Firefox versions",
"Samsung >= 12"
],
"dependencies": {
"#capacitor/android": "^3.4.3",
"#capacitor/app": "^1.1.1",
"#capacitor/browser": "^1.0.7",
"#capacitor/core": "^3.4.3",
"#capacitor/ios": "^3.4.3",
"#capacitor/keyboard": "^1.2.2",
"#capacitor/splash-screen": "^1.2.2",
"#capacitor/status-bar": "^1.0.8",
"dom7": "^4.0.4",
"framework7": "^7.0.1",
"framework7-icons": "^5.0.5",
"framework7-vue": "^7.0.1",
"material-icons": "^1.10.8",
"skeleton-elements": "^4.0.0",
"swiper": "^8.1.1",
"vue": "^3.2.33"
},
"devDependencies": {
"#capacitor/cli": "^3.4.3",
"#vitejs/plugin-vue": "^2.3.1",
"#vue/compiler-sfc": "^3.2.33",
"cordova-res": "^0.15.4",
"cpy-cli": "^4.1.0",
"cross-env": "^7.0.3",
"postcss-preset-env": "^7.4.3",
"vite": "^2.9.5",
"workbox-cli": "^6.5.3"
}
}

Answer 1

Changing in vite.config.js works for me. I have used the node_modules path for all the external bundle related errors
You can mark the path "vue" as external to exclude it from the bundle, which will remove this error.
import path from 'path';
import vue from '#vitejs/plugin-vue';
const SRC_DIR = path.resolve(__dirname, './src');
const PUBLIC_DIR = path.resolve(__dirname, './public');
const BUILD_DIR = path.resolve(__dirname, './www',);
function getPath(new_path) {
return path.resolve(__dirname, 'node_modules/' + new_path);
}
export default {
plugins: [
vue(),
],
root: SRC_DIR,
base: '',
publicDir: PUBLIC_DIR,
build: {
outDir: BUILD_DIR,
assetsInlineLimit: 0,
emptyOutDir: true,
rollupOptions: {
treeshake: false,
},
},
resolve: {
alias: {
'#': SRC_DIR,
"vue": getPath('vue/dist/vue.runtime.esm-browser.js'),
"framework7/lite-bundle": getPath('framework7/framework7-lite-bundle.esm.js'),
"framework7-vue/bundle": getPath('framework7-vue/framework7-vue-bundle.js'),
"swiper/vue": getPath('swiper/vue/swiper-vue.js'),
"skeleton-elements/vue": getPath('skeleton-elements/vue/index.js'),
},
},
server: {
host: true,
},
};