React 元素类型无效，但导入显示正确答案

【问题标题】：React element type is invalid, but imports appear correctReact 元素类型无效，但导入显示正确
【发布时间】：2022-11-12 03:30:39
【问题描述】：

我正在建立一个新的开发环境（从 Windows 7 转移到 Lubuntu），现在我第一次尝试在它上面建立一个 React 应用程序。嗯，第二个。 create-react-app 工作，但我喜欢手工操作。我终于让webpack 和webpack-dev-server 工作了，但是当我转到localhost:8080 时，React 组件没有呈现，并且我收到三个与无效元素类型相关的错误。

我读到here 说这通常是一个导入/导出问题，但在遵循给出的建议后我无法找到它。这是我所拥有的：

index.js

const React = require('react');
// syntax made no difference
import * as ReactDOMClient from 'react-dom/client'
const App = require('./components/App.js');

const root = ReactDOMClient.createRoot(document.getElementById('app'));
root.render(<App />);

索引.html

<!DOCTYPE html>
<html lang="en-US">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
    <div id="app">This does appear</div>
</body>
</html>

应用程序.js

const React = require('react');

export default class App extends React.Component {
    constructor(props) {
        super(props);
        console.log("App constructed?");
    }
    render() {
        return (<h1>This should appear</h1>);
    }
}

三个错误：

警告：React.createElement：类型无效——需要一个字符串（对于内置组件）或一个类/函数（对于复合组件）但得到：对象。
未捕获的错误：元素类型无效：应为字符串（对于内置组件）或类/函数（对于复合组件），但得到：对象。
未捕获的错误：元素类型无效：应为字符串（对于内置组件）或类/函数（对于复合组件），但得到：对象。

堆栈跟踪中唯一对我有意义的内容（如果您愿意，我可以发布其余部分）来自第一个警告并指向 index.js 的第 7 行，即root.render(<App />);。我不确定如何整齐地发布我的文件结构，但我可以向您保证 ./components/App.js （带或不带扩展名）是正确的相对路径。

有什么建议么？

我正在使用 npm，所以我认为我拥有每个模块的最佳版本。这是我的 package.json：
{
  "name": "try-word",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "webpack --mode development",
    "build": "webpack",
    "start": "webpack-dev-server",
    "devstart": "webpack-dev-server --mode development"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  },
  "devDependencies": {
    "@babel/core": "^7.20.2",
    "@babel/preset-react": "^7.18.6",
    "babel-loader": "^9.1.0",
    "html-webpack-plugin": "^5.5.0",
    "webpack": "^5.75.0",
    "webpack-cli": "^4.10.0",
    "webpack-dev-server": "^4.11.1"
  }
}
index.js 中记录的任何内容都可以在错误中打印出来，但 App 构造函数中的日志永远不会。似乎应用程序没有正确导入，但我不知道如何解决这个问题。

【问题讨论】：

标签： reactjs npm webpack webpack-dev-server react-dom

【解决方案1】：

你的导入 App 错误，应该是 App.jsx 希望这可以解决问题。

【讨论】：