4

動的インポートを使用して、プロジェクト内のすべてのロケールのチャンクを作成しています。チャンクは作成されますが、クライアントは実行時に次のエラーを報告します。

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では変数が含まれるモジュールに解決されることに気付きました。非常に紛らわしく、この解決策はハッキリしすぎて受け入れられません。

4

0 に答える 0