警告：React.createElement：类型无效 -- bundle.js

Question

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

经过几天不再审查项目，但它运行正常，执行命令时，我没有看到任何错误，但在浏览器中没有显示任何内容，仅在控制台中出现多个错误这个。

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

问题

Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: 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.

需要注意的是文件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

Answer 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

警告：React.createElement：类型无效 -- bundle.js

Warning: React.createElement: type is invalid -- bundle.js

javascript

node.js

reactjs

webpack

react-dom

问题

package.json

webpack.config.js

app.jsx

index.jsx

index.html

控制台