quasar: When building an app it gives vite error - node.js

Question

When I do quasar build it gives the following:
deb2302user#deb2302:~/tmp2303/vue/kitty$ quasar build
.d88888b.
d88P" "Y88b
888 888
888 888 888 888 8888b. .d8888b 8888b. 888d888
888 888 888 888 "88b 88K "88b 888P"
888 Y8b 888 888 888 .d888888 "Y8888b. .d888888 888
Y88b.Y8b88P Y88b 888 888 888 X88 888 888 888
"Y888888" "Y88888 "Y888888 88888P' "Y888888 888
Y8b
Build mode............. spa
Pkg quasar............. v2.11.3
Pkg #quasar/app-vite... v1.1.3
Pkg vite............... v2.9.15
Debugging.............. no
Publishing............. no
App • Cleaned build artifact: "/home/deb2302user/tmp2303/vue/kitty/dist/spa"
App • WAIT • Compiling of SPA UI with Vite in progress...
[vite:resolve] Missing "./preload-helper" export in "vite" package
/home/deb2302user/tmp2303/vue/kitty/node_modules/.pnpm/vite#2.9.15_sass#1.32.12/node_modules/vite/dist/node/chunks/dep-689425f3.js:38597
throw new Error(
^
Error: Missing "./preload-helper" export in "vite" package
at bail (/home/deb2302user/tmp2303/vue/kitty/node_modules/.pnpm/vite#2.9.15_sass#1.32.12/node_modules/vite/dist/node/chunks/dep-689425f3.js:38597:8)
at resolve (/home/deb2302user/tmp2303/vue/kitty/node_modules/.pnpm/vite#2.9.15_sass#1.32.12/node_modules/vite/dist/node/chunks/dep-689425f3.js:38674:10)
at resolveExports (/home/deb2302user/tmp2303/vue/kitty/node_modules/.pnpm/vite#2.9.15_sass#1.32.12/node_modules/vite/dist/node/chunks/dep-689425f3.js:40982:12)
at resolveDeepImport (/home/deb2302user/tmp2303/vue/kitty/node_modules/.pnpm/vite#2.9.15_sass#1.32.12/node_modules/vite/dist/node/chunks/dep-689425f3.js:41000:31)
at tryNodeResolve (/home/deb2302user/tmp2303/vue/kitty/node_modules/.pnpm/vite#2.9.15_sass#1.32.12/node_modules/vite/dist/node/chunks/dep-689425f3.js:40773:20)
at Object.resolveId (/home/deb2302user/tmp2303/vue/kitty/node_modules/.pnpm/vite#2.9.15_sass#1.32.12/node_modules/vite/dist/node/chunks/dep-689425f3.js:40581:28)
at /home/deb2302user/tmp2303/vue/kitty/node_modules/.pnpm/rollup#2.77.3/node_modules/rollup/dist/shared/rollup.js:22826:37 {
code: 'PLUGIN_ERROR',
plugin: 'vite:resolve',
hook: 'resolveId',
watchFiles: [
'/home/deb2302user/tmp2303/vue/kitty/index.html',
'/home/deb2302user/tmp2303/vue/kitty/.quasar/client-entry.js',
'/home/deb2302user/tmp2303/vue/kitty/node_modules/.pnpm/vite#4.1.1_#types+node#12.20.55/node_modules/vite/package.json',
'/home/deb2302user/tmp2303/vue/kitty/node_modules/.pnpm/vue#3.2.45/node_modules/vue/package.json',
'/home/deb2302user/tmp2303/vue/kitty/node_modules/.pnpm/#quasar+extras#1.15.9/node_modules/#quasar/extras/package.json',
'/home/deb2302user/tmp2303/vue/kitty/node_modules/.pnpm/quasar#2.11.3/node_modules/quasar/package.json',
'/home/deb2302user/tmp2303/vue/kitty/node_modules/.pnpm/vue#3.2.45/node_modules/vue/dist/vue.runtime.esm-bundler.js',
'/home/deb2302user/tmp2303/vue/kitty/node_modules/.pnpm/#quasar+extras#1.15.9/node_modules/#quasar/extras/roboto-font/roboto-font.css',
'/home/deb2302user/tmp2303/vue/kitty/node_modules/.pnpm/#quasar+extras#1.15.9/node_modules/#quasar/extras/material-icons/material-icons.css',
'/home/deb2302user/tmp2303/vue/kitty/node_modules/.pnpm/#quasar+extras#1.15.9/node_modules/#quasar/extras/material-icons-outlined/material-icons-outlined.css',
'/home/deb2302user/tmp2303/vue/kitty/node_modules/.pnpm/quasar#2.11.3/node_modules/quasar/dist/quasar.sass',
'/home/deb2302user/tmp2303/vue/kitty/.quasar/app.js',
'/home/deb2302user/tmp2303/vue/kitty/.quasar/quasar-user-options.js'
]
}
Node.js v18.14.0
package.json
{
"name": "kitty",
"version": "0.0.1",
"private": true,
"description": "Kitty desc",
"author": "none <none>",
"scripts": {
"lint": "eslint --ext .js,.ts,.vue ./",
"format": "prettier --write \"**/*.{js,ts,vue,scss,html,md,json}\" --ignore-path .gitignore",
"test": "echo \"No test specified\" && exit 0"
},
"dependencies": {
"#quasar/extras": "^1.0.0",
"#vitejs/plugin-vue-jsx": "^3.0.0",
"#vue/babel-plugin-jsx": "^1.1.1",
"#vue/cli-plugin-babel": "^5.0.8",
"#vueuse/core": "^9.11.1",
"axios": "^0.21.1",
"babel-plugin-syntax-jsx": "^6.18.0",
"babel-plugin-transform-vue-jsx": "^3.7.0",
"core-js": "^3.8.3",
"d3": "^7.8.1",
"jquery": "^3.6.3",
"pinia": "^2.0.11",
"quasar": "^2.6.0",
"vue": "^3.0.0",
"vue-i18n": "^9.2.2",
"vue-router": "^4.0.0"
},
"devDependencies": {
"#intlify/vite-plugin-vue-i18n": "^3.3.1",
"#quasar/app-vite": "^1.0.0",
"#types/node": "^12.20.21",
"#typescript-eslint/eslint-plugin": "^5.10.0",
"#typescript-eslint/parser": "^5.10.0",
"autoprefixer": "^10.4.2",
"eslint": "^8.10.0",
"eslint-config-prettier": "^8.1.0",
"eslint-plugin-vue": "^9.0.0",
"prettier": "^2.5.1",
"typescript": "^4.5.4",
"vite": "^4"
},
"engines": {
"node": "^18 || ^16 || ^14.19",
"npm": ">= 6.13.4",
"yarn": ">= 1.21.1"
},
"productName": "Kitty"
}
quasar.config.js
/* eslint-env node */
/*
* This file runs in a Node context (it's NOT transpiled by Babel), so use only
* the ES6 features that are supported by your Node version. https://node.green/
*/
// Configuration for your app
// https://v2.quasar.dev/quasar-cli-vite/quasar-config-js
const { configure } = require('quasar/wrappers');
const path = require('path');
module.exports = configure(function (/* ctx */) {
return {
eslint: {
// fix: true,
// include = [],
// exclude = [],
// rawOptions = {},
warnings: true,
errors: true
},
// https://v2.quasar.dev/quasar-cli-vite/prefetch-feature
// preFetch: true,
// app boot file (/src/boot)
// --> boot files are part of "main.js"
// https://v2.quasar.dev/quasar-cli-vite/boot-files
boot: [
'i18n',
'axios',
],
// https://v2.quasar.dev/quasar-cli-vite/quasar-config-js#css
css: [
'app.scss'
],
// https://github.com/quasarframework/quasar/tree/dev/extras
extras: [
// 'ionicons-v4',
// 'mdi-v5',
// 'fontawesome-v6',
// 'eva-icons',
// 'themify',
// 'line-awesome',
// 'roboto-font-latin-ext', // this or either 'roboto-font', NEVER both!
'roboto-font', // optional, you are not bound to it
'material-icons', // optional, you are not bound to it
'material-icons-outlined',
],
// Full list of options: https://v2.quasar.dev/quasar-cli-vite/quasar-config-js#build
build: {
target: {
browser: [ 'es2019', 'edge88', 'firefox78', 'chrome87', 'safari13.1' ],
node: 'node16'
},
vueRouterMode: 'history', // available values: 'hash', 'history'
// vueRouterBase,
// vueDevtools,
// vueOptionsAPI: false,
// rebuildCache: true, // rebuilds Vite/linter/etc cache on startup
// publicPath: '/',
// analyze: true,
// env: {},
// rawDefine: {}
// ignorePublicFolder: true,
// minify: false,
// polyfillModulePreload: true,
// distDir
// extendViteConf (viteConf) {},
// viteVuePluginOptions: {},
vitePlugins: [
['#intlify/vite-plugin-vue-i18n', {
// if you want to use Vue I18n Legacy API, you need to set `compositionOnly: false`
// compositionOnly: false,
// you need to set i18n resource including paths !
include: path.resolve(__dirname, './src/i18n/**')
}
],
['#vitejs/plugin-vue-jsx', {}
]
]
},
// Full list of options: https://v2.quasar.dev/quasar-cli-vite/quasar-config-js#devServer
devServer: {
// https: true
open: true // opens browser window automatically
},
// https://v2.quasar.dev/quasar-cli-vite/quasar-config-js#framework
framework: {
config: {},
// iconSet: 'material-icons', // Quasar icon set
// lang: 'en-US', // Quasar language pack
// For special cases outside of where the auto-import strategy can have an impact
// (like functional components as one of the examples),
// you can manually specify Quasar components/directives to be available everywhere:
//
components: [
'QLayout',
'QHeader',
'QDrawer',
'QPageContainer',
'QPage',
'QToolbar',
'QToolbarTitle',
'QBtn',
'QBtnGroup',
'QIcon',
'QList',
'QItem',
'QItemSection',
'QItemLabel',
'QTooltip',
'QInput',
'QCard',
'QCardSection',
'QCardActions',
'QDialog',
'QForm',
'QFooter',
'QAvatar',
'QScrollArea',
'QImg',
'QTabs',
'QTab',
'QRouteTab',
'QTabPanels',
'QTabPanel',
'QFab',
'QFabAction',
'QSeparator',
'QBar',
'QSpace',
'QSelect',
'QRadio',
'QTime',
'QDate',
'QPopupProxy',
'QTable',
'QTh',
'QTr',
'QTd',
'QCheckbox',
'QToggle',
'QSpinnerHourglass',
'QPageSticky',
'QTimeline',
'QTimelineEntry',
'QBadge',
'QStepper',
'QStep',
'QStepperNavigation',
'QMenu',
],
directives: [
'ClosePopup'
],
// Quasar plugins
plugins: [
'Notify'
]
},
// animations: 'all', // --- includes all animations
// https://v2.quasar.dev/options/animations
animations: [],
// https://v2.quasar.dev/quasar-cli-vite/quasar-config-js#sourcefiles
// sourceFiles: {
// rootComponent: 'src/App.vue',
// router: 'src/router/index',
// store: 'src/store/index',
// registerServiceWorker: 'src-pwa/register-service-worker',
// serviceWorker: 'src-pwa/custom-service-worker',
// pwaManifestFile: 'src-pwa/manifest.json',
// electronMain: 'src-electron/electron-main',
// electronPreload: 'src-electron/electron-preload'
// },
// https://v2.quasar.dev/quasar-cli-vite/developing-ssr/configuring-ssr
ssr: {
// ssrPwaHtmlFilename: 'offline.html', // do NOT use index.html as name!
// will mess up SSR
// extendSSRWebserverConf (esbuildConf) {},
// extendPackageJson (json) {},
pwa: false,
// manualStoreHydration: true,
// manualPostHydrationTrigger: true,
prodPort: 3000, // The default port that the production server should use
// (gets superseded if process.env.PORT is specified at runtime)
middlewares: [
'render' // keep this as last one
]
},
// https://v2.quasar.dev/quasar-cli-vite/developing-pwa/configuring-pwa
pwa: {
workboxMode: 'generateSW', // or 'injectManifest'
injectPwaMetaTags: true,
swFilename: 'sw.js',
manifestFilename: 'manifest.json',
useCredentialsForManifestTag: false,
// useFilenameHashes: true,
// extendGenerateSWOptions (cfg) {}
// extendInjectManifestOptions (cfg) {},
// extendManifestJson (json) {}
// extendPWACustomSWConf (esbuildConf) {}
},
// Full list of options: https://v2.quasar.dev/quasar-cli-vite/developing-cordova-apps/configuring-cordova
cordova: {
// noIosLegacyBuildFlag: true, // uncomment only if you know what you are doing
},
// Full list of options: https://v2.quasar.dev/quasar-cli-vite/developing-capacitor-apps/configuring-capacitor
capacitor: {
hideSplashscreen: true
},
// Full list of options: https://v2.quasar.dev/quasar-cli-vite/developing-electron-apps/configuring-electron
electron: {
// extendElectronMainConf (esbuildConf)
// extendElectronPreloadConf (esbuildConf)
inspectPort: 5858,
bundler: 'packager', // 'packager' or 'builder'
packager: {
// https://github.com/electron-userland/electron-packager/blob/master/docs/api.md#options
// OS X / Mac App Store
// appBundleId: '',
// appCategoryType: '',
// osxSign: '',
// protocol: 'myapp://path',
// Windows only
// win32metadata: { ... }
},
builder: {
// https://www.electron.build/configuration/configuration
appId: 'kitty'
}
},
// Full list of options: https://v2.quasar.dev/quasar-cli-vite/developing-browser-extensions/configuring-bex
bex: {
contentScripts: [
'my-content-script'
],
// extendBexScriptsConf (esbuildConf) {}
// extendBexManifestJson (json) {}
}
}
});
quasar dev by itself works as expected

Answer 1

You need to downgrade vite dependency to version v2.9.15. At the start of the build log you can see that Quasar is using that version.