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>)?
Related
The project I am working on currently uses pnpm as the package manager, I tried to install the react-boostrap library package in the project (pnpm i react-bootstrap) but this did not work. I also checked the node_module folder and there is a file of react-boostrap but it is not working.
i already search on internet but didn't get proper solution, so i tried this command pnpm i react-boostrap but didn't work.
remember i am using vite as front end tool.
pnpm 7.17.1
react 8.15.0
vite 8.15.0
You probably forgot to include css. You have to do it manually:
https://react-bootstrap.github.io/getting-started/introduction#stylesheets
I installed tailwindcss inside of my Next.js application. This was the error message that I received
error - ./node_modules/next/dist/client/dev/amp-dev.js
Error: Cannot find module 'xwind/babel'
This is how I installed the Next.js application:
npx create-next-app -e with-tailwindcss ./
These are the dependencies I installed:
npm install graphql graphql-request html-react-parser moment react-multi-carousel sass
Happened to me as well just few minutes ago. Not sure if that is the same case for you. It created for me components folder, .babelrc file and js files in pages folder. Not sure if that is your case, but that's what happened to me. In case just follow with solution below.
Solution
Remove .bablerc file and components folder along with js files in pages folder.
More details
This is strange because if you look at the repository of Next.js example with-tailwindcss. It doesn't have those. Not sure how that happened. We can elaborate more in the comments.
Also plugin for babel xwind/babel does have dependency check to allow only tailwindcss version <2. There is an issue for that. In my opinion this repo is unmaintained and will either get forked and replaced as a main for npm package or something similar.
The create-next-app is installing with-tailwind-emotion template instead of with-tailwind for some reason.
For now, a good way is to create a normal typescript template with create-next-app and add tailwind manually.
So your steps would be:
Step 1:
without typescript:
npx create-next-app ./
or with typescript:
npx create-next-app --ts ./
Step 2:
Docs to install tailwind with next.js:
https://tailwindcss.com/docs/guides/nextjs
I've installed 'react-image-gallery' library using yarn
yarn add react-image-gallery
And it now exists in my node_modules folder, but it says "Could not find a declaration file for module 'react-image-gallery'." when I try to import it.
How can I make it importable ?
When using some third-party packages as dependencies, not all of those packages are written in TypeScript. Therefore the packages developers provide also an installation for the type declarations if other developers want to use those types in their TypeScript projects.
In your case to install the package react-image-gallery :
first yarn add react-image-gallery
then (when usinig TypeScript) yarn add #types/react-image-gallery
If you want to know more about Type Declarations check this official link
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.
I'm developing my first big react app, which will be served dynamically by Express, so it came to my mind, that dependencies (not devDependencies) are just Express and maybe some deployment keep-running-eternally package, but not react, redux, react-router etc, which are conventionally mentioned in package.json deps. All my app is bundled and cooked before deployment, so how correct is it to mention react related deps as dependencies in config.json?
This library is, after I have tried several boiler plates for react server-side-rendering, the simplest! Unlike other libraries which consist a lot of complicated things at first (redux, relay, graphQL etc.,) this library gives detailed explanation on how to do isomorphic react app with the minimum set of only react express and few other necessary ones: (or course in ES6, too)
https://medium.com/front-end-hacking/server-side-rendering-with-react-and-express-382591bfc77c
You just need to install it:
npm install react-server-boilerplate --save
After that, build and start
cd react-server-boilerplate
npm install
npm run build
npm start
Then, use curl in your command line's terminal so check if it truly returns data for SSR or not :
curl http://localhost:8080
The github of that library: https://github.com/Roilan/react-server-boilerplate