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
Related
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'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 recently migrated a create-react-app to typescript. After migration my scss files are being ignored in the .tsx components. I'm importing the files like so:
import './styles/scss/style.scss';
this was working fine in js. I've already installed node-sass and even tried installing #types/node-sass. I'd like to do this without ejecting. Would appreciate any help.
According with this documentation https://facebook.github.io/create-react-app/docs/adding-a-sass-stylesheet#docsNav
If you use react-scripts#2.0.0 or higher just
npm install node-sass
restart and enjoy.
I am working on a AngularJS project that uses bower as package manager and gulp to inject the dependencies into the index.html file. I am not very familiar with both of these tools.
I now want to use AWS AppSync, but it is not available as a bower package.
Currently the AWS SDK is specified as a file dependency in bower.json as:
"aws-sdk": "./thirdparty/script/aws-sdk-2.69.0.min.js",
When I install aws-appsync with npm npm install aws-appsync the node_modules folder for aws-appsync contains multiple js files in the lib directory.
How can I include these with bower or is there another way to do this altogether?
I am currently unable to change much of the build and dependency management process so any suggestions working with the current tools would be much appreciated.
Thanks for reaching out!
The Bower team itself has recommended that people migrate to npm or yarn, and so aws-appsync has not been pushed to Bower.
It might be worth investigating whether you can install directly from github using something like...
bower install <github url>.git
... and install directly from the appsync-sdk github repo.
In the end I hacked together an interim solution until I can move the whole project over to npm and browserify.
I added the aws-appsync package using npm and required it in a new file. This file is then passed through a gulp task that uses the browserify plugin. The added file is then included into the rest of the build process as before.
My react app was created with create-react-app and I added And Design following:
https://ant.design/docs/react/use-with-create-react-app
I even customized some less vars using:
https://ant.design/docs/react/use-with-create-react-app#Customize-Theme
Now, I ejected my app but everything stopped working.
EDIT1:
The first error is that after ejecting, the scripts configured in package.json no longer works, as described here:
https://github.com/ant-design/create-react-app-antd/issues/10
What are the steps to configure antd after ejecting create-react-app?
Thanks
You just need to run npm i react-scripts.
This will install the missing dependency you need to make this work.