はじめに

Reactのアプリを開発している時に以下の様なエラーを吐いてコンパイルできなくなってしまったので、その解決法を記しておきます

エラー内容

Dependency cycle detected ...

このエラーを調べてみるとimportし続けてしまう連鎖が起きているらしい

エラーの解説

1.chatDataSlice.tsからRootStateをimportする
2.reduxType.tsからstoreをimportする
3.store.tsからchatDataReducerをimportする

この一連の流れがループしていることでエラーが発生している

chatDataSlice.ts

/* packages */
import { createSlice, PayloadAction } from "@reduxjs/toolkit";
/* hooks */
import { useAppSelector } from "../../hooks/useAppselector";
/* types */
import { chatData } from "../../types/chatData";
import { RootState } from "../types/reduxType";

const initialState: chatData[] = [];

export const chatDataSlice = createSlice({
  name: "chatData",
  initialState,
  reducers: {
    setChatData: (state, action: PayloadAction<chatData[]>) => action.payload,
  },
});

// reducer
export const chatDataReducer = chatDataSlice.reducer;

// action
export const { setChatData } = chatDataSlice.actions;

// selector
export const useChatDataSelector = () => {
  const chatDataSelector = useAppSelector((state: RootState) => state.chatData);
  return chatDataSelector;
};

reduxType.ts

/* store */
import { store } from "../store";

export type RootState = ReturnType<typeof store.getState>;

export type AppDispatch = typeof store.dispatch;

store.ts

/* packages */
import { configureStore } from "@reduxjs/toolkit";
/* slice */
import { chatDataReducer } from "./slices/chatDataSlice";

export const store = configureStore({
  reducer: {
    chatData: chatDataReducer,
  },
});

原因

importしたファイルはmoduleではないかとコンパイラ側は認識してしまっているから無限import編が始まっている

解決策

importの後ろにtypeを明記することでエラーは無くなった
明記することでmoduleではなくtypeだと認識し、依存関係から除外されているのでは??

chatDataSlice.ts

import type {RootState} from "../types/reduxType";

参考