Reactjs module build error

Question

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

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.

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

// @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 =>
  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 <style> 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: () => [
                require('postcss-flexbugs-fixes'),
                autoprefixer({
                  browsers: [
                    '>1%',
                    'last 4 versions',
                    'Firefox ESR',
                    'not ie < 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 <script> 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,
 },
 };

Can any one guide me how to come out of this build error.

Answer 1

This means eslint-plugin-import not available in your node_modules.

A fresh npm install eslint-plugin-import and restart the application should fix this issue.

If that didn't fix, try upgrading your npm version:

npm install -g npm@latest

Answer 2

Finally issue got resolved after installing few below packages globally:

eslint-config-react-app
eslint
babel-eslint
eslint-plugin-react
eslint-plugin-import 
eslint-plugin-jsx-a11y 
eslint-plugin-flowtype

And deleted package.lock.json file then ran npm install Finally npm start Its just worked. Thank you