dynamic/lazy component import with runtime generated path not working with v1



  • I would like to import some components at runtime via a path determined at runtime.
    https://quasar.dev/quasar-cli/cli-documentation/lazy-loading#Lazy-load-on-the-fly

    like so

        async loadService () {
          let path = `${SERVICE_DIR}/${this.service}.vue`
          console.log(path)
          return import(path)  // throws errors
         //  return import('src/pages/services/network.vue')  // works fine
        }
      },
    

    BUT.

    1. webpack complains with
     warning  in ./src/components/Service.vue?vue&type=script&lang=js&
    
    Critical dependency: the request of a dependency is an expression
    
    1. When it tries to load can’t find module which is not true cause it loads via static import at that path
    Error: Cannot find module 'src/pages/services/network.vue'
    

    If I hard code a path for testing purposes (in the comment above) then both 1 and 2 go away and it works as intended.

    Seems there is some webpack issue? I am running latest quasar 1+

    Some other issues in other projects indicate that a runtime path is an issue with webpack.

    Apparently this works cause the docs indicate that it does so has something changed?

    One advantage of using dynamic imports as opposed to regular imports is that the import path can be determined at runtime:




Log in to reply