警告：React.createElement：type无效 - bundle.js

Question

I'm taking a tutorial to learn React JS, everything was fine, for days I could run an example, simple, carrying out a recommended basic configuration, plus a few more add-ons that I add to recognize the Javascript version. 我正在学习React JS的教程，一切都很好，几天我可以运行一个例子，简单，执行推荐的基本配置，再加上一些我添加的附加组件来识别Javascript版本。

After several days of no longer reviewing the project, but it is working correctly, when executing the command, I do not see any error, but it does not show anything in the browser, only multiple errors appear in the console of this one. 几天不再审查项目，但它正常工作，执行命令时，我没有看到任何错误，但它没有在浏览器中显示任何内容，只有多个错误出现在这个控制台中。

I have uninstalled and reinstalled reac and react-dom, and the problem still persists, try a new project cloning it from a friend, and it works normally, and it only copied the same structure of mine. 我已经卸载并重新安装了reac和react-dom，问题仍然存在，尝试从朋友那里克隆它的新项目，它正常工作，它只复制了我的相同结构。

Issues 问题

Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. 警告：React.createElement：type无效 - 期望一个字符串（对于内置组件）或一个类/函数（对于复合组件）但得到：undefined。 You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports. 您可能忘记从其定义的文件中导出组件，或者您可能混淆了默认导入和命名导入。

The above error occurred in one of your React components: Consider adding an error boundary to your tree to customize error handling behavior. 上述错误发生在您的一个React组件中：考虑向树中添加错误边界以自定义错误处理行为。

It should be noted that errors appear in the file bundle.js , which is used to store the generated code through webpack 应该注意的是，错误出现在文件bundle.js ，该文件用于通过webpack存储生成的代码

package.json 的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 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 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>
        )       
    }
}

export default App; 出口默认App;

index.jsx 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 的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>

Console 安慰

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

Answer 1

In app.jsx, the component is exported like so: 在app.jsx中，组件的导出方式如下：

export default App;

But it's being imported like so: 但它是这样导入的：

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

The code fails because the App export doesn't exist from app.jsx, and comes up undefined as the error suggests. 代码失败，因为app.jsx中不存在App导出，并且出现错误提示undefined 。 It's being exported as default instead. 它被导出为default 。

This is the correct way to import it: 这是导入它的正确方法：

// 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';

Here's a good overview for ES modules: http://exploringjs.com/es6/ch_modules.html 以下是ES模块的一个很好的概述： http ： //exploringjs.com/es6/ch_modules.html

警告：React.createElement：type无效 - bundle.js

问题描述

Issues 问题

package.json 的package.json

webpack.config.js webpack.config.js

app.jsx app.jsx

index.jsx index.jsx

index.html 的index.html

Console 安慰

1 个解决方案

解决方案1
6 已采纳 2018-02-12 02:33:10

警告：React.createElement：type无效 - bundle.js

问题描述

Issues 问题

package.json 的package.json

webpack.config.js webpack.config.js

app.jsx app.jsx

index.jsx index.jsx

index.html 的index.html

Console 安慰

1 个解决方案

解决方案1 6 已采纳 2018-02-12 02:33:10

解决方案1
6 已采纳 2018-02-12 02:33:10