Скачать или смотреть Fixing Yarn's Import Restrictions for React in Vite Projects

Learn how to solve the Yarn Plug'n'Play import error for React in your ViteJS projects with simple steps to configure your environment correctly.
---
This video is based on the question https://stackoverflow.com/q/76015181/ asked by the user 'TugboatCaptain' ( https://stackoverflow.com/u/550073/ ) and on the answer https://stackoverflow.com/a/76018331/ provided by the user 'TugboatCaptain' ( https://stackoverflow.com/u/550073/ ) at 'Stack Overflow' website. Thanks to these great users and Stackexchange community for their contributions.

Visit these links for original content and any more details, such as alternate solutions, latest updates/developments on topic, comments, revision history etc. For example, the original title of the Question was: The Yarn Plug'n'Play manifest forbids importing "XYZ" here because it's not listed as a dependency of this package

Also, Content (except music) licensed under CC BY-SA https://meta.stackexchange.com/help/l...
The original Question post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license, and the original Answer post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license.

If anything seems off to you, please feel free to write me at vlogize [AT] gmail [DOT] com.
---
Resolving Yarn’s Import Restrictions for React in Vite Projects

When developing web applications with Yarn, Vite, and React, it’s not uncommon to run into issues that can halt your progress. One particularly frustrating problem developers encounter is the error: “The Yarn Plug'n'Play manifest forbids importing 'react' here because it's not listed as a dependency of this package.” This error can surface when trying to install or run third-party packages that rely on React. In this guide, we’ll explore what causes this issue and how you can effectively resolve it.

Understanding the Problem

The error message indicates that Yarn's Plug'n'Play (PnP) feature is in conflict with how your project is structured. Plug'n'Play is a way Yarn manages dependencies without utilizing the node_modules directory. Instead, it creates a manifest that tracks package dependencies. If a package tries to import an external module that isn’t declared in the dependency manifest, Yarn will throw this error.

In your situation, while developing a project built with Vite, you encounter this error repeatedly for various third-party packages. It's particularly jarring when trying to include a critical dependency like React itself.

Steps to Resolve the Error

Fortunately, fixing this issue is relatively straightforward. Follow these organized steps to configure your Yarn settings appropriately and allow React to be recognized as a valid dependency.

Step 1: Modify the .yarnrc.yml File

The first action you should take is to adjust the pnpMode in your .yarnrc.yml file. This mode determines how strictly Yarn adheres to the dependencies defined in your manifest.

Change the pnpMode setting as follows:

[[See Video to Reveal this Text or Code Snippet]]

By changing the value to "loose", you're allowing Yarn to resolve your dependencies more flexibly, which should help rectify the import issue with React and other similar errors.

Step 2: Re-Run Yarn Install

After you’ve made the above change to the .yarnrc.yml file, it’s important to re-install your packages. This ensures that your dependencies are set up correctly under the modified configuration.

Run the following command in your terminal:

[[See Video to Reveal this Text or Code Snippet]]

Step 3: Start the Development Server

Once you've re-installed the dependencies, it’s time to run your development server again. Use the command:

[[See Video to Reveal this Text or Code Snippet]]

At this point, if everything has been set up correctly, your development server should start without any errors regarding the import of React.

Conclusion

In this guide, we addressed a common problem faced by developers using Yarn with Vite and React. The error message regarding Yarn Plug'n'Play can be resolved by adjusting the pnpMode to "loose" in your .yarnrc.yml file, followed by re-installing the packages and starting your development server. By following these steps, you can streamline your development process and focus more on building your application rather than troubleshooting dependency issues.

Remember that while the solution provided here works, it’s essential to keep an eye on updates from Yarn or Vite that might address this issue differently in the future.

Happy coding!