title: Why do I get a white/blank page on new React app?
body: <p><strong>This is solved - Here's what it was:</strong><br>
  <em>I had confused <code>create-react-app</code> with <code>start-react-app</code>, which still created an app, which caused the confusion.</em></p>
  <p>I've recently created a new react app, but it gives me a white/blank page. I do see the default favicon and the title of the app.</p>
  <p>I've done the basics steps to create the app:<br>
  <code>npx start-react-app frontend</code><br>
  <code>cd frontend</code><br>
  <code>npm start</code></p>
  <p>It gives me following error:</p>
  <pre><code>imacs-imac:frontend imac$ npm start
  
  &gt; frontend@0.1.0 start /Users/imac/Desktop/project/frontend
  &gt; node scripts/start.js
  
  Project is running at http://localhost:9000/
  webpack output is served from /
  Content not from webpack is served from /Users/imac/Desktop/project/frontend/public
  webpack: wait until bundle finished: /
  (node:2016) Warning: Accessing non-existent property 'cat' of module exports inside circular dependency
  (Use `node --trace-warnings ...` to show where the warning was created)
  (node:2016) Warning: Accessing non-existent property 'cd' of module exports inside circular dependency
  (node:2016) Warning: Accessing non-existent property 'chmod' of module exports inside circular dependency
  (node:2016) Warning: Accessing non-existent property 'cp' of module exports inside circular dependency
  (node:2016) Warning: Accessing non-existent property 'dirs' of module exports inside circular dependency
  (node:2016) Warning: Accessing non-existent property 'pushd' of module exports inside circular dependency
  (node:2016) Warning: Accessing non-existent property 'popd' of module exports inside circular dependency
  (node:2016) Warning: Accessing non-existent property 'echo' of module exports inside circular dependency
  (node:2016) Warning: Accessing non-existent property 'tempdir' of module exports inside circular dependency
  (node:2016) Warning: Accessing non-existent property 'pwd' of module exports inside circular dependency
  (node:2016) Warning: Accessing non-existent property 'exec' of module exports inside circular dependency
  (node:2016) Warning: Accessing non-existent property 'ls' of module exports inside circular dependency
  (node:2016) Warning: Accessing non-existent property 'find' of module exports inside circular dependency
  (node:2016) Warning: Accessing non-existent property 'grep' of module exports inside circular dependency
  (node:2016) Warning: Accessing non-existent property 'head' of module exports inside circular dependency
  (node:2016) Warning: Accessing non-existent property 'ln' of module exports inside circular dependency
  (node:2016) Warning: Accessing non-existent property 'mkdir' of module exports inside circular dependency
  (node:2016) Warning: Accessing non-existent property 'rm' of module exports inside circular dependency
  (node:2016) Warning: Accessing non-existent property 'mv' of module exports inside circular dependency
  (node:2016) Warning: Accessing non-existent property 'sed' of module exports inside circular dependency
  (node:2016) Warning: Accessing non-existent property 'set' of module exports inside circular dependency
  (node:2016) Warning: Accessing non-existent property 'sort' of module exports inside circular dependency
  (node:2016) Warning: Accessing non-existent property 'tail' of module exports inside circular dependency
  (node:2016) Warning: Accessing non-existent property 'test' of module exports inside circular dependency
  (node:2016) Warning: Accessing non-existent property 'to' of module exports inside circular dependency
  (node:2016) Warning: Accessing non-existent property 'toEnd' of module exports inside circular dependency
  (node:2016) Warning: Accessing non-existent property 'touch' of module exports inside circular dependency
  (node:2016) Warning: Accessing non-existent property 'uniq' of module exports inside circular dependency
  (node:2016) Warning: Accessing non-existent property 'which' of module exports inside circular dependency
  Hash: 0f0125be68c02e27c57615ee1d2b5825
  Version: webpack 2.7.0
  Time: 20771ms
                                   Asset       Size  Chunks                    Chunk Names
  static/js/main.0f0125be68c02e27c57615ee1d2b5825.js    2.91 MB       0  [emitted]  [big]  main
                              index.html  329 bytes          [emitted]         
  chunk    {0} static/js/main.0f0125be68c02e27c57615ee1d2b5825.js (main) 1.07 MB [entry] [rendered]
     [84] (webpack)/hot/emitter.js 77 bytes {0} [built]
     [85] ./src/index.js 665 bytes {0} [built]
     [86] (webpack)-dev-server/client?http://localhost:9000 7.93 kB {0} [built]
     [87] (webpack)/hot/dev-server.js 1.57 kB {0} [built]
     [90] ./src/App.js 1.97 kB {0} [built] [failed] [1 error]
    [111] ./~/loglevel/lib/loglevel.js 8.86 kB {0} [built]
    [118] ./~/react-dom/index.js 59 bytes {0} [built]
    [204] ./~/react/react.js 56 bytes {0} [built]
    [205] ./~/strip-ansi/index.js 161 bytes {0} [built]
    [208] ./src/index.css 996 bytes {0} [built]
    [209] ./~/url/url.js 23.3 kB {0} [built]
    [211] (webpack)-dev-server/client/overlay.js 3.67 kB {0} [built]
    [212] (webpack)-dev-server/client/socket.js 1.08 kB {0} [built]
    [215] (webpack)/hot nonrecursive ^\.\/log$ 160 bytes {0} [built]
    [217] multi (webpack)-dev-server/client?http://localhost:9000 webpack/hot/dev-server ./index.js 52 bytes {0} [built]
       + 203 hidden modules
  
  ERROR in ./src/App.js
  Module build failed: TypeError: Cannot read property 'replace' of undefined
      at EventEmitter.module.exports.api.report (/Users/imac/Desktop/project/frontend/node_modules/eslint/lib/eslint.js:991:31)
      at RuleContext.report (/Users/imac/Desktop/project/frontend/node_modules/eslint/lib/rule-context.js:130:25)
      at report (/Users/imac/Desktop/project/frontend/node_modules/eslint-plugin-react/lib/rules/jsx-indent.js:132:15)
      at /Users/imac/Desktop/project/frontend/node_modules/eslint-plugin-react/lib/rules/jsx-indent.js:311:11
      at Array.forEach (&lt;anonymous&gt;)
      at checkLiteralNodeIndent (/Users/imac/Desktop/project/frontend/node_modules/eslint-plugin-react/lib/rules/jsx-indent.js:310:28)
      at EventEmitter.handleLiteral (/Users/imac/Desktop/project/frontend/node_modules/eslint-plugin-react/lib/rules/jsx-indent.js:374:7)
      at EventEmitter.emit (events.js:412:35)
      at NodeEventGenerator.applySelector (/Users/imac/Desktop/project/frontend/node_modules/eslint/lib/util/node-event-generator.js:265:26)
      at NodeEventGenerator.applySelectors (/Users/imac/Desktop/project/frontend/node_modules/eslint/lib/util/node-event-generator.js:294:22)
      at NodeEventGenerator.enterNode (/Users/imac/Desktop/project/frontend/node_modules/eslint/lib/util/node-event-generator.js:308:14)
      at CodePathAnalyzer.enterNode (/Users/imac/Desktop/project/frontend/node_modules/eslint/lib/code-path-analysis/code-path-analyzer.js:602:23)
      at CommentEventGenerator.enterNode (/Users/imac/Desktop/project/frontend/node_modules/eslint/lib/util/comment-event-generator.js:98:23)
      at Traverser.enter (/Users/imac/Desktop/project/frontend/node_modules/eslint/lib/eslint.js:929:36)
      at Traverser.__execute (/Users/imac/Desktop/project/frontend/node_modules/estraverse/estraverse.js:330:31)
      at Traverser.traverse (/Users/imac/Desktop/project/frontend/node_modules/estraverse/estraverse.js:434:28)
   @ ./src/index.js 13:11-27
   @ multi (webpack)-dev-server/client?http://localhost:9000 webpack/hot/dev-server ./index.js
  Child html-webpack-plugin for &quot;index.html&quot;:
      chunk    {0} index.html 547 kB [entry] [rendered]
          [0] ./~/lodash/lodash.js 544 kB {0} [built]
          [1] ./~/html-webpack-plugin/lib/loader.js!./public/index.html 1.52 kB {0} [built]
          [2] (webpack)/buildin/global.js 509 bytes {0} [built]
          [3] (webpack)/buildin/module.js 517 bytes {0} [built]
  webpack: Failed to compile.
  </code></pre>
  <h1>Additional Code/Info</h1>
  <p><strong>project/frontend</strong></p>
  <pre><code>node_modules
  public
  scripts
  src
  .eslintrc.json
  .gitignore
  package-lock.json
  package.json
  readme.md
  webpack.config.js
  </code></pre>
  <p><strong>webpack.config.js</strong></p>
  <pre><code>'use strict';
  var path = require('path');
  var webpack = require('webpack');
  var ExtractTextPlugin = require('extract-text-webpack-plugin');
  var HtmlWebpackPlugin = require('html-webpack-plugin');
  var InterpolateHtmlPlugin = require('react-dev-utils/InterpolateHtmlPlugin');
  var autoprefixer = require('autoprefixer');
  
  /**
   * webpack.config.js 可以 export 一个 object，或者是一个 env 为参数的 function
   */
  module.exports = function (env) {
      /**
       * 判断是否是生产环境。 当命令行运行 `webpack --env.production` 时， env.production 的值为 true
       * https://webpack.js.org/configuration/configuration-types/#exporting-a-function-to-use-env
       */
      const isProduction = env &amp;&amp; env.production === true;
  
      return {
          // 设定代码的入口，入口可以是一个或者多个，即可以传入一个 array
          // https://webpack.js.org/configuration/entry-context/
          context: path.resolve(__dirname, &quot;src&quot;),
          entry: './index.js',
  
          // 打包好的代码存放的位置和文件名
          // 这里的 [name].[hash].js 的格式意味着会自动生成一个带 hash 的文件名
          // https://webpack.js.org/configuration/output/
          output: {
              path: path.resolve(__dirname, 'build'),
              filename: 'static/js/[name].[hash].js'
          },
  
          module: {
              /**
               *  loader 相当于一个预处理器。
               *  因为正常来说，webpack 只能解析 js，因此，如果过我们要引入非 js 的模块
               *  就需要一个预处理器来告诉 webpack 该如何处理这个文件，比如 css、图片等
               *  https://webpack.js.org/concepts/loaders/
               */
              loaders: [
                  /**
                   * eslint-loader
                   * 在构建之前，自动进行 eslint 检查
                   * 这里的配置设定为，如果有 error，那么就不能继续构建
                   * https://github.com/MoOx/eslint-loader
                   */
                  {
                      enforce: &quot;pre&quot;,
                      test: /\.js$/,
                      include: path.resolve(__dirname, 'src'),
                      loader: &quot;eslint-loader&quot;,
                      options: {
                          failOnError: true,
                          fix: true
                      }
                  },
                  /**
                   * babel-loader
                   * 将 es6 转化为 es5
                   * https://github.com/babel/babel-loader
                   */
                  {
                      test: /\.(js|jsx)$/,
                      include: path.resolve(__dirname, 'src'),
                      loader: 'babel-loader',
                      query: {
                          babelrc: false,
                          presets: [require.resolve('babel-preset-react-app')],
                      },
                  },
                  /**
                   * css-loader &amp; style-loader
                   *  用来处理代码中 import './style.css' 的情况
                   *  如果是开发环境，那么作为 style 标签插入到 html 中
                   *  如果是正式环境，那么生成单独的文件，作为 link 插入的 html 中
                   *  https://github.com/webpack-contrib/css-loader
                   *  https://github.com/webpack-contrib/style-loader
                   */
                  {
                      test: /\.css$/,
                      loader: isProduction ?
                          ExtractTextPlugin.extract({ fallback: 'style-loader', use: [
                              {
                                  loader: require.resolve('css-loader')
                              },
                              {
                                  loader: require.resolve('postcss-loader'),
                                  options: {
                                      plugins: () =&gt; [
                                          require('postcss-flexbugs-fixes'),
                                          autoprefixer({
                                              browsers: [
                                                  '&gt;1%',
                                                  'last 4 versions',
                                                  'Firefox ESR',
                                                  'not ie &lt; 9',
                                              ],
                                              flexbox: 'no-2009',
                                          }),
                                      ],
                                  },
                              }
                          ] }) :
                          [ 'style-loader', 'css-loader', ]
                  },
                  /**
                   * json-loader
                   * https://github.com/webpack-contrib/json-loader
                   */
                  {
                      test: /\.json$/,
                      loader: 'json-loader'
                  },
                  // &quot;file&quot; loader for svg
                  // https://github.com/webpack-contrib/file-loader
                  {
                      test: /\.svg$/,
                      loader: 'file-loader',
                      query: {
                          name: 'static/media/[name].[hash:8].[ext]'
                      }
                  }
              ]
          },
          /**
           * plugin 是 webpack 完成各种复杂功能的核心
           * 比如，这里面用的 HtmlWebpackPlugin，即可将生成的 js，生成 script 标签插入到指定的 html 里
           * 又比如，ExtractTextPlugin 可以加 css 生成 link 插入
           * https://webpack.js.org/concepts/plugins/
           */
          plugins: [
              new InterpolateHtmlPlugin({
                  PUBLIC_URL: '' // 用于替换 index.html 里面的 %PUBLIC_URL%
              }),
              new HtmlWebpackPlugin({
                  inject: true,
                  template: '../public/index.html',
                  minify: {
                      removeComments: true,
                      collapseWhitespace: true,
                      removeRedundantAttributes: true,
                      useShortDoctype: true,
                      removeEmptyAttributes: true,
                      removeStyleLinkTypeAttributes: true,
                      keepClosingSlash: true,
                      minifyJS: true,
                      minifyCSS: true,
                      minifyURLs: true
                  }
              }),
              new ExtractTextPlugin('static/css/[name].[hash].css'),
              new webpack.HotModuleReplacementPlugin(), // 用于热加载
              // 可以替换代码中的变量
              // https://webpack.js.org/plugins/define-plugin/#use-case-service-urls
              new webpack.DefinePlugin({
                  'SERVICE_URL': isProduction ?
                      JSON.stringify(&quot;http://pro.example.com&quot;) :
                      JSON.stringify(&quot;http://dev.example.com&quot;),
                  &quot;process.env&quot;: {
                      NODE_ENV: isProduction ?
                          JSON.stringify(&quot;production&quot;) :
                          JSON.stringify(&quot;development&quot;)
                  }
              })
          ],
          /**
           * webpack 自带的开发 server，配合 webpack-dev-server 命令使用
           * https://webpack.js.org/guides/development/#webpack-dev-server
           * https://webpack.js.org/configuration/dev-server/
           */
          devServer:{
              hot: true,
              contentBase: path.join(__dirname, &quot;public&quot;),
              compress: true,
              port: 9000,
              publicPath: '/',
              // 设置代理，比如，请求 /api/abc 会代理制 http://localhost:7000/abc
              // https://webpack.js.org/configuration/dev-server/#devserver-proxy
              // https://github.com/chimurai/http-proxy-middleware#http-proxy-middleware-options
              proxy: {
                  &quot;/api&quot;: {
                      target: &quot;http://localhost:7000/&quot;,
                      pathRewrite: {&quot;^/api&quot; : &quot;&quot;},
                      secure: false,
                      changeOrigin: true
                  }
              }
          },
          // 为压缩以后的代码提供 source map 方便调试
          // https://webpack.js.org/configuration/devtool/
          devtool: isProduction ?
              'hidden-source-map' :
              'cheap-module-eval-source-map',
      };
  }
  </code></pre>
  <p><strong>package.json</strong></p>
  <pre><code>{
      &quot;name&quot;: &quot;frontend&quot;,
      &quot;dependencies&quot;: {
          &quot;react&quot;: &quot;^15.5.4&quot;,
          &quot;react-dom&quot;: &quot;^15.5.4&quot;
      },
      &quot;version&quot;: &quot;0.1.0&quot;,
      &quot;devDependencies&quot;: {
          &quot;autoprefixer&quot;: &quot;^7.1.1&quot;,
          &quot;babel-core&quot;: &quot;^6.24.1&quot;,
          &quot;babel-eslint&quot;: &quot;^7.2.3&quot;,
          &quot;babel-loader&quot;: &quot;^7.0.0&quot;,
          &quot;babel-preset-react-app&quot;: &quot;^2.2.0&quot;,
          &quot;css-loader&quot;: &quot;^0.28.1&quot;,
          &quot;eslint&quot;: &quot;^3.19.0&quot;,
          &quot;eslint-config-airbnb&quot;: &quot;^15.0.1&quot;,
          &quot;eslint-loader&quot;: &quot;^1.7.1&quot;,
          &quot;eslint-plugin-import&quot;: &quot;^2.2.0&quot;,
          &quot;eslint-plugin-jsx-a11y&quot;: &quot;^5.0.1&quot;,
          &quot;eslint-plugin-react&quot;: &quot;^7.0.1&quot;,
          &quot;extract-text-webpack-plugin&quot;: &quot;^2.1.0&quot;,
          &quot;file-loader&quot;: &quot;^0.11.1&quot;,
          &quot;html-webpack-plugin&quot;: &quot;^2.28.0&quot;,
          &quot;json-loader&quot;: &quot;^0.5.4&quot;,
          &quot;postcss-flexbugs-fixes&quot;: &quot;^3.0.0&quot;,
          &quot;postcss-loader&quot;: &quot;^2.0.5&quot;,
          &quot;react-dev-utils&quot;: &quot;^1.0.0&quot;,
          &quot;style-loader&quot;: &quot;^0.17.0&quot;,
          &quot;webpack&quot;: &quot;^2.5.1&quot;,
          &quot;webpack-dev-server&quot;: &quot;^2.4.5&quot;
      },
      &quot;scripts&quot;: {
          &quot;start&quot;: &quot;node scripts/start.js&quot;,
          &quot;build&quot;: &quot;export NODE_ENV=production &amp;&amp; rm -rf ./build &amp;&amp; webpack --env.production --optimize-minimize&quot;
      }
  }
  </code></pre>
  <p><strong>src/App.js</strong></p>
  <pre><code>import React, { Component } from 'react';
  import logo from './logo.svg';
  import './App.css';
  
  class App extends Component {
      state = { loading: false };
  
      componentDidMount() {
          // 测试 devServer 的代理功能
          // fetch('/api/category')
          //     .then(resp =&gt; resp.json())
          //     .then(res =&gt; console.log('here here', res));
      }
  
      render() {
          return (
              &lt;div className=&quot;App&quot;&gt;
                  &lt;div className=&quot;App-header&quot;&gt;
                      &lt;img src={logo} className=&quot;App-logo&quot; alt=&quot;logo&quot; /&gt;
                      &lt;h2&gt;Welcome to React&lt;/h2&gt;
                  &lt;/div&gt;
                  &lt;p&gt;{ this.state.loading.toString() }&lt;/p&gt;
                  &lt;p className=&quot;App-intro&quot;&gt;
            To get started, edit &lt;code&gt;src/App.js&lt;/code&gt; and save to reload.
          &lt;/p&gt;
              &lt;/div&gt;
          );
      }
  }
  
  export default App;
  
  </code></pre>
  <p>Does anyone have an idea of what could cause this, and how to fix it?</p>
  <p>Thanks in advance</p>