0

I've looked at the resolutions for similar problems here, but they all appear to deal with pre-existing modules. This is happening to a React Component I wrote myself, and I'm not sure how to get around it.

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

export default FileUploadForm = () => {
    const { register, handleSubmit, /* errors */ } = 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 ref={register} type="file" name="image" />
            <button>Submit</button>
        </form>
    )
}

Typescript is identifying a problem with the declaration of FileUploadForm on line 5, giving me the error I specified in the title. Although, I'm uncertain if it's to do with Typescript. I'm also getting the following compiler error:

enter image description here

My project structure is as follows: enter image description here enter image description here

My package.json is as follows:

{
  "name": "file-uploader-frontend",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.11.4",
    "@testing-library/react": "^11.1.0",
    "@testing-library/user-event": "^12.1.10",
    "@types/axios": "^0.14.0",
    "axios": "^0.21.1",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-hook-form": "^7.13.0",
    "react-scripts": "4.0.3",
    "typescript": "^4.3.5",
    "web-vitals": "^1.0.1"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "@types/node": "^16.7.2"
  }
}

Currently, this is the state of the compiled FileUploadForm.jsx. The component is being imported into App.js as a named import:

"use strict";
exports.__esModule = true;
exports.FileUploadForm = void 0;
var react_1 = require("react");
var react_hook_form_1 = require("react-hook-form");
var axios_1 = require("axios");
var FileUploadForm = function () {
    var _a = react_hook_form_1.useForm(), register = _a.register, handleSubmit = _a.handleSubmit;
    var onSubmit = function (data) {
        console.log(data);
        var formData = new FormData();
        formData.append("image", data);
        axios_1["default"].post('http://localhost:3000', formData);
    };
    return (<form onSubmit={handleSubmit(onSubmit)}>
            <input required ref={register} type="file" name="image"/>
            <button>Submit</button>
        </form>);
};
exports.FileUploadForm = FileUploadForm;

I'm sure there are several other problems with my code, but I can't even begin to explore them if I can't get past this problem so I can get the page to render. I've attempted this as both a named export and a default export. The result is the same. I'm at a loss for what to do next. Any help would be appreciated.

Pleasant Nightmares
  • 179
  • 3
  • 12
  • Why not share the project structure. – Chuck Aug 26 '21 at 20:35
  • Meaning my folder structure? Apologies for my ignorance, I'm still a relatively green developer. – Pleasant Nightmares Aug 26 '21 at 20:44
  • you are exporting it wrongly . change your code as `const FileUploadForm` and at the bottom of the file add `export default FileUploadForm` . Explanation - https://stackoverflow.com/questions/34676984/cannot-export-const-arrow-function – Shyam Aug 26 '21 at 20:49
  • Well, there are a lot of `FileUploadForm`, I think you should take a look at `FileUploadForm.jsx` file and check the export part. – Chuck Aug 26 '21 at 20:55
  • I've updated my post to show the current state of the compiled FileUploadForm.jsx. – Pleasant Nightmares Aug 26 '21 at 21:14
  • @Shaym Actually, that's how I was originally doing it. What you're looking at is the result of me trying to fix it. I was having the same problem then. – Pleasant Nightmares Aug 26 '21 at 21:26

1 Answers1

0

Seems like the problem is related to the export format of your jsx file.

exports.FileUploadForm = FileUploadForm;

In that case, you need to import it as follow.

import {FileUploadForm} from '...path'

But I would like to say use export default

export default FileUploadForm;
import FileUploadForm from '...path'
Chuck
  • 776
  • 5
  • 18
  • Yeah, I noticed that as you told me to take a loot at the export in FileUploadForm.jsx. I fixed that to export it as a named export, and I'm still getting the same result. – Pleasant Nightmares Aug 26 '21 at 21:28