javascript 警告：React.createElement：类型无效——bundle.js
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/48738761/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Warning: React.createElement: type is invalid -- bundle.js
提问by Pedro Miguel Pimienta Morales
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. 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.createElement：类型无效——需要一个字符串（对于内置组件）或一个类/函数（对于复合组件）但得到：未定义。您可能忘记从定义组件的文件中导出组件，或者您可能混淆了默认导入和命名导入。
上述错误发生在您的一个 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
包.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
应用程序.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;
导出默认应用程序；
index.jsx
索引.jsx
import React, { Component } from 'react';
import { render } from 'react-dom';
import {App} from './components/app.jsx';
render(
<App/>,
document.getElementById('appStart')
)
index.html
索引.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
> [email protected] 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
回答by kingdaro
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 Appexport doesn't exist from app.jsx, and comes up undefinedas the error suggests. It's being exported as defaultinstead.
代码失败是因为Appapp.jsx 中不存在导出，并且出现了undefined错误提示。它正在被导出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
