I am using material icons in by react application.
I wanted to use circular check.
I could import and use the check_circle icon as follows
import CheckCircle from 'material-ui/svg-icons/action/check-circle';
There is another icon called circle_check_outline which I am unable to import by the normal import line
import CheckCircleOutline from 'material-ui/svg-icons/action/check-circle-outline';
It gives Can't resolve 'material-ui/svg-icons/action/check-circle-outline' error
I tried downloading the icon and render it as suggested in Marson Mao's answer to a similar question in stackoverflow
import SvgIcon from 'material-ui/SvgIcon';
import CheckCircleOutline from '../../assets/check-circle-outline.svg';
<SvgIcon>
{CheckCircleOutline}
</SvgIcon>
Then I got the following error
Uncaught TypeError: Cannot read property 'svgIcon' of undefined
at SvgIcon.render
I also tried Joey T 's answer in the same question. Installed #material/icons package using npm install #material-ui/icons#2.0.0-beta.1
and imported the icon as follows
import CheckCircleOutline from '#material/icons/CheckCircleOutline';
Still getting the error
Can't resolve '#material/icons/CheckCircleOutline'
I am using material-ui v0
The material-ui does not have check-circle-outline icon, hence it gives an error when importing. What you can do is get the latest icons from #material-ui/icons and then import them
Install the package by using the following command
npm install #material-ui/icons
Then import it,
import CheckCircleOutline from '#material-ui/icons/CheckCircleOutline';
Try this.
import CheckCircleoutline from '#material-ui/icons/CheckCircleOutline';
Use <CheckCircleoutline />
Related
I work in a group project in gitlab, and when i try to run yarn dev for my react project I get the following error:
Attempted import error: '#mui/material/Typography' does not contain a default export (imported as 'Typography').
And the same error from TextField
This is how I import Typograpgy:
import Typography from '#mui/material/Typography';
Other imports works fine, but not TextField and Typography
Does anyone know the solution for this problem? I am the only one in the group that gets this error
I have tried to import by using
import {Typography} from '#mui/material'
instead, but that doesn't work either
I remember that I got a similar issue using material ui, one default export cannot be found and I fixed it by deleting node_modules folder and run :
npm install
My MERN application is returning the error Module not found: Can't resolve 'react-bootstrap/Media'.
I am importing several react-bootstrap modules as shown:
import Image from "react-bootstrap/Image"
import Col from "react-bootstrap/Col"
import Media from "react-bootstrap/Media"
import Row from "react-bootstrap/Row"
import Button from "react-bootstrap/Button"
The remainder are working as expected. Any ideas why this one import wouldn't be found?
Thanks!
Check your node_modules and see if it's there
I was also having this issue. I had to downgrade my version of react-bootstrap to import the Media component.
npm install react-bootstrap#1.6.1
Looks like Media is changed to Card component in newer versions of react-bootstrap. https://react-bootstrap.github.io/components/cards/
You should use:
import Card from "react-bootstrap/Card"
I have a Nextjs app and trying to use the Image feature.
I am importing the dependencies like so:
import React from "react";
import Link from "next/link";
import Image from "next/image";
but getting this error
Module not found: Error: Can't resolve 'next/image'
only for next/image and not for next/link which is confusing me.
The problem can be solved by
Updating Nextjs using npm install react#latest react-dom#latest, [This solution can break your project make sure you need to update]
Ensuring you're importing next/image in small letters not
next/Image in capital letters.
hope you can clarify this issue,
I am trying to use the Github Icon from fontawesome in react following the documentation:
link to documentation,
but I am having an issue and getting this error:
./src/components/FindMe/FindMe.jsx
Attempted import error: 'faGithub' is not exported from '#fortawesome/free-solid-svg-icons'.
My code is
//the imports from FA
import { FontAwesomeIcon } from '#fortawesome/react-fontawesome';
import { faGithub } from '#fortawesome/free-solid-svg-icons';
//the icon as per documentation
<FontAwesomeIcon icon={faGithub} />
I tried changing the capital letters but nothing, also using fabGithub but does not work, different ways to do it folowing the documentation but also nothing, I tried with other icons and it works.
Hope someone can clarify
edit
solved issue using this :
https://react-icons.github.io/react-icons/#/[enter link description here]2
FontAwesome have divided icons into separate npm packaged.
Github Icon is in different package: #fortawesome/free-brands-svg-icons
so first you would need to install that
npm install --save #fortawesome/free-brands-svg-icons
or
yarn add #fortawesome/free-brands-svg-icons
and then use it in your code:
import { faGithub } from '#fortawesome/free-solid-svg-icons';
I have problem with writing in TypeScript & ReactJS. I have no idea how to import external libraries and use them properly in the code.
I'm trying to use react-autosuggest in my project so I'm:
Installing react-autosuggest with npm install --save react-autosuggest
Installing typing for this library with typings install --global --save dt~react-autosuggest
going to file where I want to use this and trying to import that and use
Here I have problem, because I still have problems with importing it.
When I'm trying to import it with import * as autosuggest from 'react-autosuggest' I'm getting error
error TS2497: Module ''react-autosuggest'' resolves to a non-module entity and cannot be imported using this construct.
When I'm importing with import Autosuggest from 'react-autosuggest' another error appears:
error TS1192: Module ''react-autosuggest'' has no default export.
Could you guide me how to do it?
To fix your import use require:
import AutoSuggest = require("react-autosuggest");
new AutoSuggest();
The export of the module is done with the export = syntax. Refer to this SO for details on why you need to import this with require: https://stackoverflow.com/a/29598404/5324369