In my React app, which was built using create-react-app, I'm getting the error:
Module not found: Can't resolve 'react-icons/io' in '/usr/src/app/src/components/analytics_components'.
The app has been working fine for a while but I just rebuilt it using Docker Compose and now it's not.
It seems like it's looking in the wrong directory, src instead of node_modules.
react-icons is definitely installed, npm list react-icons returns its version number.
I can see the io folder in node_modules/react-icons
The import statement:
import { IoMdList } from "react-icons/io";
When I change the import to explicitly point to the node_modules directory, it works, but I didn't need to do this before nor do I need to for any other packages, which are still all working correctly:
import { IoMdList } from "../../../node_modules/react-icons/io";
I just reinstall the command npm install react-icons and then it works.
Again you can install npm if you already installed that doesn't matter you can re-install your npm again without deleting current node module. it works for me. command: npm install
you can try delete your node module folder and run cmd:npm install or yarn install it may solve your problem
Related
I am learning ReactJS. But now I got a problem. I used this code
import { AiOutlineShoppingCart } from "react-icons/ai"
But it is showing this error:
Module not found: Can't resolve 'react-icons/ai'
I am using sanity to build an eCommerce website cms. I tried to install react-icons with this code
yarn add react-icons
and I have checked the packages .jeson file and react-icons are present in dependencies. Can anyone please tell me how can I solve this problem?
Some extra info:
I have also use react-icons instead of react-icons/ai but same error
I have used npm install to install react-icons. Nothing helps
Firstly, you should be aware that not all icons are available. I sometime try to import some icons and I get error.
Secondly, make sure you copy the code from the website to make sure you didnot misspell the name
Futhermore, you can delete your node_module and remove react-icons from package.json file, then do yarn add react-icons and do yarn to install all your packages again
Lastly, you're to import from the library that owns the icon, i.e. if you're importing from AiFillAudio, you're to import it from react-icons/ai. eg.
import { AiFillAudio } from react-icons/ai.
I hope this help you out.
try reinstalling with npm install react-icons --save command
I figured it out. My react-icons are installed in sanity the folder. So when I was importing AiOutlineShoppingCart from react-icons, my program was looking for react-icons inside node_module of my main file. But it is stored node_module of sanity. So I have to declare the whole path.
Working code is
import { AiOutlineShoppingCart } from "../sanity/node_modules/react-icons/ai"
Here, "sanity" means sanity folder name.
Thanks, everyone for helping me.
This sometimes occurs when you install dependencies in the wrong directory.
let's say you run npm i package-x outside your project directory
Describe the bug
Hi, I'm trying using Metaplex to upload the assets and verify the collection, I am now moving towards "Minting Website": https://docs.metaplex.com/candy-machine-v2/mint-frontend
run rpm start inside the folder ~/metaplex/js/packages/candy-machine-ui to test the mint button, it doesn't load the localhost and it shows me the following error on the terminal:
Failed to compile.
./node_modules/#solana/buffer-layout-utils/lib/esm/web3.mjs
Can't import the named export 'PublicKey' from non EcmaScript module (only default export is available)
Anyone know how to solve this? thanks
I'm using Visual Studio on Windows, node 14.15.
Update:
It seems I'm not alone:
https://github.com/solana-labs/buffer-layout-utils/issues/6
Solved it:
How to downgrade the version of Solana to 1.9.1
For some reason yarn install wasn't doing it for me like in the docs.
I deleted node_module, package-lock.json and yarn.lock then installed with npm instead
npm install && npm start
that worked for me
I am following this brilliant post to learn react. However, some essential bits are missing.
When I open the app in the browser I get the error
./src/components/Navbar.js
Module not found: Can't resolve '#heroicons/react/solid'
Apparently, I am missing a module. I tried to install it but nothing helped so far.
I tried:
npm install heroicons-react
npm install #react-icons/all-files --save
npm install #iconify/icons-heroicons-solid
npm install #heroicons/vue
The folder structure looks like:
project
|
|-package.json
|-node_modules
|-homepage
|-node_modules
|-package_json
|-src
|-public
|-README.md
I tried the to execute the commands in the project directory and the homepage directory. Not sure which one I should use.
The code in question in Navbar.js looks like:
import { ArrowRightIcon } from "#heroicons/react/solid";
This will resolve you problem.
npm i #heroicons/react
This question is already resolved and I just wanted to add a few more things for newcomers. heroicons have clear documentation on GitHub.
React:
First, install #heroicons/react from npm:
npm install #heroicons/react
Now each icon can be imported individually as a React component:
import { BeakerIcon } from '#heroicons/react/solid'
function MyComponent() {
return (
<div>
<BeakerIcon className="h-5 w-5 text-blue-500"/>
<p>...</p>
</div>
)
}
Vue
Note that this library currently only supports Vue 3.
First, install #heroicons/vue from npm:
npm install #heroicons/vue
Now each icon can be imported individually as a Vue component:
<template>
<div>
<BeakerIcon class="h-5 w-5 text-blue-500"/>
<p>...</p>
</div>
</template>
<script>
import { BeakerIcon } from '#heroicons/vue/solid'
export default {
components: { BeakerIcon }
}
</script>
For anyone recently having trouble, you need to:
import {} from '#heroicons/react/24/outline'
24 or 20 are the original sizes of icon as specified on heroicons site
Downgrade to 1.0.6 solved it for me
yarn add #heroicons/react#1.0.6
It could be because the installed version is v2 heroicons. Try installing heroiconsv1.
npm install heroicons-react
Maintainers has released an update recently and it's messing up the imports used in previous version. I wish they could make the release a bit more easier to adapt on consumer side.
Anyway, you now need to define the sizes too in the import statements.
Previous Version import:
import {} from '#heroicons/react/outline'
import {} from '#heroicons/react/solid'
Latest version import:
import {} from '#heroicons/react/24/outline'
import {} from '#heroicons/react/20/solid'
After installing with:
npm install #heroicons/react
use
npm audit fix --force
test this command npm install heroicons-react
or add
"#hookform/resolvers": "^0.1.0"
to your package.json
You probably have newer version (2) but you need v1. just happened to me just now. I had to uninstall v2 and use
npm install #heroicons/react#v1
this worked for me.
My friends, if you want to use heroicons V2 with TypeScript, just make sure that you are using the right path, just like the below:
import {UserIcon, Bars3Icon} from "#heroicons/react/24/solid"
There are 24 and 20 folders inside the #heroicons/react/, for TypeScript, you should use those folders.
So I am attempting to make a web app with React, Firebase, and the react-firebase-hooks module and I can't even get my code to compile. I have uninstalled react-firebase-hooks at least 3 times now and re-installed it just the same. I even installed it globally.
My output from npm list is:
Firebase resolves fine and there are no issues, so it can't be that something isn't installed. In my code, I am using:
import {useAuthState} from 'react-firebase-hooks';
import {useCollectionData} from 'react-firebase-hooks/firestore';
To import useAuthState and useCollectionData from react-firebase-hooks.
Has anyone else had any issues with this? Is this some sort of compatibility issue that I'm not noticing? I also created a totally separate project running
npx create-react-app test
and then
cd test
followed by
npm install --save react-firebase-hooks
, imported the same 2 components from that module, ran my code with
npm start
and got the same error as I did in my actual app.
I also used
rm -rf node_modules
and then ran
npm install
to no avail.
I am fairly new to the web dev world as well as React and Firebase so please forgive me if I'm overlooking something here.
The useAuthState comes from "react-firebase-hooks/auth" modeule, that's why it's not working
I would like to use the react-drag-sortable components (https://www.npmjs.com/package/react-drag-sortable) which i successfully installed as follows:
npm install react-drag-sortable
The issue is, my application doesn't recognize when i import this component. Where does this component physically reside after running the npm install command? How can I then use it in my application?
This is not about installing packages (Where does npm install packages?)
It's in node-modules/react-drag-sortable/lib/index.js
It's exported with the following line at the end of the file:
exports.default = DragSortableList;