Vue 3: defineAsyncComponent not resolving .vue files and not splitting chunks

Question

I'm trying to load Vue 3 components in a asynchronous way. I've found that there is a function called

defineAsyncComponent

which is supposed to be used as follows:

const GameUI = defineAsyncComponent(()=>import(filePath));
app.component("GameUI", GameUI);

filePath in this context is exactly: './components/GameUI/GameUI.element.vue'

Running the app like this leads to the following error:

Uncaught (in promise) Error: Cannot find module './components/GameUI/GameUI.element.vue'
    at eval (eval at ./src lazy recursive)

But... if I change the filePath code to import the path as a string:

const GameUI = defineAsyncComponent(()=>import('./components/GameUI/GameUI.element.vue'));

The app works, it does find the component.

I don't want to use constant strings, because I have a lot of components and I want to load them asynchronously.

One of my main goals to achieve this, is to load the webapp by parts, component by component whenever they are needed, instead of loading them all on start.

I've also find that if I append a comment as follows:

const GameUI = defineAsyncComponent(()=>import(/* webpackChunkName: "GameUI" */ './components/GameUI/GameUI.element.vue'));

The JavaScript part for the GameUI component, should have it's own chunk.js file, but I always keep getting everything in a couple .js chunk files, which contradicts the async loading I want to achieve.

I'm using vue-cli-service, and my vue.config.js looks like this:

module.exports = {
  productionSourceMap: false,
  css: {
    loaderOptions: {
        sass: {
          additionalData: process.env.NODE_ENV === 'production'
            ? '$baseURL:"/dist/";'
            : '$baseURL:"/";'
        }
    }
      },
  publicPath: process.env.NODE_ENV === 'production'
  ? '/dist/'
  : '/',
    devServer: {
      https: true,
      port:"",
      host:'website.com',
      disableHostCheck: true,
      cert: (fs.readFileSync('cert.pem')+""),
      key: (fs.readFileSync('privkey.pem')+""),
      ca: (fs.readFileSync('ca.pem')+""),
    }
  };

I've already tried multiple stuff I've found online, but they are not that much explanatory. I'm literally doing the same as some online articles I've found and cannot find the problem on my side.

The two main problems are:

• Cannot load .vue files from variables, only full strings.
• Cannot split the code into different .js files for every async loaded component.

Answer 1

The answer to the first question: Because there have some limitations of async import .