router ⇒ view ⇒ router の循環依存に対する対処法

[KentaHizume]

問題

import/no-cycle

View.vue      ──►  import { router } from '@/router'
router/index   ──►  import View from '@/views/View.vue'

次のような実装はESLintによって警告されるが、動作する。

• この文章の作成中に急にESLintの警告が出力されなくなり迷宮入り

  • 実際には警告が擬陽性であるという結論なので問題はないのだが…

• View内でrouterをimport

import { router } from '@/router';

しかし実際には、下記のようにViewのimportはlazy loadingされているので、
（1）view は定義時点でrouterを静的にローディングし、viewが評価される（固まる）
（2）routerは定義時点で view のモジュール本体を読み込まず、後からViewを読み込む
という順序で処理されるので、実行時の依存関係は一方向になり、問題なく動作する。

export const catalogRoutes: RouteRecordRaw[] = [
  {
    path: '/',
    name: 'catalog',
    component: () => import('@/views/catalog/CatalogView.vue'),
    meta: { requiresAuth: false },
  },
];

inject() can only be used inside setup() or functional components.

一方で次のような実装はVueによって実行時に警告が出力され、動作しない。

unauthorizedErrorEventBus.on(() => {
  const routingStore = useRoutingStore();
  const router = useRouter();
  routingStore.setRedirectFrom(router.currentRoute.value.path.slice(1));
  router.push({ name: 'authentication/login' });
});

[Vue warn]: inject() can only be used inside setup() or functional components.

このケースにおいては、上記のようにrouterを直接importする必要がある

• このとき import/no-cycle が出力されてしまうので、同時に2つの問題を解決しなければならないということが背景

[KentaHizume]

対処法

import/no-cycle に対してオプションallowUnsafeDynamicCyclicDependencyを設定する

• このオプションを設定した場合、importのチェーンに動的インポートが含まれる場合は警告しないようになる

• ただし、できれば使わないほうがよい

• https://github.com/antfu/eslint-plugin-import-x/blob/master/docs/rules/no-cycle.md#allowunsafedynamiccyclicdependency

• Allow cyclic dependencies for import/no-cycle iff mixing static/dynamic imports import-js/eslint-plugin-import#2265

暫定

• 動的importされているのでルールを無効化します、のコメントを付記して都度無効化の行を入れるほうがよさそう。