Use export default instead of module.exports =. It should fix your issue.
May 25, 2021
3
Level 4
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?
Level 28
Please or to participate in this conversation.