Uncaught Error: Minified React error #130

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

Answers:

Answer

You're mixing up require, and 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. require should only be used in places like js that's directly run by node.

In your index.js, change all the requires to imports and see if that helps.

Answer

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.

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.