動的インポートを使用して、プロジェクト内のすべてのロケールのチャンクを作成しています。チャンクは作成されますが、クライアントは実行時に次のエラーを報告します。
Uncaught (in promise) ReferenceError: locale is not defined
at _callee$ (main.js?f161:72)
at tryCatch (runtime.js?98b8:62)
at Generator.invoke [as _invoke] (runtime.js?98b8:288)
at Generator.prototype.(:8082/d2/v2/search/anonymous function) [as next] (webpack-internal:///./node_modules/@babel/runtime/node_modules/regenerator-runtime/runtime.js:114:21)
at asyncGeneratorStep (asyncToGenerator.js?c973:3)
at _next (asyncToGenerator.js?c973:25)
問題のコード:
// main.js
import { locale } from './config';
(async () => {
const formatter = new Formatter({ locale });
const i18n = new VueI18n({
locale,
formatter,
});
// Prints "en-GB", for example, so it's *not* undefined
console.log(locale);
const messages = await import(
/* webpackChunkName: "[request]" */
`./locales/${locale}/translations.js`, // <= Error
);
i18n.setLocaleMessage(locale, messages);
new Vue({
el: '#app',
router,
i18n,
render: h => h(App),
});
})();
バベル構成:
"babel": {
"presets": [
"@babel/preset-env"
],
"plugins": [
[
"@babel/plugin-proposal-object-rest-spread",
{
"useBuiltIns": true
}
],
"@babel/plugin-transform-runtime",
"@babel/plugin-transform-async-to-generator",
"@babel/plugin-syntax-dynamic-import"
]
},
ロケールは次のようにエクスポートされます。
// config.js
export const locale = process.env.LOCALE; // e.g. "en-GB"
インポート パスを のような静的なものに変更する./locales/en-GB/translations.js
と機能します。
編集
locale
これは、次のように中間変数に再割り当てしたときに機能し始めました。
(async () => {
// ...
const tempLocale = locale;
// Passing `locale` here won't work, but `tempLocale` does...
const messages = await import(
/* webpackChunkName: "[request]" */
`./locales/${tempLocale}/translations.js`,
);
// `locale` is accepted just fine here, for some reason
i18n.setLocaleMessage(locale, messages);
// ...
})();
またlocale
、デバッガーで変数を調べると、IIFE の外側では実際の文字列 ("en-GB") に解決されますが、内部locale
では変数が含まれるモジュールに解決されることに気付きました。非常に紛らわしく、この解決策はハッキリしすぎて受け入れられません。