Laravel 10 - TypeError: i18n is not a function

[darkname]

Hi, I'm getting an error with Laravel 10 when I run "npm run dev"

TypeError: i18n is not a function

It appears it's the same issue as in this page: https://github.com/EugeneMeles/laravel-react-i18n/issues/11

https://github.com/EugeneMeles/laravel-react-i18n/commit/01ddcbd5b8824176d2fa43eb6d692503318c8323

Thank You

[daniser]

Please check #125 for a temporary solution until PR is complete.

[nezaboravi]

@daniser this will work only with npm run dev. If you remove type, npm run build will not work

[darkname]

As a temporary solution, in the file vite.config.js, I use it this way

import i18n from 'laravel-vue-i18n/vite';

let ii18n = typeof i18n['default'] !== undefined ? i18n['default'] : i18n;

export default defineConfig({
    plugins: [
        ii18n(),
    ],
});

it works with npm run dev and npm run build

[xiCO2k]

the pr #125 is now merge, let me know if that still happens in the version v2.5.1.

[darkname]

Thank you, it's now working. There is a little issue, but it does not block the functionality. Not sure if it is only me, but when I load or reload a page, for a millisecond on the Chrome Console log it shows this screenshot and then it disappears. The translation works fine.

At line 34, I have return await langs[../../lang/${lang}.json]();

createInertiaApp({
    title: (title) => title ? `${title} - ${appName}` : `${appName}`,
    resolve: (name) => resolvePageComponent(`./Pages/${name}.vue`, import.meta.glob('./Pages/**/*.vue')),
    setup({ el, App, props, plugin }) {
        return createApp({ render: () => h(App, props) })
            .use(plugin)
            .use(i18nVue, {
                resolve: async lang => {
                    const langs = import.meta.glob('../../lang/*.json');
                    return await langs[`../../lang/${lang}.json`]();
                }
            })
            .use(ZiggyVue, Ziggy)
            .component('font-awesome-icon', FontAwesomeIcon)
            .mount(el);
    },
    progress: {
        color: '#4B5563',
    },
});

[xiCO2k]

Thats weird, with vite running or with the vite build?

Thanks.

[daniser]

@darkname Sadly I cannot reproduce this issue. Can you please console.log(langs); just before line 34 and post results here?

[darkname]

In red is the output for $langs. However, I also added console.log(lang), is it normal it also shows "en" for $lang ? Thanks

[daniser]

@darkname Looks like it trying to load nonexistent en.json file. Create empty en.json (or better with curly braces {} content) in your lang folder and try again.

[bornemisza]

@xiCO2k version 2.6.1 using vite the error still appear when using php translation files, so there is no lang/en.json. If I add at least an empty lang/en.json like @daniser suggested, the error disappear. For debug purposes just console logged the lang like @darkname and I just saw that both the en and the php_en got called.

What would be prefered way? A, If using the php files and including the i18n() in the vite.config.js, then not supporting the default lang/en.json type of format? B, Simply compile the php files to lang/{lang}.json instead of lang/php_{lang}.json? (detecting if the file exists, if yes nothing happens just console.error) C, Supporting both of them anyway and just using a workaround like below or other fix the code?

Workaround as quick win:

  .use(i18nVue, {
      resolve: async (lang) => {
          const langs = import.meta.glob("../../lang/*.json");
          if (lang.startsWith("php_")) {
              return await langs[`../../lang/${lang}.json`]();
          } else {
              return await langs[`../../lang/php_${lang}.json`]();
          }
      },
  })

[xiCO2k]

Just reopen, will debug that.

[flespindola]

I just got the same problem when I try to get the shared instance in my script setup

Uncaught (in promise) TypeError: laravel_vue_i18n__WEBPACK_IMPORTED_MODULE_22__.I18n is undefined

import { I18n } from 'laravel-vue-i18n

I18n.getSharedInstance()`

[daniser]

@flespindola Looks like it's separate issue. Can you please open new issue and provide more info, like your Node version and webpack.mix.js contents? Also, do you use "type": "module" in your package.json? If yes, remove it and try again - this feature in pair with Webpack is untested.

[flespindola]

@daniser just did it! #142