vscode报错Fast refresh only works when a file only exports components怎么处理

报错复现

此种写法是常规的使用observer API的写法，我在写react+vite+mobx-react-lite后台项目的时候，按照这种写法结果给我报错了

import { observer } from 'mobx-react-lite';

const Publish= () => {
  // 组件代码...
};

export default observer(Publish);

报错原因

其原因主要是由React Fast Refresh插件引起的，此报错通常发生在使用React的新的Fast Refresh特性时。

解决措施

1. 改写一下代码结构：将observer函数与export语句分开

import { observer } from 'mobx-react-lite';

const Publish= observer(() => {
  // 组件代码...
})

export default Publish;

2. 禁用Fast Refresh

如果你不需要或无法使用Fast Refresh特性，你可以在项目根目录的jsconfig.json或tsconfig.json文件中禁用Fast Refresh。

{
  "compilerOptions": {
    "plugins": [
      {
        "name": "react-refresh/babel"
      }
    ]
  }
}

这将禁用Fast Refresh插件，从而解决报错问题。

另外

禁用Fast Refresh只是一种绕过报错的方法，但可能会降低开发效率。如果你需要使用Fast Refresh特性，建议按照第一种方法将observer函数与export语句分开，以获得更好的开发体验。