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.
Related
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
When I have an error on my code, I see the mimified version of the code in the devtool of the browser.When working with plain js, it was easy to link the src of the js file not mimified, but now I use npm install, package.json, and I dont know how to specify to get the complete source. Especially with highchart and highstock in reactjs react-hichart
Instead of:
import Highcharts from "highcharts/highcharts";
import exporting from "highcharts/modules/exporting";
Use:
import Highcharts from "highcharts/highcharts.src";
import exporting from "highcharts/modules/exporting.src";
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 am trying to import Swiper for react in to my application and use it in Storybook.
I have the following import:
import { Swiper, SwiperSlide } from 'swiper/react';
This works in the React app but not in Storybook, I get the following error:
ModuleNotFoundError: Module not found: Error: Can't resolve 'swiper/react'
Other React modules have import without a problem. Do I need to change some configuration in Storybook?
Swiper v7+ uses ESM module. To make it work with storybook, you have to update storybook to use webpack5 instead of the default webpack4. Also ensure that your current node version must be equal or higher than 12.20, 14.13 or 16. These are versions that support ESM module.
In my case, I also delete addons #storybook/react line in .storybook/main.js as it still uses webpack4 and raises configuration Validation Error. After that it runs fine.
Full instruction
https://gist.github.com/shilman/8856ea1786dcd247139b47b270912324#upgrade
https://storybook.js.org/blog/storybook-for-webpack-5/
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 />