这就是我的代码的样子
--------- index.js -----
var React =require('react');
var ReactDOM =require('react-dom');
var App=require('../components/App');
ReactDOM.render(<App />, document.getElementById('app'));
--------- App.js -----
var React = require('react');
class App extends React.Component {
render() {
return(
<div>
<h1>HI wassup</h1>
</div>
);
}
}
export default App;
--------- 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 -----
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
}
};
------------------文件夹结构-------------
|react
|node modules
|components
|App.js
|app
|index.js
一切正常,但是当我在浏览器中执行该应用程序时,出现响应错误并提供了一个显示以下内容的链接。
“元素类型无效:预期为字符串(对于内置组件) 或类/函数(用于复合组件)但得到了:对象。”
答案 0 :(得分:0)
您正在混淆writeTonsOfBytes
和require
/ import
。
由于您正在运行Webpack,因此所有React代码(以及通过Webpack由babel转译的任何代码)都应坚持使用导入/导出。 export
仅应在像js这样直接由节点运行的地方使用。
在index.js中,将所有需求更改为导入,然后查看是否有帮助。
答案 1 :(得分:0)
在文件index.js
中,您应该这样更改代码:
var App = require('../components/App').default;
或使用import
import App from '../components/App';
我建议使用统一用法。您可以import/export
或module.exports/require
。