未捕获的错误:缩小的 React 错误 #130 [英] Uncaught Error: Minified React error #130

问题描述

这是我的代码的样子

---------index.js-----

var React =require('react');var ReactDOM =require('react-dom');var App=require('../components/App');ReactDOM.render(, document.getElementById('app'));

---------App.js-----

var React = require('react');类 App 扩展了 React.Component {使成为() {返回(<div><h1>HI浪费</h1>

);}}导出默认应用程序；

---------package.json-----

<代码>{"name": "意见","版本": "1.0.0","description": "学习","main": "index.js",脚本":{"start": "webpack-dev-server --mode development --hot && webpack"},"author": "vinayak","license": "ISC",依赖关系":{反应":^ 16.4.2"，反应域":^16.4.2"},开发依赖":{"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({模板:'../../views/index.hbs',文件名:'index.hbs'});模块.出口={条目:__目录名 + '/app/index.js',模块:{规则:[{测试:/\.js$/,排除:/node_modules/，loader:'babel-loader'}]},插件: [新的 UnminifiedWebpackPlugin(),新的 webpack.DefinePlugin({'process.env':{NODE_ENV: JSON.stringify('development')}})],开发工具:'源地图'，输出:{文件名:'app.js',路径:__目录名 + '../../public/javascripts/'},开发服务器:{内联:假}};

-----------文件夹结构-------------

|反应|节点模块|组件|App.js|应用程序|index.js

一切正常，但是当我在浏览器中执行应用程序时，我收到反应错误并提供一个显示以下内容的链接.

<块引用>

"元素类型无效:需要一个字符串(对于内置组件)或一个类/函数(用于复合组件)但得到:对象."

解决方案

在文件 index.js 中，您应该像这样更改代码:

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

或使用import

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

我推荐使用统一用法.您可以import/export 或 module.exports/require.

So here is what my code looks like

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

};

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

解决方案

In the file index.js, you should change your code like this:

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

or use import

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

I recommend using a unified usage. You can import/export or module.exports/require.

这篇关于未捕获的错误:缩小的 React 错误 #130的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！