QUploader warning in console



  • 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.



  • Same Issue here.


  • Admin

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



  • 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.


  • Admin

    @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.



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



  • 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>
    

  • Admin

    @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?


  • Admin

    @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?



  • @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.


  • Admin

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



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


  • Admin

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



  • @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.



  • 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
        }),
      ],
    ...


  • @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?