Hi,

I upgraded the following packages:

• eslint 5.16.0 => 6.7.1
• eslint-plugin-vue 5.2.3 =>6.0.1
• @vue/eslint-config-standard 4.0.0 => 5.0.0

and now when I start my dev app I get a list of the following warnings:

Module Warning (from ./node_modules/eslint-loader/dist/cjs.js):
Failed to load plugin 'import' declared in '.eslintrc.js » @vue/eslint-config-standard » D:\Projects\editor\node_modules\eslint-config-standard\index.js': Cannot find module 'eslint-plugin-import'
Require stack:
- D:\Projects\editor\__placeholder__.js

I also get an error in WebStorm (when I open a .js file) with a stacktrace:

Error: Failed to load plugin 'import' declared in '.eslintrc.js » @vue/eslint-config-standard » D:\Projects\editor\node_modules\eslint-config-standard\index.js': Cannot find module 'eslint-plugin-import'
Require stack:
- D:\Projects\editor\__placeholder__.js
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:954:17)
    at Function.resolve (internal/modules/cjs/helpers.js:75:19)
    at Object.resolve (D:\Projects\editor\node_modules\eslint\lib\shared\relative-module-resolver.js:44:50)
    at ConfigArrayFactory._loadPlugin (D:\Projects\editor\node_modules\eslint\lib\cli-engine\config-array-factory.js:957:39)
    at D:\Projects\editor\node_modules\eslint\lib\cli-engine\config-array-factory.js:846:33
    at Array.reduce (<anonymous>)
    at ConfigArrayFactory._loadPlugins (D:\Projects\editor\node_modules\eslint\lib\cli-engine\config-array-factory.js:842:22)
    at ConfigArrayFactory._normalizeObjectConfigDataBody (D:\Projects\editor\node_modules\eslint\lib\cli-engine\config-array-factory.js:665:32)
    at _normalizeObjectConfigDataBody.next (<anonymous>)
    at ConfigArrayFactory._normalizeObjectConfigData (D:\Projects\editor\node_modules\eslint\lib\cli-engine\config-array-factory.js:594:20)
Process finished with exit code -1

Is Quasar compatible with ESlint 6.x or shall I stick to 5.x?

I have found the following solution:

1. Install the “raw-loader” loader
2. Import the SCSS using the following statement:

import style from '!raw-loader!sass-loader!./my-styles.scss'

Note: the “!” at the beginning is to override the default loaders configuration. In my case Quasar chains the “style-loader” for SCSS files by default (to output a tag in the head) so I have to disable it in this case.

And now I have the compiled CSS code in the  style  variable.

Update: After adding the above import statement, my ESLint complained that I shouldn’t use the import syntax to configure webpack loaders (more details why: https://github.com/benmosher/eslint-plugin-import/blob/master/docs/rules/no-webpack-loader-syntax.md). So I removed the import statement and added this code to my quasar.conf.js:

build: {
  // ...
  extendWebpack (cfg) {
    // ...
    const ruleIndex = cfg.module.rules.findIndex(rule => rule.test.toString() === '/\\.scss$/')
    cfg.module.rules[ruleIndex].oneOf.unshift({
      test: /my-styles\.scss$/,
      use: [
        'raw-loader',
        {
          loader: 'postcss-loader',
          options: {
            plugins: [
              require('autoprefixer')
            ]
          }
        },
        'sass-loader'
      ]
    })
    // ...
  }
  // ...
}

Note that in this case I have also added the postcss-loader with the autoprefixer plugin as I wanted my CSS to be enriched with vendor prefixes.

An update to the solution has been added above

@dobbel and @metalsadman , thank you!

importStrategy: 'auto'

Yes, if I put 'QBtn' in components then it works.

So if I want to use dynamic components I have to manually put them in components… what an irony

What is the proper way to use Quasar components as a dynamic components, i.e.:

<component is="q-btn" />

Currently I get the following error:

Unknown custom element: <q-btn> - did you register the component correctly?

My use case is - I am creating a wrapper component to add drag-n-drop functionality so I need to be able to pass the wrapped component as a prop to my drag wrapper, which in turn uses <component :is="tag" /> to render the actual wrapped component.

@metalsadman, that’s a great tip, thanks! I was just looking for that.

One question though - in this case, when using q-tr with q-td in a body slot, it seems that I will need to effectively rewrite the whole implementation of the body row, e.g.:

<template v-slot:body="props">
  <q-tr :props="props">
    // 1. the td for the selection column with the q-checkbox and all the logic
    // 2. all other tds for all other columns
  </q-tr>
</template>

while by default all of this is done by Quasar. So my question is - is there a more efficient way to just make a row clickable, without rewriting the complete default implementation of the body row slot?

Thank you in advance!

@ddenev class and style are not qbtn props, those are native attributes

@metalsadman, yes, I know that, thank you for mentioning

Nevertheless, I believe it’s intuitive to expect that both the QBtn-related props and the native “style” and “class” attributes work. This expectation is based on “See QBtn for available props” which refers to the QBtn-inherent ones but leaves the native attributes out and that in turn leads to a default assumption that if they work naturally with the QBtn component then they should also work for the Dialog Plugin case.

… and that’s why the docs wasn’t wrong about it

I wasn’t implying that the docs are “wrong”, I was just suggesting to make them a bit more clear based on my belief above. Other people could, like me, naively assume that the “style” and “class” native attributes should naturally work in that case.

OK, got it, thank you again!

I guess custom component is the way to go then. In addition it might be a good idea IMHO to update the docs that “style” and “class” will not work in this case since the current description implies that all QBtn props would work.

@metalsadman, thank you very much for the effort but unfortunately this does not help in solving the problem that I described.

I definitely checked all the properties of QBtn before posting the question here and there is no QBtn-specific properties that manage the general style and class, apart from the base “style” and “class” ones, which in turn do not work, as described. The border radius that I want to apply above can only be applied with “style”, there is no inherent property of QBtn that allows this.

Providing a “style” or a “class” property binding to a regular QBtn component works just fine. It does not work for Dialog Plugin though.

So back to square 1 - is this a bug and if not then how is this supposed to work?

Hi,

I’m having the following code:

exportSelected () {
  this.$q.dialog({
    title: 'Export selected',
    message: 'Export the selected analyses?',
    cancel: true,
    ok: {
      label: 'Export',
      unelevated: true,
      style: { 'border-radius': 0 }
    }
  })
}

The problem is that the ‘style’ is not applied to the button. Same is with ‘class’ property.

How is this supposed to work?

Found the problem - there was an old yarn.lock file in the project dir and the quasar upgrade script checks for its existence in order to decide which packager to use.
Removed it and now everything works.
Sorry for the false alarm!

I guess there might be some regression going on since @rstoenescu fixed something that seems related in 1.0.0-beta7 - https://github.com/quasarframework/quasar/releases/tag/%40quasar%2Fcli-v1.0.0-beta.7