Invariant Violation: Element type is invalid: expected a string (built-in components) or a class/function (composite components) but got: object

Question

I've seen many questions here regarding to import/export, but I don't get the what is my problem so I post my question.

This is full configuration and codes of my practice projects:(simplified)

// App.jsx
const React = require('react')
const Player = require('./Player.jsx')

class App extends React.Component {
  constructor(props) {
    super(props)
  }

  componentDidMount() {

  }

  render() {
    return (
      <div>
        <Player
              videoId={"eE-APRkDBO0"} />
      </div>
    )
  }
}

module.exports = App

// Player.jsx
const React = require('react')
const Youtube = require('react-youtube')

const opts = {
  width: 800,
  height: 480
}

const Player = (props) => {
  return (
    <div>
      <Youtube
        videoId={props.videoId}
        opts={opts} />
    </div>
  )
}

module.exports = Player

//.babelrc
{
  "presets": ["@babel/preset-react", "@babel/preset-env"]
}

//webpack.config.js
const path = require('path')

module.exports = {
  entry: ["core-js/stable", "regenerator-runtime/runtime", "./src/jsx/index.jsx"],
  output: {
    filename: "bundle.js",
    path: path.resolve(`${__dirname}/public/scripts`)
  },
  mode: "development",
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: "/node_modules",
        use: ['babel-loader']
      }
    ]
  }
}

Strange thing is that, if I don't use the <Youtube /> component, no error occurs. That is why I thought there is no problem with my settings. But it makes the error, so there will be a problem.

It seems it is the problem of my Babel or Webpack settings, but I don't know what is wrong. Could someone help me?

Can you add the error stack? – Aman Gupta Aug 07 '19 at 06:19 — Aman Gupta, Aug 07 '19 at 06:19

score 2 · Accepted Answer · answered Aug 07 '19 at 06:33

Because react-youtube use export default YouTube; to export its component. So if you want to use require to import react-youtube, you need to use require('react-youtube').default

const Youtube = require('react-youtube').default;

export default will be compiled to something like below

// input
export const foo = 42;
export default 21;

// output
"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
var foo = exports.foo = 42;
exports.default = 21;

module.exports vs. export default in Node.js and ES6

You are right! Thank you. I learned how to figure out this kind of error when using libraries — cadenzah, Aug 07 '19 at 07:37

Invariant Violation: Element type is invalid: expected a string (built-in components) or a class/function (composite components) but got: object

1 Answers1