SergVakh
SergVakh

Reputation: 11

Incorrect quasar-user-options.js

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

Answers (1)

Yusuf Kandemir
Yusuf Kandemir

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

Related Questions