Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – yarn build is failed due to eslint erros in react js project

I am working in React JS project and when I am trying to run the "yarn build" command, it’s failing due to eslint errors.

Please suggest how I can ignore eslint errors when I run the "yarn build" command.

I have listed below all the errors that are showing in the command prompt.

yarn build
yarn run v1.22.21
$ craco --max_old_space_size=4096 build
Creating an optimized production build...
One of your dependencies, babel-preset-react-app, is importing the
"@babel/plugin-proposal-private-property-in-object" package without
declaring it in its dependencies. This is currently working because
"@babel/plugin-proposal-private-property-in-object" is already in your
node_modules folder for unrelated reasons, but it may break at any time.

babel-preset-react-app is part of the create-react-app project, which
is not maintianed anymore. It is thus unlikely that this bug will
ever be fixed. Add "@babel/plugin-proposal-private-property-in-object" to
your devDependencies to work around this error. This will make this message
go away.

Failed to compile.
[eslint]
srcreduxsliceOrders.ts
  Line 43:8:   Prefer named exports                                           import/no-default-export
  Line 47:34:  Expected to return a value at the end of async arrow function  consistent-return

srcreduxstore.ts
  Line 3:8:  Using exported name 'orders' as identifier for default export  import/no-named-as-default

srcviewsLayoutOrdersLayout.tsx
  Line 12:8:  Prefer named exports  import/no-default-export

srcviewsOrdersViewOrdersTable.tsx
  Line 73:24:   The href attribute requires a valid value to be accessible. Provide a valid, navigable address as the href value. If you cannot provide a valid href, but still need the element to resemble a link, use a button and change it with appropriate styles. Learn more: https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/HEAD/docs/rules/anchor-is-valid.md  jsx-a11y/anchor-is-valid
  Line 123:1:   This line has a length of 148. Maximum allowed is 120
                                                                           max-len
  Line 123:29:  Do not nest ternary expressions
                                                                           no-nested-ternary
  Line 123:43:  Expected '===' and instead saw '=='
                                                                           eqeqeq
  Line 124:1:   This line has a length of 146. Maximum allowed is 120
                                                                           max-len
  Line 124:37:  Expected '===' and instead saw '=='
                                                                           eqeqeq
  Line 136:44:  Expected '===' and instead saw '=='
                                                                           eqeqeq
  Line 136:74:  The href attribute requires a valid value to be accessible. Provide a valid, navigable address as the href value. If you cannot provide a valid href, but still need the element to resemble a link, use a button and change it with appropriate styles. Learn more: https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/HEAD/docs/rules/anchor-is-valid.md  jsx-a11y/anchor-is-valid
  Line 137:23:  The href attribute requires a valid value to be accessible. Provide a valid, navigable address as the href value. If you cannot provide a valid href, but still need the element to resemble a link, use a button and change it with appropriate styles. Learn more: https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/HEAD/docs/rules/anchor-is-valid.md  jsx-a11y/anchor-is-valid
  Line 154:31:  Array.prototype.map() expects a return value from arrow function
                                                                           array-callback-return
  Line 175:25:  Expected '===' and instead saw '=='
                                                                           eqeqeq
  Line 201:1:   File has too many lines (251). Maximum allowed is 200
                                                                           max-lines
  Line 218:29:  Fragments should contain more than one child - otherwise, there’s no need for a Fragment at all

                                                                           react/jsx-no-useless-fragment

srcviewsOrdersViewOrdersView.tsx
  Line 2:34:  'Status' is defined but never used. Allowed unused vars must match /^_/u  @typescript-eslint/no-unused-vars
  Line 2:42:  'Table' is defined but never used. Allowed unused vars must match /^_/u   @typescript-eslint/no-unused-vars

Search for the keywords to learn more about each error.

error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
Tags:

2

Answers


  1. 0

    As of react-scripts v4.0.2, you can now opt out of ESLint with an environment variable. You can do this by adding it to your .env file, or by prefixing your scripts in your package.json file.

    For example in .env:

    DISABLE_ESLINT_PLUGIN=true

    Or in your package.json:

    {
  "scripts": {
    "start": "DISABLE_ESLINT_PLUGIN=true react-scripts start",
    "build": "DISABLE_ESLINT_PLUGIN=true react-scripts build",
    "test": "DISABLE_ESLINT_PLUGIN=true react-scripts test"
  }
}
    Login or Signup to reply.
  2. 0

    You can disable eslint (and override other configurations) using Craco.

    It takes 4 changes:

    1. npm install @craco/craco --save
    2. create craco.config.js (in the same folder as is package.json)
    3. populate craco.config.js with:
    module.exports = {
  eslint: {
    enable: false,
  },
};
    1. Finally, replace react-script with craco in your package.json scripts, i.e.
    "scripts": {
  "build": "craco build",
  "start": "craco start",
}

    This will disable ESLint. Refer to Craco documentation for examples how to extend ESLint configuration.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search