Laravel-mix + Vue Lazy loading

Already 6 day I struggle to add lazy loading of components to the project. Please, who have already encountered such a need, share experiences, experiences or tips in this area, please. And then I will soon throw this front and fly into space in my burning chair (

.babelrc (at the root of the project):

{ "presets": [ ["@babel/preset-env", { "useBuiltIns": false }] ], "plugins": [ "@babel/plugin-transform-runtime" ] } 

package.json:

 { "private": true, "scripts": { "dev": "npm run development", "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js", "watch": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js", "watch-poll": "npm run watch -- --watch-poll", "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js", "prod": "npm run production", "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js" }, "devDependencies": { "@babel/core": "^7.1.6", "@babel/plugin-syntax-dynamic-import": "^7.0.0", "@babel/plugin-transform-runtime": "^7.1.0", "@babel/preset-env": "^7.1.6", "axios": "^0.18", "babel-core": "^7.0.0-bridge.0", "babel-loader": "^8.0.0-beta.0", "babel-plugin-syntax-dynamic-import": "^6.18.0", "browser-sync": "^2.24.7", "browser-sync-webpack-plugin": "^2.2.2", "cross-env": "^5.2.0", "laravel-mix": "^2.1.14" }, "dependencies": { "babel-polyfill": "^6.26.0", "filepond-plugin-file-validate-type": "^1.1.0", "filepond-plugin-image-preview": "^1.1.0", "fullpage.js": "^3.0.1", "lodash": "^4.17.10", "material-design-icons": "^3.0.1", "parallax-js": "^3.1.0", "simplex-noise": "^2.4.0", "three": "^0.96.0", "vue": "^2.5.17", "vue-awesome-swiper": "^3.1.3", "vue-carousel": "^0.14.0", "vue-filepond": "^2.1.6", "vue-lory": "0.0.5", "vue-router": "^3.0.1", "vuetify": "^1.1.4", "vuex": "^3.0.1" } } 

Component Code:

 import Vue from 'vue'; import VueRouter from 'vue-router'; Vue.use(VueRouter); const Home = () => import('../views/client/Home'); // const AboutUs = () => import('../views/client/AboutUs'); // const Contacts = () => import('../views/client/Contacts'); // const Portfolio = () => import('../views/client/Portfolio'); //components // import Home from '../views/client/Home'; import AboutUs from '../views/client/AboutUs'; import Contacts from '../views/client/Contacts'; import Portfolio from '../views/client/Portfolio'; import {bus} from '../app' const routes = [ { path: '/', component: Home, name: 'home', beforeEnter: (to, from, next) => { window.onload= function(){ document.getElementById("WebGL-output").style.opacity = "1"; }; next(); } }, { path: '/about-us', component: AboutUs, name: 'about-us', beforeEnter: (to, from, next) => { window.onload= function(){ window.dispatchEvent(new Event("bubbelMoveRight")); }; next(); } }, { path: '/portfolio', component: Portfolio, name: 'portfolio', beforeEnter: (to, from, next) => { window.onload= function(){ document.getElementById("WebGL-output").style.opacity = "0"; }; next(); } }, { path: '/contacts', component: Contacts, name: 'contacts', beforeEnter: (to, from, next) => { window.onload= function(){ window.dispatchEvent(new Event("bubbelMoveLeft")); }; next(); } } ]; export const router = new VueRouter({ mode: 'history', routes: routes }); 

The error itself:

 Module build failed: TypeError: this.setDynamic is not a function at PluginPass.pre (D:\Server\OSPanel\domains\penka\node_modules\babel-plugin-transform-runtime\lib\index.js:31:12) at transformFile (D:\Server\OSPanel\domains\penka\node_modules\@babel\core\lib\transformation\index.js:78:27) at runSync (D:\Server\OSPanel\domains\penka\node_modules\@babel\core\lib\transformation\index.js:45:3) at transformSync (D:\Server\OSPanel\domains\penka\node_modules\@babel\core\lib\transform.js:43:38) at Object.transform (D:\Server\OSPanel\domains\penka\node_modules\@babel\core\lib\transform.js:22:38) at transpile (D:\Server\OSPanel\domains\penka\node_modules\babel-loader\lib\index.js:55:20) at D:\Server\OSPanel\domains\penka\node_modules\babel-loader\lib\fs-cache.js:116:18 at ReadFileContext.callback (D:\Server\OSPanel\domains\penka\node_modules\babel-loader\lib\fs-cache.js:36:21) at FSReqWrap.readFileAfterOpen [as oncomplete] (fs.js:420:13) 

This error breaks as soon as I try to connect plugin-syntax-dynamic-import. Because, as I understand it, out of the mix box does not support component loading.