Reactjs module build error

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
Module build failed: Error: Failed to load plugin import: Cannot find module 
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
// @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-
  const InterpolateHtmlPlugin = require('react-dev-
  const WatchMissingNodeModulesPlugin = require('react-dev-
  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 
   // See the discussion in
  devtool: 'cheap-module-source-map',

 entry: [
// We ship a few polyfills by default:
// 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'),
// Finally, this is your app's code:
// 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 
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`

  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(
  // @remove-on-eject-end
  // Support React Native Web
  'react-native': 'react-native-web',
    plugins: [
  // Prevents users from importing files from outside of src/ (or 

   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
  // { 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: [
            loader: require.resolve('css-loader'),
            options: {
              importLoaders: 1,
            loader: require.resolve('postcss-loader'),
            options: {
              // Necessary for external CSS imports to work

              ident: 'postcss',
              plugins: () => [
                  browsers: [
                    '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" 
        // 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.


Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 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 <a href="" class="__cf_email__" data-cfemail="fe908e93be929f8a9b8d8a">[email protected]</a>

Method 2

Finally issue got resolved after installing few below packages globally:


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

Method 3

Run this command:

"lint:fix": "eslint './src/**/*.{js,jsx}' --fix"

Then fixed all problems.
And Sure file “.eslint.js” has no any problem:
module.exports = {
  root: true,
  env: {
    browser: true,
    node: true,
  parserOptions: {
    parser: "babel-eslint",
    ecmaVersion: 2020,
    sourceType: "module",
  extends: ["plugin:react/recommended", "plugin:prettier/recommended"],
  plugins: [],
  rules: {
    "react/prop-types": 0,

All methods was sourced from or, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

0 0 votes
Article Rating
Notify of

Inline Feedbacks
View all comments
Would love your thoughts, please comment.x