0

I am getting the Uncaught Error: ReactDOM.render(): Invalid Component element in wepack:///...invariant.js. Here is my package.json and webpack.config.js:

{
  "name": "githubOauth",
  "version": "1.0.0",
  "description": "",
  "main": "webpack.config.js",
  "scripts": {
    "setup:init": "npm-run-all --parallel start:db setup:db setup:ssl",
    "setup:ssl": "hz create-cert && mv *.pem config/tls",
    "setup:db": "./config/rethinkdb/setup.sh",
    "start:db": "rethinkdb",
    "start": "webpack && node server.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-cli": "^6.18.0",
    "babel-core": "^6.13.2",
    "babel-loader": "^6.2.5",
    "babel-polyfill": "^6.13.0",
    "babel-preset-es2015": "^6.18.0",
    "babel-preset-react": "^6.11.1",
    "babel-preset-stage-0": "^6.5.0",
    "npm-run-all": "^2.3.0",
    "webpack": "^1.9.10",
    "webpack-bundle-tracker": "0.0.51",
    "webpack-node-externals": "^1.5.4",
    "json-loader": "^0.5.4"
  },
  "dependencies": {
    "@horizon/client": "^2.0.0",
    "@horizon/server": "^2.0.0",
    "express": "^4.14.0",
    "path": "^0.12.7",
    "react": "^15.3.1",
    "react-dom": "^15.3.1",
    "react-router": "^2.7.0"
  }
}

and

var path = require('path');

module.exports = {
    entry: ["./src/app.js"],

    output: {
        filename: "dist/js/bundle.js",
        sourceMapFilename: "dist/js/bundle.map"
    },
    externals: {
        React: 'react'
    }, 

    devtool: '#source-map',
    resolve: {
      fallback: './node_modules'
    },
    resolveLoader: {
        root: [
            path.join(__dirname, "node_modules")
          ],
       fallback: './node_modules',
       modulesDirectories: [
          './node_modules'
      ]
    },
    module: {
        loaders: [
            { 
                test: /\.json$/, 
                loader: 'json-loader' 
            },
            {
                loader: 'babel',
                exclude: /node_modules/
            }
        ]
    },
    node: {
        console: 'empty',
        fs: 'empty',
        net: 'empty',
        tls: 'empty'
      }
}

Here is my console error snapshot: enter image description here

Improve this question
6
  • Is it possible you are using a module which is relying on node's net module? Perhaps this is not available to the browser which is why webpack can't resolve it? Commented Nov 20, 2016 at 4:08
  • but that error is occurring in a number of files where there is require keyword. Commented Nov 20, 2016 at 4:10
  • your webpack config is a little funky, are you sure you've got it set up properly? you're targeting node and then trying to load it in a browser, for one thing.. Commented Nov 20, 2016 at 4:13
  • I am not sure.. I was able to start the server using npm start and it is throwing error at runtime. Commented Nov 20, 2016 at 4:16
  • @John I cleaned some stuff from webpack.config.js`.. now getting the error as mentioned in the modified question! Commented Nov 20, 2016 at 18:37
Related questions
5
WebPack with React Uncaught Reference Error
10
Webpack error with react
3
Webpack and React -- Unexpected token
Load 7 more related questions Show fewer related questions

0

Reset to default

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.