Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

Crazylife's avatar

Error when trying to implement laravel translation into vuejs file

I am encountering an issue when trying to implement laravel translation into vuejs

app.js:417882 Uncaught Error: ES Modules may not assign module.exports or exports.*, Use ESM export syntax, instead: ./resources/app/translation.js
    at Object.set [as exports] (app.js:417882)
    at Module../resources/app/translation.js (app.js:191861)
    at __webpack_require__ (app.js:417794)
    at Module../resources/app/app.js (app.js:190194)
    at __webpack_require__ (app.js:417794)
    at app.js:417971
    at Function.__webpack_require__.O (app.js:417831)
    at app.js:417973
    at app.js:417975

My app.js

import { createApp } from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";
import globalComponents from "./global-components";
import utils from "./utils";
import "./libs";

// SASS Theme
import "./assets/sass/app.scss";

const app = createApp(App)
  .use(store)
  .use(router);

globalComponents(app);
utils(app);

app.mount("#app");

createApp(App).mixin(require('./translation'))

translation.js

module.exports = {
    methods: {
        /**
         * Translate the given key.
         */
        __(key, replace) {
            let translation, translationNotFound = true

            try {
                translation = key.split('.').reduce((t, i) => t[i] || null, window._translations[window._locale].php)

                if (translation) {
                    translationNotFound = false
                }
            } catch (e) {
                translation = key
            }

            if (translationNotFound) {
                translation = window._translations[window._locale]['json'][key]
                    ? window._translations[window._locale]['json'][key]
                    : key
            }

            _.forEach(replace, (value, key) => {
                translation = translation.replace(':' + key, value)
            })

            return translation
        }
    },
}

I am following the step here to implement laravel translation.

https://dev.to/4unkur/how-to-use-laravel-translations-in-js-vue-files-ia

Am i doing it wrongly? Or what did i missing out here?

0 likes
3 replies
piljac1's avatar
piljac1
Best Answer
Level 28

Use export default instead of module.exports =. It should fix your issue.

Crazylife's avatar

Yes, i fixed it with that way. But i am having another issue after that on the translation part. When i am calling this __('I am something') will return {'i_am_something': 'I am something'} instead of I am something. I am trying to translate my key.

Crazylife's avatar

Oops, it should be fine now. Just my mistake on key. Thank you!

Please or to participate in this conversation.