MacOS 13下React组件导入报错求助，Windows可正常运行

问题现象 #

在MacOS 13（Node.js 20.6.1）环境中，React项目里从component目录导入demo/hero组件时出现未使用提示及渲染异常，但相同代码在Windows（Node.js 18.16.1）可正常运行。

相关代码 #

component/hero.jsx #

const hero = () => {
  return (
    <p>hero</p>
  )
}
export default hero

component/demo.jsx #

const demo = () => {
  return (
    <div>demo</div>
  )
}
export default demo

App.jsx #

// 报错提示：
// 'demo' is declared but its value is never read.ts(6133)
// 'demo' is defined but never used.eslintno-unused-vars

import demo from './component/demo' 
import hero from './component/hero'

import './App.css'

const App = () => {
  return (
  <demo />
  )
}
export default App

问题截图 #

问题原因 #

1. React组件命名规范冲突：React要求自定义组件名必须以大写字母开头，小写开头的标签会被识别为原生HTML标签，而非你导入的自定义组件。因此<demo />不会触发组件渲染，ESLint/TypeScript会判定demo变量未被使用。
2. 工具链严格度差异：Node.js 20搭配的ESLint、TypeScript等工具链默认启用了更严格的校验规则，而Node.js 18的工具链未触发该校验，导致跨系统表现不一致。

解决方案 #

1. 修正组件命名及渲染代码（推荐） #

按照React规范调整组件名，确保自定义组件以大写开头：

• 修改component/demo.jsx：

  const Demo = () => {
    return (
      <div>demo</div>
    )
  }
  export default Demo
  

• 修改component/hero.jsx（若后续需要使用）：

  const Hero = () => {
    return (
      <p>hero</p>
    )
  }
  export default Hero
  

• 更新App.jsx的导入和渲染逻辑，同时移除未使用的hero导入：

  import Demo from './component/demo' 
  // 若不需要Hero组件则删除该行，否则保留并使用<Hero />
  // import Hero from './component/hero'
  
  import './App.css'
  
  const App = () => {
    return (
      <Demo />
    )
  }
  export default App
  

2. 临时调整校验规则（不推荐） #

若不想修改组件命名，可在.eslintrc或tsconfig.json中关闭未使用变量的检查，但这会破坏React组件规范，可能引发其他问题：

• 在.eslintrc中添加：

  "rules": {
    "no-unused-vars": "off",
    "@typescript-eslint/no-unused-vars": "off"
  }
  

内容的提问来源于stack exchange，提问作者Subhadip Dutta