警告：React.createElement：类型无效——bundle.js答案

【问题标题】：Warning: React.createElement: type is invalid -- bundle.js警告：React.createElement：类型无效——bundle.js
【发布时间】：2026-02-09 11:45:01
【问题描述】：

我正在学习 React JS 的教程，一切都很好，这几天我可以运行一个简单的示例，执行推荐的基本配置，以及我添加的一些附加组件以识别 Javascript 版本.

几天后不再审项目，但运行正常，执行命令时，没有看到任何错误，但是在浏览器中没有显示任何内容，只是在这个的控制台中出现了多个错误一个。

我已经卸载重装了reac和react-dom，问题依旧，尝试从朋友那里克隆一个新项目，运行正常，只是复制了我的相同结构。

问题

警告：React.createElement：类型无效 - 应为字符串（用于内置组件）或类/函数（用于复合组件）但得到：未定义。您可能忘记从定义组件的文件中导出组件，或者您可能混淆了默认导入和命名导入。

上述错误发生在您的一个 React 组件中：考虑在您的树中添加错误边界以自定义错误处理行为。

需要注意的是bundle.js文件中出现了错误，该文件用于通过webpack存储生成的代码

package.json

{
  "name": "prueba",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "node server.js",
    "dev": "concurrently \"node server.js\" \"webpack -w\" "
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "express": "^4.16.2",
    "react": "^16.2.0",
    "react-dom": "^16.2.0",
    "serve-static": "^1.13.1"
  },
  "devDependencies": {
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.2",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "concurrently": "^3.5.1",
    "eslint": "^4.9.0",
    "eslint-config-airbnb-base": "^12.1.0",
    "eslint-plugin-import": "^2.7.0",
    "webpack": "^3.10.0"
  }
}

webpack.config.js

const path = require('path');

const config = {
    entry: './src/index.jsx',
    output: {
        path: path.resolve('js'),
        filename: 'bundle.js'
    },

    module: {
        rules: [
            {                
                test: /.jsx$/,
                use:{
                    loader:'babel-loader'
                },
                exclude: /node_module/
            }
        ]
    }
}

module.exports = config;

app.jsx

import React, {Component} from 'react';
import {render} from 'react-dom';

class App extends Component{
    render(){
        return(
            <div>                
                <h1>Mi Aplicacion React Js</h1>
                <h3>Probando la exportacion</h3>
            </div>
        )       
    }
}

导出默认应用；

index.jsx

import React, { Component } from 'react';
import { render } from 'react-dom';
import {App} from './components/app.jsx';

render(
    <App/>,
    document.getElementById('appStart')
)

index.html

<!DOCTYPE html>

<html>

    <head>
        <meta charset="utf-8">
        <title>Aprendiendo React</title>
    </head>

    <body>
        <div id="appStart"></div>
        <script src="js/bundle.js"></script>
    </body>

</html>

控制台

C:\Users\PterPmntaM\CursoReactJS\React_Scaffold> npm run dev

> prueba@1.0.0 dev C:\Users\PterPmntaM\CursoReactJS\React_Scaffold
> concurrently "node server.js" "webpack -w"

[0] Iniciando servidor
[1]
[1] Webpack is watching the files...
[1]
[1] Hash: 5fd2ce10b3c1788b385b
[1] Version: webpack 3.10.0
[1] Time: 4878ms
[1]     Asset    Size  Chunks                    Chunk Names
[1] bundle.js  729 kB       0  [emitted]  [big]  main
[1]   [14] ./src/index.jsx 381 bytes {0} [built]
[1]     + 27 hidden modules

【问题讨论】：

标签： javascript node.js reactjs webpack react-dom

【解决方案1】：

在 app.jsx 中，组件是这样导出的：

export default App;

但它是这样导入的：

import {App} from './components/app.jsx';

代码失败，因为 app.jsx 中不存在 App 导出，并且出现了 undefined 错误提示。它被导出为default。

这是正确的导入方式：

// The recommended way
import App from './components/app.jsx';

// The alternative way, to better illustrate what's going on
import { default as App } from './components/app.jsx';

这里有一个很好的 ES 模块概述：http://exploringjs.com/es6/ch_modules.html

【讨论】：

@PedroMiguelPimientaMorales 我可以在这里重现问题和解决方案：codesandbox.io/s/939315151w
@kingdaro 这里是repo react scaffold
@PedroMiguelPimientaMorales 您的 webpack 配置将包放在 js/bundle.js，但您的应用程序正在从 public/js/bundle.js 提供服务。您需要更新您的 webpack 配置以构建到 public/js/bundle.js 中。输出：{路径：path.resolve('public/js')，文件名：'bundle.js'}，