QUploader warning in console



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