反應錯誤：元素類型無效：期望使用字符串（對於內置組件）或類/函數（對於復合組件），但得到：對象

Question

我從React得到以下錯誤，我的頁面無法加載： Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.

當我在React組件頂部使用import聲明時，例如import React from "react" 。

根據關於堆棧溢出的這個問題，答案是將module.exports = ComponentName更改為export default ComponentName ，但是在我的情況下，這兩段代碼都拋出相同的錯誤。

有人可以幫助我找出導致錯誤的原因嗎？

Register.jsx

import React from "react";

const Register = () => {
  return (
    <div>registration page</div>
  )
}
export default Register

webpack.js

const path = require('path');

module.exports = {
  mode: 'production',
  context: path.join(__dirname, './'),
  entry: './app/app.jsx',
  output: {
    path: path.join(__dirname, 'public'),
    filename: 'bundle.js',
  },
  resolve: {
    extensions: ['.js', '.jsx'],
  },
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        // loader: 'jsx-loader',
        use: {
          loader: 'babel-loader',
        },
        exclude: /node_modules/,
        include: path.join(__dirname, 'app'),
      },
    ],
  },
};

.babelrc

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

Answer 1

您可能導入不正確。 由於您是默認導出，因此請從以下位置更改導入：

import { Register } from '<some_path>/Register';

至：

import Register from '<some_path>/Register';

或CommonJS樣式：

const Register = require('<some_path>/Register');

至

const Register = require('<some_path>/Register').default;