I am using ReactJs and I am following a video that has a different version of ReactJs. I am using React 17.0.2 and I have the following error.
Attempted import error: 'Navlink' is not exported from 'react-router-dom'.
Any idea?
The component you are trying to import is named NavLink (camelcase) and not Navlink as you specified.
https://v5.reactrouter.com/web/api/NavLink
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've found out that components without import React from 'react'; lines works well.
I've added import React from 'react'; to the first line of .jsx files conventionally. And I saw many open source with this line.
Then why do we add this line unnecessarily?
You no longer need to import React from "react". Starting from the release 17 of React, JSX is automatically transformed without using React.createElement.However, other exports like hooks must be imported.
if you use a builder like esbuild, unfortunately you will need to import react in every file because it would be an error: Uncaught ReferenceError: React is not defined
but if you use the default builder you don't have to import react in each file
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 trying to use the Wavesurfer.js plugins in my React Typescript application. When I try to import the plugins, I keep getting "module not found: can't resolve" error. I'm guessing this has something to do with defining the types for the plugins. Does anyone know how I could use these plugins in React Typescript?
import React from "react";
import WaveSurfer from "wavesurfer.js";
import CursorPlugin from "wavesurfer.cursor.js";
Try
import CursorPlugin from 'wavesurfer.js/dist/plugin/wavesurfer.cursor.min.js';
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 />