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"
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
I installed the Jodit Editor using npm -i jodit-react. The package is added in the node modules but I am unable to import it.
This is is how I am importing the package import JoditEditor from "../../node_modules/jodit-react/index";
And this is the error I am getting: Module not found: Can't resolve '../../node_modules/jodit-react/index'
Screenshot of the error:
Change this line:
import JoditEditor from "../../node_modules/jodit-react/index";
To:
import JoditEditor from 'jodit-react';
You can take a look at this live working example with Next.js
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.
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 />
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