Any updates on React? Cannot run new projects , please help

1

Hi,

I was able to run react projects but now when i try to run it says – to install webpack-cli, i install it but then it says
Error: Minified React error #200;

I searched on the web and since march start many having this problem …

Can any one please guide me …

My webpack.config.js file -


const HtmlWebpackPlugin = require('html-webpack-plugin'); //installed via npm
const webpack = require('webpack'); //to access built-in plugins
const path = require('path');

const config = {
  entry: './app/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'index_bundle.js',
    publicPath: '/'
  },
  module: {
    rules: [
      { test: /\.(js)$/, use: 'babel-loader' },
      { test: /\.css$/, use: ['style-loader','css-loader'] }
    ]
  },
  devServer: {
    historyApiFallback: true
  },
  plugins: [
      new HtmlWebpackPlugin({template: './app/index.html'})
  ]
};

module.exports = config;

My Package.json


{
  "name": "reactdata",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "create": "webpack",
    "start": "webpack-dev-server --open"
  },
  "babel": {
    "presets": [
      "env",
      "react"
    ]
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "axios": "^0.18.0",
    "prop-types": "^15.6.1",
    "react": "^16.2.0",
    "react-dom": "^16.2.0",
    "react-router-dom": "^4.2.2"
  },
  "devDependencies": {
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.4",
    "babel-preset-env": "^1.6.1",
    "babel-preset-react": "^6.24.1",
    "css-loader": "^0.28.10",
    "html-webpack-plugin": "^2.28.0",
    "style-loader": "^0.20.3",
    "webpack": "^2.3.1",
    "webpack-dev-server": "^2.4.2"
  }
}

And a very simple react app with index.html having app element–


import React from 'react';
import ReactDom from'react-dom';
require('./index.css');

class App extends React.Component {
    render() {
        return(
            <div>
                Hello World
                </div>
        )
    }
}

ReactDom.render(
    <App />,
    document.getElementById('app')
)
2

Havent learned much about webpack yet. when i started learning React i found videos showing the setup for React with webpack unfortunately the webpack setup used no longer worked and i had to look elsewhere … I then found create-react-app https://github.com/facebook/create-react-app and have being using it … with no issues … so this could be one option for you.
I have just started to look at https://parceljs.org/ its seems its a newish competitor for webpack and its seems to be getting a lot of attention for being easy to use and very fast. So you could also look into using this. Hopefully Ill get some time to see how easy/hard it is to set up React using parcel as it would be nice to have options especially as webpack seems tricky to learn.
But create-react-app requires you to not have to worry about webpack so for the time being I am very happy to be using it.

quick edit i just seen webpack 4 is just out … so wonder if this could be causing any problems for you … https://medium.com/webpack/webpack-4-released-today-6cdb994702d4

1 Like
3

Thanks @JohnL3 - i am now getting this error

Uncaught Error: Target container is not a DOM element.

On the render of ReactDom, do you know what it means or what mistake i might have made
And yes the webpack is causing some serious issues , the above error refers to webapack
… Thanks

4

I finally got it to work by using the below code in html file-


<!DOCTYPE html>
<html>
    <head>
        <title>GitHib Battle</title>
    </head>

    <body>
        <div id='app'></div>
    <script type="text/javascript" src="index_bundle.js"></script></body>
</html>

Earlier it was –


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>GitHub Battle</title>
</head>
<body>
    <div id="app"></div>
</body>
</html>

Seems the extra code of metachar, meta name etc are now not working , i used the auto generated one’s , but when i tried simple one it worked…after so many hours …

Hope there are no new errors …

5

glad to hear you got it sorted … I would recommend you check out create-react-app might mean less headaches for you in the future … also look up webpack 4 … seems they have added major improvements to webpack.

1 Like
6

@JohnL3 - there is one bad news though if i am using the webpack-dev-server --open its taking way too long to recompile and show new code … its almost taking 10-15 seconds now while earlier it was quite instant …

So what ever that webpack update was it was terrible…

I am just wondering does facebook people not look at such issues ?