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

不变违规：元素类型无效：预期为字符串（内置组件）或类/函数（复合组件），但得到：对象

1 个答案: