Reputation: 11
I am new in quasar & vue topics.
Trying to launch my first quasar dev server and facing the following error:
bash-3.2$ quasar dev
.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
Dev mode.................. spa
Pkg quasar................ v2.8.2
Pkg @quasar/app-webpack... v3.6.0
Pkg webpack............... v5
Debugging................. enabled
Configured browser support (>= 46.70% of global marketshare):
· Chrome for Android >= 105
· Firefox for Android >= 104
· QQ for Android >= 10.4
· UC for Android >= 12.12
· Android >= 105
· Chrome >= 105
· Edge >= 105
· Firefox >= 104
· IE >= 11
· iOS >= 16.0
· Kaios >= 2.5
· Opera Mini >= all
· Opera Mobile >= 64
· Opera >= 90
· Safari >= 16.0
· Samsung >= 18.0
App • Chaining "UI" Webpack config
App • WAIT • Compiling of "UI" in progress...
App • DONE • "UI" compiled with errors • 7595ms
App • ERROR • UI in ./.quasar/quasar-user-options.js
SyntaxError: Unexpected token (15:8)
13 |
14 |
> 15 | import {[object Object]} from m 'quasar'
| ^
16 |
17 |
18 |
App • COMPILATION FAILED • Please check the log above for details. code here
My quasar.conf.js:
// Configuration for your app
// https://quasar.dev/quasar-cli/quasar-conf-js
const ESLintPlugin = require('eslint-webpack-plugin');
const myEslintOptions = {
extensions: [`js`, `jsx`, `ts`],
exclude: [`node_modules`],
};
module.exports = function(ctx) {
return {
// app boot file (/src/boot)
// --> boot files are part of "main.js"
// https://quasar.dev/quasar-cli/cli-documentation/boot-files
boot: ["i18n", "axios"],
// https://quasar.dev/quasar-cli/quasar-conf-js#Property%3A-css
css: ["app.sass"],
// https://github.com/quasarframework/quasar/tree/dev/extras
extras: [
// 'ionicons-v4',
// 'mdi-v4',
"fontawesome-v5",
// 'eva-icons',
// 'themify',
// '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
],
// https://quasar.dev/quasar-cli/quasar-conf-js#Property%3A-framework
framework: {
// iconSet: 'ionicons-v4', // Quasar icon set
// lang: 'de', // Quasar language pack
// Possible values for "all":
// * 'auto' - Auto-import needed Quasar components & directives
// (slightly higher compile time; next to minimum bundle size; most convenient)
// * false - Manually specify what to import
// (fastest compile time; minimum bundle size; most tedious)
// * true - Import everything from Quasar
// (not treeshaking Quasar; biggest bundle size; convenient)
all: "auto",
components: [],
directives: [],
// Quasar plugins
plugins: [
new ESLintPlugin(myEslintOptions),
],
},
// https://quasar.dev/quasar-cli/cli-documentation/supporting-ie
supportIE: true,
// https://quasar.dev/quasar-cli/quasar-conf-js#Property%3A-build
build: {
scopeHoisting: true,
// vueRouterMode: 'history',
// showProgress: false,
// gzip: true,
// analyze: true,
// preloadChunks: false,
// extractCSS: false,
chainWebpack(chain) {
chain.module
.rule("images")
.use("url-loader")
.tap(options => {
options.name = "img/[path][name].[ext]";
return options;
});
},
// OBSOLETE
/* // https://quasar.dev/quasar-cli/cli-documentation/handling-webpack
extendWebpack(cfg) {
cfg.module.rules.push({
enforce: "pre",
test: /\.(js|vue)$/,
loader: "eslint-webpack-plugin",
exclude: /node_modules/
//options: {
// formatter: require("eslint").CLIEngine.getFormatter("stylish")
//}
});
} */
},
// https://quasar.dev/quasar-cli/quasar-conf-js#Property%3A-devServer
devServer: {
// https: true,
// port: 8080,
proxy: {
"/api": "http://localhost:5000"
},
open: true // opens browser window automatically
},
// animations: 'all', // --- includes all animations
// https://quasar.dev/options/animations
animations: [],
// https://quasar.dev/quasar-cli/developing-ssr/configuring-ssr
ssr: {
pwa: false
},
// https://quasar.dev/quasar-cli/developing-pwa/configuring-pwa
pwa: {
// workboxPluginMode: 'InjectManifest',
// workboxOptions: {}, // only for NON InjectManifest
manifest: {
display: "standalone",
orientation: "portrait",
background_color: "#ffffff",
theme_color: "#027be3",
icons: [
{
src: "statics/icons/icon-128x128.png",
sizes: "128x128",
type: "image/png"
},
{
src: "statics/icons/icon-192x192.png",
sizes: "192x192",
type: "image/png"
},
{
src: "statics/icons/icon-256x256.png",
sizes: "256x256",
type: "image/png"
},
{
src: "statics/icons/icon-384x384.png",
sizes: "384x384",
type: "image/png"
},
{
src: "statics/icons/icon-512x512.png",
sizes: "512x512",
type: "image/png"
}
]
}
},
// https://quasar.dev/quasar-cli/developing-cordova-apps/configuring-cordova
cordova: {
// id: '',
// noIosLegacyBuildFlag: true, // uncomment only if you know what you are doing
},
// https://quasar.dev/quasar-cli/developing-electron-apps/configuring-electron
electron: {
// bundler: 'builder', // or 'packager'
extendWebpack(cfg) {
// do something with Electron main process Webpack cfg
// chainWebpack also available besides this extendWebpack
},
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: 'crm-ui'
}
}
};
};
My package.json:
{
"name": "crm-ui",
"version": "0.3.0",
"description": "test",
"productName": "test",
"cordovaId": "",
"author": "Sergey Vakhrushev",
"private": true,
"scripts": {
"dev": "quasar dev",
"lint": "eslint --ext .js,.vue src",
"test": "echo \"No test specified\" && exit 0"
},
"dependencies": {
"@quasar/extras": "^1.15.3",
"apexcharts": "^3.25.0",
"axios": "^0.21.1",
"flag-icon-css": "^3.4.5",
"js-cookie": "^2.2.1",
"quasar": "^2.8.2",
"vue": "^3.2.39",
"vue-apexcharts": "^1.6.2",
"vue-clipboard2": "^0.3.3",
"vue-i18n": "^9.2.2",
"vue-template-compiler": "^2.7.10"
},
"devDependencies": {
"@babel/eslint-parser": "^7.19.1",
"@quasar/app-webpack": "^3.6.0",
"@quasar/cli": "^1.3.2",
"@vue/eslint-config-prettier": "^7.0.0",
"eslint": "^8.23.1",
"eslint-plugin-vue": "^9.4.0",
"eslint-webpack-plugin": "^3.2.0"
},
"engines": {
"node": ">= 16.10.0",
"npm": ">= 8.10.0",
"yarn": ">= 1.6.0"
},
"browserslist": [
"last 1 version, not dead, ie >= 11"
]
}
Tried to find some answers, but google gave only few links with quasar-user-options.js issues.
As it is generating automatically, don't really understand how to impact on it.
npm install is going well, only few warnings.
I am on MacBook Pro M1 with macOS Monterey 12.5.1
Upvotes: 1
Views: 1033
Reputation: 950
You are feeding a Webpack plugin into framework > plugins
which is for Quasar plugins. That's why a faulty .quasar/quasar-user-options.js
file is being created.
const ESLintPlugin = require('eslint-webpack-plugin');
// ...
framework: {
// ...
// Quasar plugins
plugins: [
new ESLintPlugin(myEslintOptions),
],
// ...
You should use build > extendWebpack
or build > chainWebpack
methods for this. Here is an example with chainWebpack
:
const ESLintPlugin = require('eslint-webpack-plugin');
// ...
chainWebpack (chain) {
// ...
chain.plugin('eslint-webpack-plugin')
.use(ESLintPlugin, [{ extensions: [ 'js', 'vue' ] }])
}
Upvotes: 1