The documentation for the main version of html2canvas says it does not currently support box shadows, but there are existing versions that do. This page showcases html2canvas working with box shadows working box shadows
I want to add this version to my project and tried
npm install --save https://github.com/niklasvh/html2canvas.git
which adds this line to my package.json file
"html2canvas": "git://https://github.com/niklasvh/html2canvas.git",
but when I try to import html2canvas with
import html2canvas from 'html2canvas';
it gives the error
Module not found: Can't resolve 'html2canvas'
I've never used a library or npm package straight from git before - what am I doing wrong?
try username/repository#branch in package.json
or try npm install --save username/repo#branch-name.
In your case npm install niklasvh/html2canvas#master.
Please let me know if it does not solve your problem.
Related
I am learning ReactJS. But now I got a problem. I used this code
import { AiOutlineShoppingCart } from "react-icons/ai"
But it is showing this error:
Module not found: Can't resolve 'react-icons/ai'
I am using sanity to build an eCommerce website cms. I tried to install react-icons with this code
yarn add react-icons
and I have checked the packages .jeson file and react-icons are present in dependencies. Can anyone please tell me how can I solve this problem?
Some extra info:
I have also use react-icons instead of react-icons/ai but same error
I have used npm install to install react-icons. Nothing helps
Firstly, you should be aware that not all icons are available. I sometime try to import some icons and I get error.
Secondly, make sure you copy the code from the website to make sure you didnot misspell the name
Futhermore, you can delete your node_module and remove react-icons from package.json file, then do yarn add react-icons and do yarn to install all your packages again
Lastly, you're to import from the library that owns the icon, i.e. if you're importing from AiFillAudio, you're to import it from react-icons/ai. eg.
import { AiFillAudio } from react-icons/ai.
I hope this help you out.
try reinstalling with npm install react-icons --save command
I figured it out. My react-icons are installed in sanity the folder. So when I was importing AiOutlineShoppingCart from react-icons, my program was looking for react-icons inside node_module of my main file. But it is stored node_module of sanity. So I have to declare the whole path.
Working code is
import { AiOutlineShoppingCart } from "../sanity/node_modules/react-icons/ai"
Here, "sanity" means sanity folder name.
Thanks, everyone for helping me.
This sometimes occurs when you install dependencies in the wrong directory.
let's say you run npm i package-x outside your project directory
After having installed my material-ui for my react project, but when it comes to use it always bring up an error telling me that
'Module not found'
./src/Components/LatestPost.jsModule not found: Can't resolve#material-ui/lab/Skeleton' in 'C:\Users\Zinox\super-surf\src\Components'
You would have only installed #material-ui/core package which would not include the experimental features you are looking for and hence you are getting the error Module not found: Can't resolve '#material-ui/lab/Skeleton'
To use experimental features of Material UI like Skeleton, Rating, Speed Dial and so on you need to also install the Material UI Lab package,
npm install #material-ui/lab
Note that this is needed in addition to the #material-ui/core package that you installed earlier with npm install #material-ui/core
After installing the above package you could import it as,
import Skeleton from '#material-ui/lab/Skeleton';
in your React Component and use it as desired.
you should add two packages into the app first is
yAR i #material-ui/lab #material-ui/core
Stumbled upon the same issue. Skeleton doesn't seem to be contained in the latest package version (4.0.0-alpha.22) at the moment. But it is on their source folder, which is odd.
Maybe you open an issue at their GitHub.
EDIT:
I did: https://github.com/mui-org/material-ui/issues/16919
Module not found: Can't resolve '#material-ui/lab/Skeleton'
If you want to use Skeleton, Rating, Speed Dial, and so on you need to also install the Material UI Lab package.
npm install #material-ui/lab
or
yarn add #material-ui/lab
Link here.
enter link description here
In my React app, which was built using create-react-app, I'm getting the error:
Module not found: Can't resolve 'react-icons/io' in '/usr/src/app/src/components/analytics_components'.
The app has been working fine for a while but I just rebuilt it using Docker Compose and now it's not.
It seems like it's looking in the wrong directory, src instead of node_modules.
react-icons is definitely installed, npm list react-icons returns its version number.
I can see the io folder in node_modules/react-icons
The import statement:
import { IoMdList } from "react-icons/io";
When I change the import to explicitly point to the node_modules directory, it works, but I didn't need to do this before nor do I need to for any other packages, which are still all working correctly:
import { IoMdList } from "../../../node_modules/react-icons/io";
I just reinstall the command npm install react-icons and then it works.
Again you can install npm if you already installed that doesn't matter you can re-install your npm again without deleting current node module. it works for me. command: npm install
you can try delete your node module folder and run cmd:npm install or yarn install it may solve your problem
I am newbie in react.js. I have been following instruction in how-to-do-simple-form-validation-in-reactjs and I can run http://localhost:3000/
But after adding bootstrap in index.js, I got this error
Failed to compile ./src/index.js Module not found: Can't resolve
'bootstrap/dist/css/bootstrap-theme.css' in
'C:\react-form-validation-demo\src'
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import 'bootstrap/dist/css/bootstrap.css';
import 'bootstrap/dist/css/bootstrap-theme.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';
ReactDOM.render(<App />, document.getElementById('root'));
registerServiceWorker();
If I remove these two lines below, it works:
import 'bootstrap/dist/css/bootstrap.css';
import 'bootstrap/dist/css/bootstrap-theme.css';
In Bootstrap version 4, the file 'bootstrap-theme.css' has been removed, according to the issue on GitHub. See the change history for details.
If you want to continue using version 4, remove this import, else downgrade to version 3.
This error is caused by a misconfiguration, version mismatch or corrupted bootstrap install.
If you've got bootstrap and react-bootstrap installed already via some variation of:
npm install --save bootstrap#^4.0.0-alpha.6 react-bootstrap#^0.32.1
(Check if your package.json contains "bootstrap" and "react-bootstrap" if your not sure.)
Just install a different version of bootstrap and rebuild your project. That should replace or add that file (bootstrap/dist/css/bootstrap-theme.css) to that folder.
A lower version of bootstrap worked for me as recommended in my create-react-app generated README.md:
npm install --save react-bootstrap bootstrap#3
Adding Bootstrap
You don’t have to use React
Bootstrap together with React but
it is a popular library for integrating Bootstrap with React apps. If
you need it, you can integrate it with Create React App by following
these steps:
Install React Bootstrap and Bootstrap from npm. React Bootstrap does
not include Bootstrap CSS so this needs to be installed as well:
sh npm install --save react-bootstrap bootstrap#3
Alternatively you may use yarn:
sh yarn add react-bootstrap bootstrap#3
reinstall the bootstrap and don't forget to mention --save to the command to save it to the node modules this solved the problem for me.
sudo npm install bootstrap --save
Adding the solution to the cause I ran into - it was my miss, but still unclear when reading the other answers.
If react-bootstrap is installed solo like this:
npm install --save react-bootstrap
then bootstrap will be missing. Try the following to correct:
npm install --save bootstrap
The correct way to install initially is as follows:
npm install --save react-bootstrap bootstrap
Install the bootstrap using the below command.
npm install react-bootstrap bootstrap
Then include the below line in the index.js file.
import '../node_modules/bootstrap/dist/css/bootstrap.min.css';
I got the same problem and this is how I resolved the problem.
First of all delete the node_modules directory from the project and then install bootstrap with below command.
npm install
npm i bootstrap
Then, you can add the below import to the index.js
import 'bootstrap/dist/css/bootstrap.min.css';
npm install --save bootstrap#^4.0.0-alpha.6 react-bootstrap#^0.32.1
i face same problem but after installing above packages it work well,
may b you should also install same packages
import '../node_modules/bootstrap/dist/css/bootstrap.min.css';
Source: github
Remove
import 'bootstrap/dist/css/bootstrap-theme.css'
That worked for me.
I faced the same issue, but my project was not created with create-react-app, mine was using webpack.
I can answer how I resolved it for webpack, maybe you can find the changes required for create-react-app after you go through this answer.
First I installed these two modules-
style-loader
css-loader
Then I modified the webpack.config.js file and added these lines inside the module.rules array.
{
test: /\.css$/,
loader: 'style-loader'
},
{
test: /\.css$/,
loader: 'css-loader',
query: {
modules: true,
localIdentName: '[name]__[local]___[hash:base64:5]'
}
}
This resolved the error in my project. You can also refer to this Github issue thread once, may be that may help you: https://github.com/facebook/create-react-app/issues/301
Check if you have bootstrap in package.json file .
If it is there remove and use the below commands to reinstall or install if it is not there.
npm install --save bootstrap
Some times is writing error
bootstrap/dist/css/bootstrap.min.css
boostrap/dist/css/bootstrap.min.css
check this tip, sometimes happend
You can also check that your package.json imported name of dependancy are not the same.
It is possible that when you installed bootstrap you were not in the directory that create-react-app created (that was the source of my problem). You can check with: npm list, which looks for locally installed packages.
Then scroll all the way to the top and see if you can find bootstrap listed there.
Stop the npm server than restart it. It'll be solved if you installed the packages perfectly.
Make sure bootstrap and react-bootstrap are installed.
npm install bootstrap react-bootstrap
I had simply reinstalled the previous Bootstrap version which I installed in my project folder and it worked.
from the "resource/js/app.js" remove require('./bootstrap')
import '../node_modules/bootstrap/dist/css/bootstrap.min.css';
You need to install both packages reactstrap and bootstrap by running these commands:
npm i reactstrap
npm i bootstrap
I installed material-ui-search-bar and then I want to use SearchBar.
But I have next problem:
./node_modules/material-ui-search-bar/lib/components/SearchBar/SearchBar.js
Module not found: Can't resolve 'material-ui/AutoComplete' in '...node_modules/material-ui-search-bar/lib/components/SearchBar'
How can I fix it?
AutoComplete is associated with Lab package of material UI. On Adding the "lab" package AutoComplete can be used. Add using yarn
yarn add #material-ui/lab
or using npm
npm install #material-ui/lab
I cannot upvote nor comment, so I just parrot the working solution.
Thanks, #blackspacer.
This works:
npm install #material-ui/lab
One expects all Material UI elements to be present after the initial package install, but there is an exception.
https://material-ui.com/components/about-the-lab/
About the lab
This package hosts the incubator components that are not yet ready to
move to the core.
Installation Install the package in your project directory with:
// with npm
npm install #material-ui/lab
// with yarn
yarn add #material-ui/lab
Install material-ui using this command :
npm install material-ui#latest
This can happen due to multiple reasons.
1) You are using the beta version of v1.0 launch of material-ui which has breaking changes. Try switching to the stable version. Or if you want to use the latest beta version, then use
Refer below link:
https://material-ui-next.com/demos/autocomplete/material-ui AutoComplete
2) Try importing like below:
import AutoComplete from 'material-ui/AutoComplete';
or
import { AutoComplete } from 'material-ui/AutoComplete';
Due to the port going on for #next version the modules are being reorganized and hence few components are breaking.
The only solution that worked is uninstall material-ui-search-bar and install using npm install material-ui-search-bar#beta
Use npm i #autocomplete/material-ui in your terminal.
Then run npm start, issue will be resolved.
import { Autocomplete } from '#autocomplete/material-ui';
Further more information or to try the template on another file for testing - use the below reference link.
[1]:https://www.npmjs.com/package/#autocomplete/material-ui
npm -i #material-ui/core
as more packages may be needed. For me besides lab i also needed utils. Hope this helps.
yarn add material-ui-icons
Try using this in project directory
Install beta version npm install material-ui-search-bar#beta
My issue got resolved after installing beta version.
This question is 4 years old so some of the answers here are no more correct. In 2022 and on v5.5, this is no more a lab component, but another reason you might be still getting this error:
export 'AutoComplete' (imported as 'AutoComplete') was not found in '#mui/material'
is if you're still using the old name. Its name has changed from "AutoComplete" to "Autocomplete", i.e., the letter c is no more capital.
So if you have something like:
import AutoComplete from #mui/material/AutoComplete
...just change it to this:
import Autocomplete from #mui/material/Autocomplete
This is a nice example for your problem try it.
import Tab from '#material-ui/core/Tab'
I guess you are not importing Autocomplete correctly .
For more information Visit here
Import like this.
import Autocomplete from '#material-ui/lab/Autocomplete';