I managed to instal Tween js npm install tween but i can't import it to my component ?
My lib is install in node_modules/tween.
I tried :
import * AS TWEEN from 'tween/tween.js'
import {TWEEN} from 'tween'
But it's not working.
Any ideas ?
Probably not the best way, but the way I do this sometimes:
Include the script in your index.html file:
<head>
...
<script src="path/to/script"></script>
...
</head>
Access the script through window object:
window.SCRIPTNAME
Example with screenfull.js:
<script src="/assets/scripts/screenfull.min.js"></script>
I access it like this in my code:
window.screenfull
I'have been struggling with the similar problem from two days. Here is what I got.
npm install #types/tween.js --save
npm install tween.js --save-dev
The package name after the #types/ must be the same as the second one. I was stupid installed npm install tween --save-dev instead of tween.js before, and I had no idea what was wrong, wasted hours to figuer this out.
And in your tsconfig.json add
"compilerOptions":{..."types":[..."tween.js"]}
then you can
import * as TWEEN from "tween.js"
Hope this could help.
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
I am following this brilliant post to learn react. However, some essential bits are missing.
When I open the app in the browser I get the error
./src/components/Navbar.js
Module not found: Can't resolve '#heroicons/react/solid'
Apparently, I am missing a module. I tried to install it but nothing helped so far.
I tried:
npm install heroicons-react
npm install #react-icons/all-files --save
npm install #iconify/icons-heroicons-solid
npm install #heroicons/vue
The folder structure looks like:
project
|
|-package.json
|-node_modules
|-homepage
|-node_modules
|-package_json
|-src
|-public
|-README.md
I tried the to execute the commands in the project directory and the homepage directory. Not sure which one I should use.
The code in question in Navbar.js looks like:
import { ArrowRightIcon } from "#heroicons/react/solid";
This will resolve you problem.
npm i #heroicons/react
This question is already resolved and I just wanted to add a few more things for newcomers. heroicons have clear documentation on GitHub.
React:
First, install #heroicons/react from npm:
npm install #heroicons/react
Now each icon can be imported individually as a React component:
import { BeakerIcon } from '#heroicons/react/solid'
function MyComponent() {
return (
<div>
<BeakerIcon className="h-5 w-5 text-blue-500"/>
<p>...</p>
</div>
)
}
Vue
Note that this library currently only supports Vue 3.
First, install #heroicons/vue from npm:
npm install #heroicons/vue
Now each icon can be imported individually as a Vue component:
<template>
<div>
<BeakerIcon class="h-5 w-5 text-blue-500"/>
<p>...</p>
</div>
</template>
<script>
import { BeakerIcon } from '#heroicons/vue/solid'
export default {
components: { BeakerIcon }
}
</script>
For anyone recently having trouble, you need to:
import {} from '#heroicons/react/24/outline'
24 or 20 are the original sizes of icon as specified on heroicons site
Downgrade to 1.0.6 solved it for me
yarn add #heroicons/react#1.0.6
It could be because the installed version is v2 heroicons. Try installing heroiconsv1.
npm install heroicons-react
Maintainers has released an update recently and it's messing up the imports used in previous version. I wish they could make the release a bit more easier to adapt on consumer side.
Anyway, you now need to define the sizes too in the import statements.
Previous Version import:
import {} from '#heroicons/react/outline'
import {} from '#heroicons/react/solid'
Latest version import:
import {} from '#heroicons/react/24/outline'
import {} from '#heroicons/react/20/solid'
After installing with:
npm install #heroicons/react
use
npm audit fix --force
test this command npm install heroicons-react
or add
"#hookform/resolvers": "^0.1.0"
to your package.json
You probably have newer version (2) but you need v1. just happened to me just now. I had to uninstall v2 and use
npm install #heroicons/react#v1
this worked for me.
My friends, if you want to use heroicons V2 with TypeScript, just make sure that you are using the right path, just like the below:
import {UserIcon, Bars3Icon} from "#heroicons/react/24/solid"
There are 24 and 20 folders inside the #heroicons/react/, for TypeScript, you should use those folders.
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've followed the following steps :
bower install ng-ckeditor
added <script src="bower_components/ng-ckeditor/ng-ckeditor.js"></script> in index.html
added in app.js like angular.module('MyApp',['ngCkeditor'])
but now when i'm running the app i'm getting this issue, how to resolve it ?
ng-ckeditor internally uses ckeditor, so you should refer ckeditor.js before ng-ckeditor.
Follow the steps mentioned below
sudo npm install ckeditor
bower install ckeditor
bower install ng-ckeditor
add the following lines in index.html
<script src="bower_components/ckeditor/ckeditor.js"></script>
<script src="bower_components/ng-ckeditor/ng-ckeditor.js"></script>