Webpack not rendering any content on localhost. It is attaching the script tag in html but nothing i-CodePudding

I am new to webpack and i made a react app with index.js as the entry file and app.js as the root component being rendered. The webpack is getting build fine without error and the script tag is also being added to html file but there is not content getting rendered for App component. The code for these files are - index.js -

import './index.css';
import React from 'react';
import ReactDOM from 'react-dom';
import {App} from './components/App';
// import { initWeb3 } from './utils/web3';

const app = document.getElementById('app');
ReactDOM.render(
   <App />,
 app
);

App.js -

import React from 'react';

export class App extends React.Component{
    render(){
        return(
            <div>
                <h1> Hi there</h1>
            </div>
        )
      }
   }

The webpack.config.js file is -

        const path = require('path');
    const webpack = require('webpack');
    const HtmlWebpackPlugin = require('html-webpack-plugin');
    const ESLintPlugin = require('eslint-webpack-plugin');
    const NodePolyfillPlugin = require("node-polyfill-webpack-plugin")
    const nodeExternals = require('webpack-node-externals');
    const {CleanWebpackPlugin} = require('clean-webpack-plugin');

    var HtmlWebpackPluginConfig = new HtmlWebpackPlugin({
      template:__dirname '/src/index.html',
      filename:'index.html',
      inject:'body'
    })

    const EslintOptions = {
      extensions: [`js`, `jsx`],
      exclude: [
        `/node_modules/`,
      ], // these are the options we'd previously passed in
    }

    module.exports = {
      resolve: {
        fallback: {
          fs: false,
          os:false,
          tls: false,
          net: false,
          path: require.resolve("path-browserify"),
          zlib: false,
          http: false,
          https: false,
          stream: false,
          crypto: false,
        } 
      },
      entry: {
        app: __dirname '/src/index.jsx'
      },
      externalsPresets:{node:true},
      externals:[nodeExternals()],
      output: {
        filename: '[name].bundle.js',
        path: __dirname '/public'
      },
      module: {
        rules: [
          {
            test: /\.(js|jsx)$/,
            exclude: /node_modules/,
            use: {
              loader: 'babel-loader',
              options: {
                presets: [
                  ['@babel/preset-env', { targets: "defaults" }]
                ]
              }
            }
          },
          {
            test: /\.(css|scss)$/,
            include: /node_modules/,
            use: [
              'style-loader',
              'css-loader',
              'sass-loader'
            ]
          },
          {
            test: /\.(css|scss)$/,
            exclude: /node_modules/,
            use: [
              'style-loader',
              {
                loader: 'css-loader',
                options: {
                  modules: true
                }
              },
              'sass-loader'
            ]
          },
          {
            test: /\.(png|svg|jpg|gif)$/,
            loader: 'file-loader'
          }
        ]
      },
      target:'node',
      resolve: {
        extensions: ['.js', '.jsx']
      },
      plugins: [
        new webpack.HotModuleReplacementPlugin(),
        //new webpack.NamedModulesPlugin(),
        new NodePolyfillPlugin(),
        new ESLintPlugin(EslintOptions),
        new CleanWebpackPlugin(),
        //new webpack.HotModuleReplacementPlugin(),
        HtmlWebpackPluginConfig
        // new HtmlWebpackPlugin({
        //   template: './src/index.html'
        // }),
      ],
      devtool: 'eval-source-map',
        devServer: {
          
            port:3010,
            static:{
              directory: './public'
            },
            historyApiFallback: true,
            hot: true
          },
      mode: 'development'
    };

HTML file index.html is -

        <!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width" />
        <title>Ethereum Ecommerce Store</title>
      </head>
      <body>
        <div id="app"></div>
      </body>
    </html>

Also i am getting this error in console while running localhost.

Uncaught ReferenceError: require is not defined
at Object.util (app.bundle.js:245:1)
at __webpack_require__ (app.bundle.js:274:33)
at fn (app.bundle.js:415:21)
at eval (index.js?ce24:2:12)
at Object../node_modules/console-browserify/index.js (app.bundle.js:40:1)
at __webpack_require__ (app.bundle.js:274:33)
at fn (app.bundle.js:415:21)
at eval (log.js:1:41)
at Object../node_modules/webpack/hot/log.js (app.bundle.js:190:1)
at __webpack_require__ (app.bundle.js:274:33)

CodePudding user response：

You should not use

externals:[nodeExternals()]

in your webpack.config.js file.

Specifying it will ask webpack to use the nodejs (backend) require() to get dependencies.

Clients (browser web apis) do not provide require() as a function and hence the error on your localhost.

Removing the config shall fix the error.