javascript - 不变违规 : Element type is invalid: expected a string (built-in components) or a class/function (composite components) but got: object

Question

我在这里看到很多关于 import/export 的问题，但我不明白我的问题是什么，所以我发布了我的问题。

这是我实践项目的完整配置和代码:(简化)

// 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']
      }
    ]
  }
}

奇怪的是，如果我不使用 <Youtube />组件，不会发生错误。这就是为什么我认为我的设置没有问题。但是它会报错，所以会有问题。

好像是我的Babel或者Webpack设置的问题，但是不知道是哪里出了问题。有人可以帮助我吗？

Answer 1

因为 react-youtube 使用 export default YouTube; 来导出它的组件。所以如果你想使用require导入react-youtube，你需要使用require('react-youtube').default

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

export default 将被编译成如下所示

// 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