How to Yarn add a specific branch/workspace - reactjs

I forked react-select to add a couple of features that the current react-select doesn't have. I created a branch and committed it to my forked project. Now, i want to use the forked project.
Ive tried installing the forked react-select repo the following ways with out success.
yarn add #react-select/monorepo#<GithubUsername>/react-select#head=<Name of branch>&workspace=react-select
yarn add #react-select/monorepo#<GithubUsername>/react-select#commit=<commit#>&workspace=react-select
yarn add #react-select/<github url>#head=<Name of branch>&workspace=react-select
I've tried it with ssh, with git+. with everything that the yarn website says and all i get is react-select installed but i don't see the code changes thats in my branch.
I've also tried to install the react-select package that the monorepo uses, but i get the following error
yarn add react-select#https://github.com/<USERNAME>/react-select/tree/master/packages/react-select
Failed with errors in 0s 290ms
(node:11491) UnhandledPromiseRejectionWarning: Error: react-
select#https://github.com/USERNAME/react-
select/tree/master/packages/react-select isn't supported by
any available resolver
i am using yarn 2.4.2
Has anyone dealt with this?
Any solution besides just copying the folder and installing it from a file path?

I had the same issue but upgrading to yarn version 2 worked. The following syntax for adding workspaces only starts working from yarn 2 on:
yarn add #react-select/monorepo#<GithubUsername>/react-select#head=<Name of branch>&workspace=react-select

Related

Fork pancakeswap frontend

Trying to fork pancakeswap from https://github.com/pancakeswap/pancake-frontend.
Steps what I did,
Clone Repo
Run npm install command
Run npm start command
Solve some no-used props error by commenting that props. After that also 2 errors are still in application.
Error1: JSX props should not use functions react/jsx-no-bind
Error2: defaultProp "expanded" has no corresponding propTypes declaration react/default-props-match-prop-types
Help me to solve this. Stuck more than 5 days. Searched many pages but no use. Most of them are suggested to change jsx functions. Is there is any simple way to solve these errors?
I did the same yesterday and it worked. There are still some elements that I need to figure out, but to make it running on localhost wasn't hard.
Before running pancakeswap frontend we need to have nodejs installed. Should work with any version 16, my was v16.14.0. Second is to have installed yarn as they don't use npm. This we know because the project has yarn.lock file. Third is have nextjs installed globally like yarn. With this we should be able to install and run the app.
Next steps would be:
Clone repo or just download it, will work as well
Run yarn install command (or just yarn - works the same)
Run yarn build (this will call next build)
Run yarn start (this will call next start)
After last step the app should start on localhost:3000
This is what I did and it worked. Keep in mind that this is valid for the current version and could change in future.

Ant Design Cannot find module 'rc-textarea'

I just created an Umi Ant Design Pro project but when i run my project (yarn start),i am getting the following error:
Steps taken to resolve this issue:
1:installed rc-textarea:
yarn add rc-textarea
2:stopped my server and ran yarn again in my terminal
3:then ran yarn start to start my server and still got the same error although my terminal this time stopped displaying the error i keep getting in my browser as seen below:
Step4:I then did some Research and came across this link
Git Memory Blog
But the path : ./node_modules/antd/es/input/TextArea.js does not exist in my project.
I also found a github link with a similar issue:
GithubIssue
Other solutions did not work so i tried wbcs's solution:
yarn cache clean
yarn install
But the error is still eminent.
My inspection window indicates that this is a possible webpack issue:
How do i resolve this?
Try removing .umi and node_modules folders, and then start this project again.

yarn link error No registered package found called

I'm developing an npm package for custom React Hooks. And using yarn for package management. The custom hooks are in the src directory, and to prevent posting the wrong code to npm, I've created a new demo folder locally at the same level as src.
To test my hooks code locally, I bundled my hooks and used yarn link to link it in my demo project smoothly as if I installed it from the registry. And next I run yarn start in my demo folder to run my test project. But it reminded me Invalid Hook Call Warning in the Chrome console.
After reading this article I knew that it is because I used duplicate React, So I tried to this command: yarn link ../node_modules/react but it just told me
error No registered package found called "../node_modules/react".
info Visit https://yarnpkg.com/en/docs/cli/link for documentation about this command.
But when I tried to use npm link ../node_modules/react there is no error reported. I can start my test project smoothly.
But here comes the problem: I am using yarn for package management and it has its own lock file yarn.lock. If I want to run my test project, I had to run npm link ../node_modules/react, this step will generate a npm lock file which is a Redundancy for me.
So how can I use yarn link ../node_modules/react instead of npm link ../node_modules/react to link a same version React?
Here is the whole repository
I will assume this question is still relevant because I stumbled upon it while looking for the answer myself. I managed to figure it out eventually.
The yarn link docs state the following:
This command is run in the package folder you’d like to consume.
In order to create a link for React, you have to cd ../node_modules/react and then yarn link while in that directory. You can then use yarn link react from the other side to consume the linked package.
For the record, it doesn't look like it matters which side you create the link from (the library or the consumer) as long as the other side makes use of it.

Issue with prism-react-renderer highlighting in production build in Gatsby

I am facing an issue with code highlighting when using prism-react-renderer component in Gatsby. I have configured it as per instructions in FormidableLabs/prism-react-renderer.
Everything works in development mode, but when I build a production version with the gatsby build command, the pre tag is not decorated with prism classes (class="prism-code language-python" is missing). My guess is that the production build does not include the right component or CSS, but I don't know where to start looking.
Also, this issue was not present when I used the same code 7-8 months back in another project. So it may be a problem introduced in the past few months because of a plugin/component update.
Attached are two screenshots - one with gatsby develop and another with gatsby build.
Commands I ran to setup and install the requisites:
> gatsby new test-mdx-prism-rendering https://github.com/gatsbyjs/gatsby-starter-hello-world
> npm install --save gatsby-plugin-mdx #mdx-js/mdx #mdx-js/react
> npm install --save mdx-utils
> npm install --save prism-react-renderer
Sample GitHub project is at subhashb/test-mdx-prism-rendering
Found the answer as I tried to dig deeper.
The workaround is discussed here: https://github.com/ChristopherBiscardi/gatsby-mdx/issues/394
Apparently, the wrapRootElement defined in gatsby-browser.js should be made available in gatsby-ssr.js as well.

Error on running a project after installing a package

I was running my project finely, but I merge my code with other which contain a package called react-modal, after that my code doesn't work. I revert that code from my project, but it doesn't work, I can't even run my project. "cannot read properties of undefined" error is occuring. I upgrade all my packages like webpack, webpack cli etc, but it doesn't helps. What I need to do to run my project?
Well you can do two things here.
First to revert your code back to your latest code before merge.
Run the below command to delete Node_modules npm prune --production
and then run npm install and then build your project.

Resources