[Vue] localizzazione e problemi con "return import" che genera "unexpected token"

[Alhazred]

Sto integrando Vue in un progetto che usa Laravel per il backend.
Trovo problemi volendo gestire più lingue caricandole in modo dinamico, perché caricandole tutte funziona.
Per la localizzazione uso vue-i18n e il problema ce l'ho provando ad impostare quello che è definito come Lazy loading.

Un po' di codice:

// app.js

require('./bootstrap');

window.Vue = require('vue');
import i18n from './i18n-setup'

Vue.component('example-component', require('./components/ExampleComponent.vue'));

let app = new Vue({
    el: '#app',
    i18n
});

// i18n-setup.js

import Vue from 'vue'
import VueI18n from 'vue-i18n'
import messages from './lang'
import axios from 'axios'

Vue.use(VueI18n)

const i18n = new VueI18n({
    locale: 'it', // set locale
    fallbackLocale: 'it',
    messages // set locale messages
})

export default i18n

const loadedLanguages = ['it'] // our default language that is preloaded

function setI18nLanguage (lang) {
    i18n.locale = lang
    axios.defaults.headers.common['Accept-Language'] = lang
    document.querySelector('html').setAttribute('lang', lang)
    return lang
}

export function loadLanguageAsync (lang) {
    if (i18n.locale !== lang) {
        if (!loadedLanguages.includes(lang)) {
            return import(/* webpackChunkName: "lang-[request]" */ `./lang/${lang}`).then(msgs => {
                i18n.setLocaleMessage(lang, msgs.default)
                loadedLanguages.push(lang)
                return setI18nLanguage(lang)
            })
        }
        return Promise.resolve(setI18nLanguage(lang))
    }
    return Promise.resolve(lang)
}

questi 2 file sono nella stessa cartella, la cartella lang si trova allo stesso livello di questi file e dentro ci sono 2 file javascript it.js ed en.js con all'interno le stringhe per le traduzioni.

Il problema sorge sulla riga
return import(/* webpackChunkName: "lang-[request]" */ `./lang/${lang}`).then(msgs => {

precisamente sull'import mi viene detto
Module build failed: SyntaxError: D:/QSync/htdocs/test/resources/assets/js/i18n-setup.js: Unexpected token (28:19)

Ho letto che questo problema deriva da Babel, ma leggendo in giro non trovo la soluzione.

Cosa posso provare a fare?

Vue 2.5.7
npm 5.6.0
i18n 8.3.1

[M4V1]

Premetto che è da poco che mi sono affacciato al frontend, quindi prendi tutto con le molle.

Quello che stai provando a fare è un import dinamico che babel di default non supporta.
Dovresti caricare tutto in fase di build, in quel modo infatti mi sembra di capire che funzioni correttamente.

Per abilitare l'import dinamico c'è un plugin per babel che è questo:

https://www.npmjs.com/package/@babel...dynamic-import

Non l'ho mai usato, ma credo basti installarlo per far funzionare il tuo codice, fai un tentativo e vediamo.

[Alhazred]

Alla fine ho risolto dividendo backend e frontend, ho lasciato perdere l'integrazione offerta nativamente da Laravel e tutto funziona.
Laravel-mix non supporta ES6 richiesto per la nuova versione di Babel, la sintassi corretta ora sarebbe
return () => import ...
ma appunto questa è sintassi ES6 non supportata da Laravel-mix, mentre
return import ...
era sintassi ES5 supportata da Laravel-mix, ma non più utilizzabile con Babel
quindi era un cane che si mordeva la coda.