title: webpack : Uncaught ReferenceError: require is not defined
body: <p>This error comes when in webpack <code>target = node</code> but i have done <code>target=web</code>(default)</p>
  
  <p>also i am not loading reactjs externally </p>
  
  <p>this error comes on loading app in browser</p>
  
  <p><strong>what i am doing wrong ?</strong></p>
  
  <p><strong>In Console</strong></p>
  
  <p><a href="https://i.stack.imgur.com/VyCEW.png" rel="noreferrer"><img src="https://i.stack.imgur.com/VyCEW.png" alt="enter image description here"></a></p>
  
  <p><strong>File</strong></p>
  
  <p><a href="https://i.stack.imgur.com/7cw5x.png" rel="noreferrer"><img src="https://i.stack.imgur.com/7cw5x.png" alt="enter image description here"></a>
  <a href="https://i.stack.imgur.com/tUaYh.png" rel="noreferrer"><img src="https://i.stack.imgur.com/tUaYh.png" alt="enter image description here"></a></p>
  
  <p><strong>webpack.config.js</strong></p>
  
  <pre><code>const HtmlWebpackPlugin = require('html-webpack-plugin');
  const nodeExternals = require('webpack-node-externals');
  
  const config = {
      target: 'web',
      externals: [nodeExternals()],
      entry: './src/index.js',
      output: {
          filename: '[name].bundle.js',
          path: __dirname + '/build'
      },
      module: {
          rules: [
              {
                  test: /\.js$/,
                  loader: 'babel-loader',
                  exclude: /node_modules/
              },
              {
                  test: /\.css$/,
                  use: ExtractTextPlugin.extract({
                      fallback: "style-loader",
                      use: "css-loader"
                  })
              },
              {
                  test: /\.(png|svg|jpe?g|gif)$/,
                  use: [{
                          loader: 'file-loader',
                          options: {
                              name: '[path][name].[ext]'
                          }
                      }
                  ]
              },
              {
                  test: /\.(woff|woff2|eot|ttf|otf)$/,
                  use: ['file-loader']
              }
          ]
      },
      devtool: 'inline-source-map',
      plugins: [
          new HtmlWebpackPlugin({
              title: 'Instarem.com'
          })
      ]
  };
  
  module.exports = config;
  </code></pre>
  
  <p><strong>.babelrc</strong> using </p>
  
  <h2><code>babel-preset-env</code></h2>
  
  <pre><code>{
      "presets": [
          "react",
          [
              "env",
              {
                  "targets": {
                      "browsers": ["last 2 versions"]
                  },
                  "debug": true,
                  "modules": "commonjs"
              }
          ]
      ],
      "plugins": [
          "transform-object-rest-spread",
          "transform-class-properties"
      ]
  }
  </code></pre>
  
  <p>thanks :)</p>
  
  <blockquote>
    <p><strong>I found Clue</strong></p>
  </blockquote>
  
  <hr>
  
  <p><em>In facebook's <strong><a href="https://github.com/facebookincubator/create-react-app" rel="noreferrer">create react app generator</a></strong> bundle it shows</em></p>
  
  <pre><code>module.exports = __webpack_require__(/*! ./lib/React */ "./node_modules/react/lib/React.js");
  </code></pre>
  
  <p><em>but in my case it shows only</em></p>
  
  <pre><code>module.exports = require("react");
  </code></pre>