title: Build error while compiling create-react-app
body: <p>I am new to Reactjs and am started learning it. I have been trying to start a basic hello world program but its failing at compilation level.
  Created a start up hello-word program with create-react-app hello-world it gave me a nice folder structure with bunch of files. 
  And Here you can see the compilation error</p>
  
  <pre><code>Failed to compile
  ./src/index.js
  Module build failed: Error: Failed to load plugin import: Cannot find module 
  'eslint-plugin-import'
  Referenced from: 
  at Array.forEach (native)
  at Array.reduceRight (native)
  This error occurred during the build time and cannot be dismissed.
  </code></pre>
  
  <p>Here the error states cannot find module so i tried to install eslint plugin import ,standard ..etc but still its not worked.
  Below is my webpack.config.dev.js</p>
  
  <pre><code>// @remove-on-eject-begin
  /**
  * Copyright (c) 2015-present, Facebook, Inc.
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
   */
  // @remove-on-eject-end
  'use strict';
  
   const autoprefixer = require('autoprefixer');
     const path = require('path');
    const webpack = require('webpack');
    const HtmlWebpackPlugin = require('html-webpack-plugin');
    const CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-
    plugin');
    const InterpolateHtmlPlugin = require('react-dev-
    utils/InterpolateHtmlPlugin');
    const WatchMissingNodeModulesPlugin = require('react-dev-
    utils/WatchMissingNodeModulesPlugin');
    const eslintFormatter = require('react-dev-utils/eslintFormatter');
    const ModuleScopePlugin = require('react-dev-utils/ModuleScopePlugin');
    const getClientEnvironment = require('./env');
    const paths = require('./paths');
  
  
   const env = getClientEnvironment(publicUrl);
  
    module.exports = {
    // You may want 'eval' instead if you prefer to see the compiled output in 
   DevTools.
     // See the discussion in https://github.com/facebookincubator/create-
    react-app/issues/343.
    devtool: 'cheap-module-source-map',
  
   entry: [
  // We ship a few polyfills by default:
  require.resolve('./polyfills'),
  // Include an alternative client for WebpackDevServer. A client's job is to
  // connect to WebpackDevServer by a socket and get notified about changes.
  // When you save a file, the client will either apply hot updates (in case
  // of CSS changes), or refresh the page (in case of JS changes). When you
  // make a syntax error, this client will display a syntax error overlay.
  // Note: instead of the default WebpackDevServer client, we use a custom one
  // to bring better experience for Create React App users. You can replace
  // the line below with these two lines if you prefer the stock client:
  // require.resolve('webpack-dev-server/client') + '?/',
  // require.resolve('webpack/hot/dev-server'),
  require.resolve('react-dev-utils/webpackHotDevClient'),
  // Finally, this is your app's code:
  paths.appIndexJs,
  // We include the app code last so that if there is a runtime error during
  // initialization, it doesn't blow up the WebpackDevServer client, and
  // changing JS code would still trigger a refresh.
   ],
   output: {
  // Next line is not used in dev but WebpackDevServer crashes without it:
  path: paths.appBuild,
  // Add /* filename */ comments to generated require()s in the output.
  pathinfo: true,
  // This does not produce a real file. It's just the virtual path that is
  // served by WebpackDevServer in development. This is the JS bundle
  // containing code from all our entry points, and the Webpack runtime.
  filename: 'static/js/bundle.js',
  // There are also additional JS chunk files if you use code splitting.
  chunkFilename: 'static/js/[name].chunk.js',
  // This is the URL that app is served from. We use "/" in development.
  publicPath: publicPath,
  // Point sourcemap entries to original disk location (format as URL on 
  Windows)
  devtoolModuleFilenameTemplate: info =&gt;
    path.resolve(info.absoluteResourcePath).replace(/\\/g, '/'),
   },
   resolve: {
  
   modules: ['node_modules', paths.appNodeModules].concat(
    // It is guaranteed to exist because we tweak it in `env.js`
    process.env.NODE_PATH.split(path.delimiter).filter(Boolean)
    ),
  
    extensions: ['.web.js', '.js', '.json', '.web.jsx', '.jsx'],
    alias: {
    // @remove-on-eject-begin
    // Resolve Babel runtime relative to react-scripts.
    // It usually still works on npm 3 without this but it would be
    // unfortunate to rely on, as react-scripts could be symlinked,
    // and thus babel-runtime might not be resolvable from the source.
    'babel-runtime': path.dirname(
      require.resolve('babel-runtime/package.json')
    ),
    // @remove-on-eject-end
    // Support React Native Web
    // https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-
    with-react-native-for-web/
    'react-native': 'react-native-web',
     },
      plugins: [
    // Prevents users from importing files from outside of src/ (or 
     node_modules/).
  
     new ModuleScopePlugin(paths.appSrc, [paths.appPackageJson]),
     ],
    },
    module: {
    strictExportPresence: true,
     rules: [
    // TODO: Disable require.ensure as it's not a standard language feature.
    // We are waiting for https://github.com/facebookincubator/create-react-
    app/issues/2176.
    // { parser: { requireEnsure: false } },
  
    // First, run the linter.
    // It's important to do this before Babel processes the JS.
    {
      test: /\.(js|jsx)$/,
      enforce: 'pre',
      use: [
        {
          options: {
            formatter: eslintFormatter,
            eslintPath: require.resolve('eslint'),
            // @remove-on-eject-begin
            baseConfig: {
              extends: [require.resolve('eslint-config-react-app')],
            },
            ignore: false,
            useEslintrc: false,
            // @remove-on-eject-end
          },
          loader: require.resolve('eslint-loader'),
        },
        ],
      include: paths.appSrc,
      },
     {
      // "oneOf" will traverse all following loaders until one will
      // match the requirements. When no loader matches it will fall
      // back to the "file" loader at the end of the loader list.
      oneOf: [
  
  
        {
          test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/],
          loader: require.resolve('url-loader'),
          options: {
            limit: 10000,
            name: 'static/media/[name].[hash:8].[ext]',
          },
        },
        // Process JS with Babel.
        {
          test: /\.(js|jsx)$/,
          include: paths.appSrc,
          loader: require.resolve('babel-loader'),
          options: {
            // @remove-on-eject-begin
            babelrc: false,
            presets: [require.resolve('babel-preset-react-app')],
  
            cacheDirectory: true,
          },
        },
        // "postcss" loader applies autoprefixer to our CSS.
        // "css" loader resolves paths in CSS and adds assets as dependencies.
        // "style" loader turns CSS into JS modules that inject &lt;style&gt; tags.
        // In production, we use a plugin to extract that CSS to a file, but
        // in development "style" loader enables hot editing of CSS.
        {
          test: /\.css$/,
          use: [
            require.resolve('style-loader'),
            {
              loader: require.resolve('css-loader'),
              options: {
                importLoaders: 1,
              },
            },
            {
              loader: require.resolve('postcss-loader'),
              options: {
                // Necessary for external CSS imports to work
  
                ident: 'postcss',
                plugins: () =&gt; [
                  require('postcss-flexbugs-fixes'),
                  autoprefixer({
                    browsers: [
                      '&gt;1%',
                      'last 4 versions',
                      'Firefox ESR',
                      'not ie &lt; 9', // React doesn't support IE8 anyway
                    ],
                    flexbox: 'no-2009',
                  }),
                ],
              },
            },
          ],
        },
  
        {
          // Exclude `js` files to keep "css" loader working as it injects
          // it's runtime that would otherwise processed through "file" 
        loader.
          // Also exclude `html` and `json` extensions so they get processed
          // by webpacks internal loaders.
          exclude: [/\.js$/, /\.html$/, /\.json$/],
          loader: require.resolve('file-loader'),
          options: {
            name: 'static/media/[name].[hash:8].[ext]',
          },
          },
         ],
       },
  
       ],
     },
      plugins: [
  
     new InterpolateHtmlPlugin(env.raw),
      // Generates an `index.html` file with the &lt;script&gt; injected.
     new HtmlWebpackPlugin({
       inject: true,
       template: paths.appHtml,
        }),
  
      new webpack.NamedModulesPlugin(),
  
     new webpack.DefinePlugin(env.stringified),
  
     new webpack.HotModuleReplacementPlugin(),
  
      new CaseSensitivePathsPlugin(),
  
     new WatchMissingNodeModulesPlugin(paths.appNodeModules),
  
      new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
     ],
  
    node: {
  dgram: 'empty',
  fs: 'empty',
  net: 'empty',
  tls: 'empty',
  child_process: 'empty',
   },
  
    performance: {
      hints: false,
   },
   };
  </code></pre>
  
  <p>Can any one guide me how to come out of this build error.</p>