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-pare';

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 wele, thanks.

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-pare';

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 wele, thanks.

• javascript
• webpack
• nodes

• How are you importing it? – Clarity Commented Aug 16, 2019 at 9:27
• Sorry i forgot the import part, added now. It's a classical "Import from". – Nil Commented Aug 16, 2019 at 9:32

2 Answers 2

Problem is here,

import Component from 'react';

You should import Component like,

import { Component } from 'react';

For me the issue appeared after upgrading to React 18 and the cause was creating a ponent instance with the new keyword to pass to useState (which worked perfect until React 18).

I fixed it by changing this

const [myComponent] = useState(new myComponent());

to this

const [myComponent] = useState(myComponent);