如何解决自定义React组件出现的Typescript错误“Cannot find name 'module'”

解决方案 #

1. 修正组件声明与导出导入的匹配问题

你当前的组件声明语法不规范，FileUploadForm变量未提前声明就直接赋值导出，同时存在导出方式和导入方式不匹配的问题，按照以下两种方案二选一调整即可：

方案A：使用默认导出

组件文件写法：

import React from 'react';
import { useForm } from "react-hook-form"
import axios from 'axios'

const FileUploadForm = () => {
    const { register, handleSubmit } = useForm()

    const onSubmit = (data: string | Blob) => {
        console.log(data)
        const formData = new FormData();
        formData.append("image", data)
        axios.post('http://localhost:3000', formData)
    }

    return (
        <form onSubmit={handleSubmit(onSubmit)}>
            <input required {...register("image")} type="file" name="image" />
            <button>Submit</button>
        </form>
    )
}

export default FileUploadForm

App.js导入写法：

// 不要加大括号
import FileUploadForm from './你的组件所在路径/FileUploadForm'

方案B：使用命名导出

组件文件写法：

import React from 'react';
import { useForm } from "react-hook-form"
import axios from 'axios'

// 声明组件时直接添加export关键字
export const FileUploadForm = () => {
    const { register, handleSubmit } = useForm()

    const onSubmit = (data: string | Blob) => {
        console.log(data)
        const formData = new FormData();
        formData.append("image", data)
        axios.post('http://localhost:3000', formData)
    }

    return (
        <form onSubmit={handleSubmit(onSubmit)}>
            <input required {...register("image")} type="file" name="image" />
            <button>Submit</button>
        </form>
    )
}

App.js导入写法：

// 加大括号匹配命名导出
import { FileUploadForm } from './你的组件所在路径/FileUploadForm'

2. 修正react-hook-form API调用错误

你使用的是7.x版本的react-hook-form，该版本已经废弃了ref={register}的绑定方式，必须使用{...register('字段名')}的展开写法才能正常绑定表单字段。

3. 确认文件后缀

如果组件内使用了TypeScript语法，请将组件文件后缀修改为.tsx，避免编译异常。

内容的提问来源于stack exchange，提问作者Pleasant Nightmares