时间戳

首页 > 解决方案 > 反应错误：元素类型无效：期望字符串（对于内置组件）或类/函数（对于复合组件）但得到：对象

reactjs - 反应错误：元素类型无效：期望字符串（对于内置组件）或类/函数（对于复合组件）但得到：对象

问题描述

我从 React 收到以下错误，并且我的页面没有加载：Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.

当我import在 React 组件顶部使用声明时会发生这种情况，例如import React from "react".

根据 Stack Overflow 上的这个问题，答案是更改module.exports = ComponentName为export default ComponentName，但在我的情况下，两段代码都会抛出相同的错误。

有人可以帮我找出导致错误的原因吗？

注册.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"]
}

标签： reactjswebpackreact-routerbabeljs

解决方案

您可能导入不正确。由于您默认导出，因此将导入更改为：

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;

推荐阅读