0

I have facing this problem in a react project. I am using rc-upload package for uploading files in react. code is as below:

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
const Upload = require('rc-upload');

class App extends Component {
 constructor(props) {
 super(props);
 this.uploaderProps = {
    action: '/upload/',
    data: { user_id: 1 },
    headers: {
      Authorization: `Bearer abcdef`,
    },
    multiple: false,
    beforeUpload(file) {
      console.log(file);
    },
    onStart: (file) => {
      // console.log('onStart', file.name);
    },
    onSuccess(result) {
      console.log(result);
    },
    onProgress(step, file) {
      console.log('Progress: ', Math.round(step.percent), file.name);
    },
    onError(err) {
      // Show response data with close button in modal body
      console.log('onError', err);
    }
  };
 }
 render() {

  return (
   <div className="App">
    <div className="App-header">
      <img src={logo} className="App-logo" alt="logo" />
      <h2>Welcome to React</h2>
    </div>
    <p className="App-intro">
      To get started, edit <code>src/App.js</code> and save to reload.
    </p>
    <Upload {...this.uploaderProps}>Choose File</Upload>
   </div>
  );
 }
}
export default App;

This code is working in [email protected] and [email protected] and the dev dependencies of react or react-scripts. I created react app through create-react-app few months before. And now I created new app with create-react-app which installed with [email protected] and [email protected].

So when I run the above code in new project than it is showing this error.

React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: object

I figure out that it is coming from below code:

<Upload {...this.uploaderProps}>Choose File</Upload>

And it is working in my previous version of [email protected] but not in [email protected]

How to resolve this error? Is this a version error or any other dependency error?

1 Answer 1

1

Problem is related to how Upload component imported to the project. This might be a bug for the component. Don't know if this is intended or not but you need to import the component like this;

const Upload = require('rc-upload').default;
// or
import Upload from 'rc-upload';
Sign up to request clarification or add additional context in comments.

1 Comment

Yes you are right. It is issue about import and after doing this my issue is resolved. Thanks @Bunyamin

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.