使用Vite+React导入TILT报错：模块无default导出

问题原因 #

react-tilt从新版本开始改为命名导出，不再提供默认导出，所以用import Tilt from 'react-tilt'这种默认导入方式会触发报错。

解决步骤 #

1. 修正导入方式
   把默认导入改成命名导入：

   import { Tilt } from 'react-tilt'
   

2. 清除Vite缓存（可选但建议）
   有时候Vite的缓存会导致模块解析异常，执行以下操作：

   • 删除项目根目录下的node_modules/.vite文件夹
   • 重启开发服务器：npm run dev

正确使用示例 #

import { Tilt } from 'react-tilt';

function MyComponent() {
  return (
    <Tilt 
      options={{ max: 30, glare: true, 'max-glare': 0.3 }} 
      style={{ height: 300, width: 300, borderRadius: '8px' }}
    >
      <div style={{ 
        width: '100%', 
        height: '100%', 
        backgroundColor: '#2196F3',
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        color: 'white',
        fontSize: '20px'
      }}>
        带倾斜效果的容器
      </div>
    </Tilt>
  );
}

export default MyComponent;

内容的提问来源于stack exchange，提问作者abdur rafay