Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Webpack import, default.a is not a constructor

I know this problem already has already been resolved in other threads but none of the provided solutions works for me. I'm trying to import classes from another project to a new react-create-app project, but some imports broke with a

TypeError: react__WEBPACK_IMPORTED_MODULE_0___default.a is not a constructor

Here's one of the problematic classes :

import React from 'react';
import Component from 'react';
import PropTypes from 'prop-types';
import shallowCompare from 'react-addons-shallow-compare';

class Pdf extends Component {
  constructor(props) {
    super(props);
    this.handlesOnTrashClick = this.handlesOnTrashClick.bind(this);
  }

  shouldComponentUpdate(nextProps, nextState) {
    return shallowCompare(this, nextProps, nextState);
  }

  render() {
    const {name, size} = this.props;
    return (
      <li style={{cursor:'pointer'}}>
        <span className="mailbox-attachment-icon">
          <i className="fa fa-file-pdf-o"></i>
        </span>
        <div className="mailbox-attachment-info">
          <span
            className="mailbox-attachment-name">
            {name}
          </span>
          <span className="mailbox-attachment-size">
            {size}
            <button
              className="btn btn-default btn-xs pull-right"
              onClick={this.handlesOnTrashClick}>
              <i className="fa fa-trash-o"></i>
            </button>
          </span>
        </div>
      </li>
    );
  }

  handlesOnTrashClick(evt) {
    evt.preventDefault();
    const { onTrashClick, name } = this.props;
    onTrashClick(name);
  }
}

Pdf.propTypes = {
  name: PropTypes.string.isRequired,
  filePath: PropTypes.string,
  size: PropTypes.any.isRequired,
  onTrashClick: PropTypes.func
};

Pdf.defaultProps = {
  filePath: ''
};

export default Pdf;

the import :

import React, { Component } from 'react'; //working
import PropTypes from 'prop-types'; //working
import { appConfig } from '../../../config'; //working

import Pdf from './pdf/Pdf'; //not working

Any ideas are welcome, thanks.

like image 420
Nil Avatar asked Dec 31 '22 17:12

Nil


1 Answers

Problem is here,

import Component from 'react';

You should import Component like,

import { Component } from 'react';
like image 168
ravibagul91 Avatar answered Jan 03 '23 07:01

ravibagul91