# How to extend bud-react eslint config?

**URL:** https://discourse.roots.io/t/how-to-extend-bud-react-eslint-config/22495
**Category:** bud
**Tags:** bud, eslint, sage10
**Created:** 2022-03-08T15:13:26Z
**Posts:** 3

## Post 1 by @mrmadhat — 2022-03-08T15:13:26Z

I’m building a site that uses the latest version of Sage 10, the site also uses react so I’ve added `@roots/bud-react` and I’m attempting to setup my eslint config so that it extends bud-react. Everything seems to be working until I try to save a js file and I get the following error:

> Failed to load config “@roots/bud-babel” to extend from.
> 
> Referenced from: /…root-to-theme…/node\_modules/@roots/bud-react/eslint-config/index.js

My `.eslintrc.js` :

```
{
  root: true,
  extends: [require.resolve('@roots/bud-react/eslint-config')],
}
```

---

## Post 2 by @kellymears — 2022-03-09T01:50:26Z

Sage’s config includes `@roots/bud-react` out-of-the-box.

```
`@roots/eslint-config/sage` -> `@roots/eslint-config/wordpress` -> `@roots/eslint-config/react`.
```

All of Roots’ `eslint` configurations have been moved to `@roots/eslint-config`. You do need to import it as of the current Sage release (it does not ship with Sage).

Here is a config with a couple react rules enabled:

```
module.exports = {
  root: true,
  extends: ['@roots/eslint-config/sage'],
  rules: {
    'react/jsx-uses-react': 'error',
    'react/jsx-uses-vars': 'error',
  },
};
```

---

## Post 3 by @mrmadhat — 2022-03-09T09:48:37Z

Updating my config to match yours and adding eslint-config fixed the issue, thanks!