#vite build error

1 messages · Page 1 of 1 (latest)

mild tapir
#

You shouldn't use require, instead use import/export

honest viper
#

Hi, @mild tapir

import { createApp, h } from "vue";
import { createInertiaApp, Link, Head } from '@inertiajs/vue3';
import { resolvePageComponent } from 'laravel-vite-plugin/inertia-helpers';
import Layout from "./Shared/Backendlayout.vue";

createInertiaApp({
    resolve: async name => {
        //let page = (await import(`./Pages/${name}`)).default;
        const page = await resolvePageComponent(`./Pages/${name}.vue`, import.meta.glob('./Pages/**/*.vue'));

        if (page.default.layout === undefined) {
            page.default.layout = Layout;
        }

        return page;
    },
    setup({ el, App, props, plugin}) {
        createApp({ render: () => h(App, props) })
            .use(plugin)
            .component("Link", Link)
            .component("Head", Head)
            .mixin({ methods: { route } })
            .mixin(require('./base.js')) <-- Could you show me as an example how to do this part? I've tried many things but couldn't do it.
            
            .mount(el);
    },
    progress: {
        color: '#5671f0',
    }

});
#

Could you show me as an example how to do this part? I've tried many things but couldn't do it.

mild tapir
#

You need to import the file, take a look at how imports and exports work in ESM

honest viper
#

Where can I find this information? I don't know what ESM is. Is there a source?

mild tapir
honest viper
# 
import {usePage} from '@inertiajs/vue3'

export const __ = (key, replace = {}) => {
    let translation = usePage().props.language[key]
        ? usePage().props.language[key]
        : key

    Object.keys(replace).forEach(function (key) {
        translation = translation.replace(':' + key, replace[key])
    });

    return translation
}

I've reorganized the file in this way. Will it work if I import it like this?

import { createApp, h } from "vue";
import { createInertiaApp, Link, Head } from '@inertiajs/vue3';
import { resolvePageComponent } from 'laravel-vite-plugin/inertia-helpers';
import Layout from "./Shared/Backendlayout.vue";
import __ from "./basee.js"

createInertiaApp({
    resolve: async name => {
        //let page = (await import(`./Pages/${name}`)).default;
        const page = await resolvePageComponent(`./Pages/${name}.vue`, import.meta.glob('./Pages/**/*.vue'));

        if (page.default.layout === undefined) {
            page.default.layout = Layout;
        }

        return page;
    },
    setup({ el, App, props, plugin}) {
        createApp({ render: () => h(App, props) })
            .use(plugin)
            .component("Link", Link)
            .component("Head", Head)
            .mixin({ methods: { route } })
           //.mixin(require('./base.js'))
            .mount(el);
    },
    progress: {
        color: '#5671f0',
    }
});
#

new error: TypeError: c.__ is not a function

mild tapir
#

You'd still need to register that method as a mixin if you want to use it as mixin. Could be just .mixin({ methods: { route, __ } })

honest viper
#

new error : error during build:
RollupError: "default" is not exported by "resources/js/basee.js", imported by "resources/js/app.js".

mild tapir
#

Yeah, you have a named export, not a default export

honest viper
#

what is default export.

mild tapir
#

Maybe try searching a bit. I'm not spoonfeeding on purpose, but instead giving you the information needed to solve your issue, that way you'll research and learn more than just copy-pasting.

honest viper
#

I never copy and paste. I don't have English, I learn by trying to see how it works.

#

I think what you mean is this.

import {usePage} from '@inertiajs/vue3'

export const transLanguage = (key, replace = {}) => {
    let translation = usePage().props.language[key]
        ? usePage().props.language[key]
        : key

    Object.keys(replace).forEach(function (key) {
        translation = translation.replace(':' + key, replace[key])
    });

    return translation
}

export default function __() {
    return transLanguage;
}
mild tapir
#

Your first example was alright, you just need to use the named import, like import { __ } from '...'

honest viper
#

What is the difference between calling 'import __ from 'base.js';' and 'import { __ } from 'base.js';'? What do the curly braces do?

mild tapir
#

The first one references a default export (the __ is kinda irrelevant there, you can name it however you want). With the curly braces you reference a named export

honest viper
#

It seems that when using curly braces, we specify the name of a variable or method within the file to only import what we have specified. Am I correct?

mild tapir
#

Not really, you use the name with which it's exported. If you do export const __ = ... then yes, __ would be the name of that export

honest viper
#

I tried, if there is no export default, it imports the whole file to that name. If we use curly braces and specify the name of a variable, this time it only imports that variable.

mild tapir