Vue Router Lazy Loading Components Fail in Production Build

[keinagae]

Description

I'm experiencing an issue with lazy loading Vue components in routes when using Bit.dev. The lazy loading works fine in development mode, but fails in production builds.

export const AuthRoutes = [
    {
        path:'/auth',
        children:[
            {
                path: '',
                name: 'login',
                component: import('./views/LoginView.vue'),
            },
            {
                path: 'authorize',
                name: 'authorize',
                component: import('./views/AuthorizationView.vue'),
            },
        ],
    },
]

• Works perfectly in development mode
• Fails in production build
• The components are not being properly bundled or the dynamic imports are not resolving correctly
• When the route is accessed, it tries to make a request to load the component but fails because the build artifacts don't contain the expected files

Specifications

• Bit version: 1.11.24
• Platform: macos

Context and additional information

This seems to be related to how Bit handles dynamic imports and code splitting during the build process. The component files appear to not be generated or not be accessible at runtime in the production build.
We need to use it to do code splitting so that full application don't need to load at start. In Dev mode its working but on build it need to create code splited files that are missing in build artifact
Request:
Please provide guidance on the correct way to implement lazy loading for Vue components when using Bit.dev, or fix the issue if this is a bug in the build process.

[Jinjiang]

May I know what kind of error message you got there? Or any logs would be helpful. Thanks.

[keinagae]

in my case it tries to send request to back to load AuthorizationView.vue to but backend returns 404 as bit was unable to add it to build artifacts i can share build artifacts as well if you need it

[Jinjiang]

Sorry I couldn't reproduce your issue. Are your app based on a vue env? What's the vue env version? Did you run it as an app (bit run) or a preview (bit start)? What's the error message in your browser console or terminal?