QUploader warning in console

rusia

I added a QUploader to my component. It works okay. But when I press the upload button I get this message in console:

[Vue warn]: Unknown custom element: <q-spinner-undefined> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

found in

---> <QSpinner>
       <QInputFrame>
         <QUploader>
           <Component> at resources\assets\js\components\Component.vue
             <Root>

File is uploaded properly, everything is correct except for this ugly warning in console.

DrPanda

Same Issue here.

rstoenescu

@rusia @DrPanda Cannot reproduce this. And also by looking at the code everything seems to be in order.
What Quasar version are you using?

rusia

I first noticed it in 0.14.3 then upgraded to 0.14.4 and the warning is still there. I use it in a Laravel project, so the build process is powered by laravel-mix. I use default config.
The warning appears only when I run npm run dev or npm run hot. But when npm run production is used it disappears.
Hope it’ll help you to reproduce.

rstoenescu

@rusia Need a reproduction repo. Again, by looking at the code everything seems in order… :| No chance of that undefined spinner popping out. So I am really interested as to what is going on.

rusia

@rstoenescu Here’s the repo: https://github.com/apasov/quploader-error-reproduction
You get the warning in hot reload mode.

Zyme

I am trying QInnerLoading and I get the same error: <q-spinner-undefined> - did you register the component correctly? For recursive components, make sure to provide the “name” option

<q-inner-loading :visible="loading">
        <q-spinner size="50px" color="primary"></q-spinner>
</q-inner-loading>

rstoenescu

@Zyme I just “quasar init folder” and then replaced Hello.vue with:

<template>
  <div class="layout-padding">
    <q-toggle v-model="loading" label="Gogu" />
    <div style="width: 700px; height: 700px;" class="relative-position bg-yellow">
      <q-inner-loading :visible="loading">
          <q-spinner size="50px" color="primary" />
      </q-inner-loading>
    </div>
  </div>
</template>

<script>
import { QSpinner, QInnerLoading, QToggle } from 'quasar'
export default {
  components: {
    QSpinner,
    QInnerLoading,
    QToggle
  },
  data () {
    return {
      loading: false
    }
  },
  methods: {
  }
}
</script>

Cannot reproduce your issue…
Are you using unofficial build templates?

rstoenescu

@russia If you are using custom build templates then it means the build system has a flaw. Please investigate.
Can you “quasar init <folder>” then try to reproduce?

Zyme

@rstoenescu I am using another electron webpack template and importing quasar with from 'quasar-framework'

In my main.js I also have:

import Quasar from 'quasar-framework'
import 'quasar-framework/dist/quasar.mat.css'
import 'quasar-extras/material-icons'
import 'quasar-extras/ionicons'
import 'quasar-extras/fontawesome'

Vue.use(Quasar)

Most features work like they should but not this one.

rstoenescu

@Zyme are you using the official Quasar templates? What does “another electron webpack template” mean?

Zyme

@rstoenescu I am using this one: https://github.com/SimulatedGREG/electron-vue and importing like above.

rstoenescu

@Zyme use the default template with the electron wrapper instead.

Zyme

@rstoenescu I think that template structure is better laid out. I don’t want to have two node_modules taking up 1,2 GB in my project… when I can have one at 600 mb. Also it has a lot of built in features like great error messages in console which I did not find in electron wrapper.

Check it out, maybe you can get some inspiration from it to improve your wrapper.

But still I find it odd that the spinner will not work when I am importing it. When everything else seems to work.

I can’t find what kind of magic the electron wrapper is doing to fix this.

rettigd

I figured out the issue here (I’m also using laravel mix). Be sure to define the __THEME variable in your build process. Update your webpack.mix.js (or whatever your config file is)

var
...
webpack = require('webpack'),

...

mix.webpackConfig({
  plugins: [
    new webpack.DefinePlugin({
      '__THEME': '"mat"' //or whatever your theme is - also note the extra quotes
    }),
  ],
...

rusia

@rettigd Awesome! How exactly did you figure this out?
@rstoenescu Maybe something can be changed in quasar source code so that laravel users needn’t edit their webpack.mix.js?

No More Posting New Topics!

QUploader warning in console