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.
Related
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.
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
I'm using yarn to develop local lib for React. because you can't run 2 versions of React I'm usually doing npm link ..\node_modules\react in the test project to use the same react version as my linked package.
but I don't want to use npm, so I tried yarn link ..\node_modules\react which does not work, and also the docs does not mention an option to do so.
I need to cd ..\node_modules\react and then yarn link then I could do yarn link react - but wants to avoid it, because who knows how many projects will need different versions of React.
so, there is a way to yarn link a directory that includes package.json file(yarn link <relative-path>)?
I'm just starting out in Reactjs.
I have a RedHat Linux VM.
I've installed nodejs and created a simple reactjs application:
npx create-react-app my-first-project
My first project works OK.
Now I have found this great reactjs package with a demo:
https://github.com/TarikHuber/material-ui-filter
I want to install the demo part of this package that consists of index.css, index.html, app.js, index.js
How would I go with this?
Where do I put this new code relative to my-first-project?
How do I call this new code?
The package I think calls redux so I assume I will install this first.
Thanks.
You should learn how npm works. If you find some cool package and you want to use it then you have to install that package. There is a installation command on Readme file on that github repo. Install package via npm install material-ui-filter then you can just use the html file on demo project.
I want to contribute to an open source React Component and I'd like to use a fork of the project in my webpack bundle.
I am using yarn and I tried to install my fork using
yarn add github:Startouf/react-coverflow
However, when webpack tries to compile my bundle, it raises weird errors
ERROR in ./~/react-coverflow/main.js
Module not found: Error: Can't resolve './dist/react-coverflow' in '/Users/Cyril/dev/MyApp/client/node_modules/react-coverflow'
Did I miss something ?
EDIT : when I use the released package from npm, the node module folder contains
LICENSE README.md dist main.js package.json
When I use my fork, it seems like the project isn't compiled and contains
LICENSE README.md package.json src webpack.config.js
Makefile main.js site test
Seems like I'm missing a step... I though doing yarn add with a github fork would automatically make a release but seems like I'm wrong ?
Unfortunately, using a repository directly as source can result in execution error. This is because it's not bundled at all, while the package expects an prebuilt version existing in dist. The bundling scripts are often executed before publishing releases to npm.
Some workarounds are:
execute the prepublish step in the target directory (this depends on
what the project uses)
of course, using the published version is the best. create your own package on npm and upload it.
References: npm issue
The package should be updated to include a prepare step.
A prepare step does exactly what you want in all cases.
https://stackoverflow.com/a/57503862/4612476
You can add the prepare script in package.json#scripts yourself that runs the build. Npm and Yarn will then automatically run the prepare script on install directly from GitHub. You can then treat it like any other package and it will always just work™.
Don't forget the package.json#files section. See the linked answer for more details.