Issue with ESLint using Yarn create react-app

I’ve primarily focused on backend development over the past 3 years at Mirakl. While I used to do much frontend development earlier in my career, I think I need to upgrade my frontend skills. To do so, I enrolled in this course I bought a while ago on Udemy.

During the course, I ran into an issue while trying to create a React app using yarn create react-app with Yarn version 4.5.3. The setup process didn’t go as smoothly as anticipated due to dependency conflicts and configuration challenges. In this post, I’ll walk you through the problems I encountered and the steps I took to resolve them.

This comment on GitHub provides a concise summary of the resolution. It helped me to fix this issue.

The initial setup

I started by running the following command to create a new React app:

yarn create react-app my-app

The project setup completed successfully. I tried to build the app:

yarn build

Unfortunately, I ran into trouble.

The first issue

During the build process, I encountered this error:

Creating an optimized production build...
Failed to compile.

[eslint] Failed to load config "react-app" to extend from.
Referenced from: /path/to/project/package.json

It indicated that the eslint-config-react-app configuration couldn’t be loaded, likely due to a missing or incompatible dependency.

Installing React ESLint plugin

To address the issue, I added the React ESLint plugin as a dev dependency:

yarn add eslint-plugin-react --dev

It resulted in a new error:

Creating an optimized production build...
Failed to compile.

[eslint] Plugin "react" was conflicted between "package.json » eslint-config-react-app » /path/to/.yarn/__virtual__/eslint-config-react-app-virtual.../node_modules/eslint-config-react-app/base.js" 
and "BaseConfig » /path/to/.yarn/__virtual__/eslint-config-react-app-virtual.../node_modules/eslint-config-react-app/base.js".

It arose due to multiple instances of the eslint-plugin-react package being loaded, which conflicted during the build process.

The solution: configuring .yarnrc.yml

To resolve the plugin conflict, I modified my project’s .yarnrc.yml file to ensure that all dependencies requiring eslint-plugin-react would use a single version. Here’s the configuration I added:

packageExtensions:
  eslint-config-react-app@*:
    peerDependencies:
      eslint-plugin-react: "*"

It tells Yarn to explicitly add eslint-plugin-react as a peer dependency for any version of eslint-config-react-app. By doing so, it ensures a consistent resolution for the React ESLint plugin.

After making this change, I reinstalled the dependencies.

Clearing Yarn’s cache

To ensure there were no stale or corrupted dependencies, I cleared Yarn’s cache and cleaned up the project environment:

yarn cache clean
rm -rf .yarn/cache .yarn/unplugged .yarn/build-state.yml .yarn/install-state.gz
yarn install

Here’s what each command does:

• yarn cache clean: Clears Yarn’s global cache, forcing fresh downloads of packages.
• rm -rf .yarn/cache .yarn/unplugged .yarn/build-state.yml .yarn/install-state.gz: Deletes project-specific Yarn directories and metadata to ensure no stale files remain.
• yarn install: Reinstalls all dependencies from scratch.

The final result

After cleaning the cache and reinstalling dependencies, I ran the build command again:

yarn build

This time, the build completed successfully.

Key Takeaways

1. Leverage .yarnrc.yml: Yarn’s advanced features, like packageExtensions, can resolve peer dependency issues and plugin conflicts.
2. Clean the Environment: Clearing Yarn’s cache and reinstalling dependencies was needed to definitely get rid of the issue.