警告:React.createElement:type无效 - bundle.js
Ped*_*les 5 javascript node.js reactjs webpack react-dom
我正在学习React JS的教程,一切都很好,几天我可以运行一个例子,简单,执行推荐的基本配置,再添加一些我添加的附加组件来识别Javascript版本.
几天不再审查项目,但它正常工作,执行命令时,我没有看到任何错误,但它没有在浏览器中显示任何内容,只有多个错误出现在这个控制台中.
我已经卸载并重新安装了reac和react-dom,问题仍然存在,尝试从朋友那里克隆它的新项目,它正常工作,它只复制了我的相同结构.
问题
警告:React.createElement:type无效 - 期望一个字符串(对于内置组件)或一个类/函数(对于复合组件)但得到:undefined.您可能忘记从其定义的文件中导出组件,或者您可能混淆了默认导入和命名导入.
上述错误发生在您的某个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>
)
}
}
出口默认App;
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
在app.jsx中,组件的导出方式如下:
export default App;
但它是这样导入的:
import {App} from './components/app.jsx';
代码失败,因为Appapp.jsx中不存在导出,并且出现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您的webpack配置将包放在`js/bundle.js`,但您的应用程序是从`public/js/bundle.js`提供的.您需要更新您的webpack配置以构建为`public/js/bundle.js`.输出:{path:path.resolve('public/js'),filename:'bundle.js'}, (3认同)
| 归档时间： |
|
| 查看次数： |
11728 次 |
| 最近记录： |