[英]Uncaught Error: Minified React error #130
So here is what my code looks like 所以这是我的代码
---------index.js----- --------- index.js -----
var React =require('react');
var ReactDOM =require('react-dom');
var App=require('../components/App');
ReactDOM.render(<App />, document.getElementById('app'));
---------App.js----- --------- App.js -----
var React = require('react');
class App extends React.Component {
render() {
return(
<div>
<h1>HI wassup</h1>
</div>
);
}
}
export default App;
---------package.json----- ---------的package.json -----
{
"name": "views",
"version": "1.0.0",
"description": "learning",
"main": "index.js",
"scripts": {
"start": "webpack-dev-server --mode development --hot && webpack"
},
"author": "vinayak",
"license": "ISC",
"dependencies": {
"react": "^16.4.2",
"react-dom": "^16.4.2"
},
"devDependencies": {
"babel-core": "^6.26.3",
"babel-loader": "^7.1.5",
"babel-preset-react": "^6.24.1",
"html-webpack-plugin": "^3.2.0",
"unminified-webpack-plugin": "^2.0.0",
"webpack": "^4.16.5",
"webpack-cli": "^3.1.0",
"webpack-dev-server": "^3.1.5"
}
}
---------webpackconfig----- --------- webpackconfig -----
const HTMLWebpackPlugin=require('html-webpack-plugin');
const webpack=require('webpack');
const UnminifiedWebpackPlugin = require('unminified-webpack-plugin');
const HTMLWebpackPluginConfig=new HTMLWebpackPlugin({
template: '../../views/index.hbs',
filename:'index.hbs'
});
module.exports={
entry:__dirname + '/app/index.js',
module:{
rules:[
{
test:/\.js$/,
exclude:/node_modules/,
loader:'babel-loader'
}
]
},
plugins: [
new UnminifiedWebpackPlugin(),
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: JSON.stringify('development')
}
})
],
devtool: 'source-map',
output:{
filename:'app.js',
path:__dirname + '../../public/javascripts/'
},
devServer:{
inline:false
}
};
------------------folder structure------------- ------------------文件夹结构-------------
|react
|node modules
|components
|App.js
|app
|index.js
Everything works fine but when I am execting the app in browser I get the react error and gives a link which displays the following. 一切正常,但是当我在浏览器中执行该应用程序时,出现响应错误并提供了一个显示以下内容的链接。
"Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object."
“元素类型无效:期望使用字符串(对于内置组件)或类/函数(对于复合组件),但得到:对象。”
You're mixing up require
, and import
/ export
. 您混淆了
require
和import
/ export
。
Since you're running webpack, all of your React code (and anything that gets transpiled by babel via webpack) should stick to using import/export. 由于您正在运行webpack,因此您的所有React代码(以及任何通过bapack通过babel转译的代码)都应坚持使用import / export。
require
should only be used in places like js that's directly run by node. require
应该只在像js这样直接由node运行的地方使用。
In your index.js, change all the requires to imports and see if that helps. 在index.js中,将所有需求更改为import,看看是否有帮助。
In the file index.js
, you should change your code like this: 在文件
index.js
,您应该像这样更改代码:
var App = require('../components/App').default;
or use import
或使用
import
import App from '../components/App';
I recommend using a unified usage. 我建议使用统一用法。 You can
import/export
or module.exports/require
. 您可以
import/export
或module.exports/require
。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.