Warning: Fast refresh only works when a file only exports components. Use a new file to share constants or functions between components.の解決方法

投稿の経緯

useReducerとuseContextを用いてstateの管理を行うとした際、
タイトルの警告文が表示され解決方法に躓いたので備忘録として投稿します。

結論

コンポーネントと関数の両方を同じファイルからエクスポートしようとすると警告文が表示されます。
なので、コンポーネントと関数は別ファイルで定義してエクスポートしてください。

解決方法

エラーコード

contexts/index.jsx

import { createContext, useReducer, useContext } from "react";
import propTypes from "prop-types";

export const CounterContext = createContext();
export const CounterDispatchContext = createContext();
/**
 * stateの初期値
 */
const initialState = 0;
/**
 * state更新用関数
 * @param {number} state
 * @param {{type: String, payload: Number}} action
 * @returns {number} 次のstate
 */
const reducer = (state = 0, action) => {
  switch (action.type) {
    case "ADD":
      return state + 1;
    case "MINUS":
      return state - 1;
    default:
      throw new Error("エラーです。");
  }
};
export const CounterProvider = ({ children }) => {
  const [count, dispatch] = useReducer(reducer, initialState);
  console.log(count);

  return (
    <CounterContext.Provider value={count}>
      <CounterDispatchContext.Provider value={dispatch}>
        {children}
      </CounterDispatchContext.Provider>
    </CounterContext.Provider>
  );
};
CounterProvider.propTypes = {
  children: propTypes.node.isRequired,
};

:::note alert
Fast refresh only works when a file only exports components. Use a new file to share constants or functions between
:::

// 警告文の発生原因
-export const useCounterContext = () => {
-  return useContext(CounterContext);
-};
-export const useCounterDispatchContext = () => {
-  return useContext(CounterDispatchContext);
-};

解消後

contexts/index.jsx

import { createContext, useReducer } from "react";
import propTypes from "prop-types";

export const CounterContext = createContext();
export const CounterDispatchContext = createContext();
/**
 * stateの初期値
 */
const initialState = 0;
/**
 * state更新用関数
 * @param {number} state
 * @param {{type: String, payload: Number}} action
 * @returns {number} 次のstate
 */
const reducer = (state = 0, action) => {
  switch (action.type) {
    case "ADD":
      return state + 1;
    case "MINUS":
      return state - 1;
    default:
      throw new Error("エラーです。");
  }
};
export const CounterProvider = ({ children }) => {
  const [count, dispatch] = useReducer(reducer, initialState);
  console.log(count);

  return (
    <CounterContext.Provider value={count}>
      <CounterDispatchContext.Provider value={dispatch}>
        {children}
      </CounterDispatchContext.Provider>
    </CounterContext.Provider>
  );
};
CounterProvider.propTypes = {
  children: propTypes.node.isRequired,
};

contexts/useContext.jsx

import { useContext } from "react";
import { CounterContext, CounterDispatchContext } from ".";
export const useCounterContext = () => {
  return useContext(CounterContext);
};
export const useCounterDispatchContext = () => {
  return useContext(CounterDispatchContext);
};

上記のように、コンポーネントと関数を別ファイルに分けてexportすると警告文は解消されます。

参考URL

さいごに

エラー解決には、やはり時間がかかる。
検索能力と英語読解力が必要だと実感しているこの頃。

私のコードに改善点等があれば、コメントいただけると嬉しいです。