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
Related
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 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 get ReactJs compatible with IE 10 and have added the following import statements before any other import.
import '#babel/polyfill';
import 'core-js/es6/map';
import 'core-js/es6/set';
The import is done in the index file of my app, App.tsx.
However I am still getting the following error and am unable to resolve it.
SCRIPT5009: 'Set' is undefined
How can I resolve this issue?
I also run in this same issue. To solve this, you need some additional node packages in order to perform polyfills.
Please, 1st install the npm package "core-js". After that, add
import 'core-js/es/set'
import 'core-js/es/map'
If still running into issues, install this other package react-app-polyfill and add the following additional import:
import 'react-app-polyfill/ie9'
These imports must be in the root index file of your project. Hope this helps.
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