前端问题求助，无法导出组件

afadawd

下列代码，显示报错信息Attempted import error: 'Counter' is not exported from './obex.js'.，说我没有导出Counter，可我已经导了，是因为observer包裹的有特定的导出方式还是我语法写错了？
import { observer } from "mobx-react-lite";
import React from "react";
function Counter({ counterStore }) {
    return (
      <div>
        <p className="paragraph">{counterStore.count}</p>
        <button onClick={() => counterStore.increment()} className="button">加 1</button>
        <button onClick={() => counterStore.reset()} className="button">重置</button>
      </div>
    )
  }
  
  export default observer(Counter)

afadawd

额，发现问题了，是外面用花括号import不行，有没有大佬解释一下加不加花括号的区别啊

FishC

看起来你已经正确导出了 `Counter` 组件，并使用 `mobx-react-lite` 的 `observer` 函数进行了包裹。报错信息提示可能与你组件的导入或者导出方式不一致导致的。需要检查以下几点：

1. **确保导入路径正确**：检查你导入 `Counter` 的路径是否为 `./obex.js`，是否与文件名一致。此外，确认文件名和路径区分大小写。

2. **组件导入语法**：确保在使用 `Counter` 的地方是这样导入的：

import Counter from './obex';

3. **导出格式检查**：看你的代码中是使用了默认导出 `export default observer(Counter)`，那么在导入时应不使用花括号。

4. **检查包安装和版本**：确认 `mobx-react-lite` 已经正确安装，并且版本兼容。

5. **React 语法纠错**：在组件内的 JSX 需要用花括号包裹 JavaScript 表达式，例如 `onClick` 的使用方式应如下：

return (
       <div>
           <p>{counterStore.count}</p>
           <button onClick={() => counterStore.increment()} className="button">加 1</button>
           <button onClick={() => counterStore.reset()} className="button">重置</button>
       </div>
   );

尝试按照以上建议进行检查和修改，看看是否能解决问题。

以上回复来自 FishC AI 小助理，如未能正确解答您的问题，请继续追问。