未捕獲的錯誤：縮小的React錯誤＃130

Question

所以這是我的代碼

--------- 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

一切正常，但是當我在瀏覽器中執行該應用程序時，出現響應錯誤並提供了一個顯示以下內容的鏈接。

“元素類型無效：期望使用字符串（對於內置組件）或類/函數（對於復合組件），但得到：對象。”

Answer 1

您混淆了require和import / export 。

由於您正在運行webpack，因此您的所有React代碼（以及任何通過bapack通過babel轉譯的代碼）都應堅持使用import / export。 require應該只在像js這樣直接由node運行的地方使用。

在index.js中，將所有需求更改為import，看看是否有幫助。

Answer 2

在文件index.js ，您應該像這樣更改代碼：

var App = require('../components/App').default;

或使用import

import App from '../components/App';

我建議使用統一用法。 您可以import/export或module.exports/require 。