import vuejs router component with webpack

Question

In vuejs, when I import a component in the router as such: import('@/layout') it works fine and as expected. If one had to stringify the outcome, it would look like this:

function ()
{
   return Promise.resolve().then
   (
          function ()
          {
              return Object(C_Users_Admin_Documents_GitHub_MyProject_node_modules_babel_runtime_helpers_esm_interopRequireWildcard__WEBPACK_IMPORTED_MODULE_1__["default"])(__webpack_require__(/*! @/layout */ "./src/layout/index.vue"));
          }
   );
}

On the other hand when I feed in the string part dynamically as such: import(route.meta.componentPath) it does not resolve and looks like this:

function ()
{
   return Promise.resolve("".concat(route.meta.componentPath)).then
   (
          function (s)
          {
             return Object(C_Users_Admin_Documents_GitHub_MyProject_node_modules_babel_runtime_helpers_esm_interopRequireWildcard__WEBPACK_IMPORTED_MODULE_1__["default"])(__webpack_require__("./src/store/modules sync recursive")(s));
          }
   );
}

Notice the difference in the resolve and webpack_require_ parts (SCROLL TO THE RIGHT)

How shall I get the latter to work? I am totally new to webpack but all errors/answers are pointing to it right? All I have set up is babel.config.js as follows:

module.exports = {
      presets: [
        '@vue/cli-plugin-babel/preset'
      ],
      'env': {
        'development': {
          // babel-plugin-dynamic-import-node plugin converts all import() to require().
          // This plugin can significantly increase the speed of hot updates, when you have a large number of pages.
          'plugins': ['dynamic-import-node']
        }
      }
    }

which I also am not 100% sure what it does underneath.

Answer 1

It works if you just replace the entire import with this function:

function (resolve) {
  require([route.meta.componentPath], resolve);
}

however the code behind is by far not the same as the original. I'm not marking this as an answer but as a workaround as it would be nice to actually know how it's done properly.