router. Js will report errors when using import packaging, but using require packaging will not report errors but will not achieve lazy loading packaging

in router.js

import Vue from "vue";
import VueRouter from "vue-router";
Vue.use(VueRouter);
const home =()=>import("./components/Home") ;
const post =()=>import("./components/user/writePost") 

const routes = [
    { path: "/", name: "home", component: Home,meta:{keepAlive:true}},
    { path: "/post", name: "post", component: post},]
    
 export default new VueRouter({
    mode: "history",
    routes,
});

in webpack.mix.js

mix
    .js("resources/assets/js/vue/entry-client.js", "public/js/vue")
    .version()
    .postCss("resources/assets/css/app.css", "public/css/app.css", [])
    .webpackConfig(() => {
        const config = {};
        config.resolve = {
            alias: {
                vue$: "vue/dist/vue.min.js",
            },
        };
        config.output = {
            publicPath: "/",  
            chunkFilename: "js/lazy/[name].[chunkhash].js"  // js
        }
        if (mix.inProduction()) {
            config.plugins = [
                new PurgecssPlugin({
                    paths: glob.sync([
                        path.join(__dirname, "app/**/*.php"),
                        path.join(__dirname, "resources/views/**/*.blade.php"),
                        path.join(__dirname, "resources/assets/js/**/*.vue"),
                        path.join(__dirname, "resources/assets/js/**/*.js"),
                    ]),
                    extractors: [{
                        extractor: class {
                            static extract(content) {
                                return content.match(/[A-z0-9-:\/]+/g) || [];
                            }
                        },
                        extensions: ["html", "js", "php", "vue"],
                    }, ],
                }),
            ];
        }

        return config;
    });

what is wrong with the configuration? ask for help
the following is the error report using import