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?


Log in to reply
 

Looks like your connection to Quasar Framework was lost, please wait while we try to reconnect.