i use tsdx to create a react ui library, and i want to test it on my next.js project before pushing it to the npm package.
i have try npm link , it works well in the beginning but when i change any thing in the package files it gave me an error, module not found, but it still in the node_modules folder.
i have try to run yarn install <tsdx-project-path > but it still gave me an error
so is there any way to include my tsdx ui library in my project locally.
let's think you have following folder structure.
|---/current-project
|---/tsdx-package
So you need to run npm install ../tsdx-package from inside current-project. I'm pretty sure you forgot to add ../ to your package path.
Weirdly, the react-native-vector-icons was working well but by using ^ ("^6.6.0") for its version in the package.json file on the new release this error happens.
It's weird because two days ago it works well but now starting of my project ran to this error:
error: Error: Unable to resolve module #react-native-community/toolbar-android from node_modules\react-native-vector-icons\lib\toolbar-android.js: #react-native-community/toolbar-android could not be found within the project.
After reading this issue and trying many solutions I reach to two solutions:
You can delete all node_modules folder and put the version of react-native-vector-icons to "6.6.0" instead of "^6.6.0" and then install all packages again. absolutely, it is better to delete all caches and builds and start everything again. (NOT Recommended)
You can install the #react-native-community/toolbar-android by using the below command:
yarn add #react-native-community/toolbar-android
Or
npm install --save #react-native-community/toolbar-android
Note: Both of these solutions are temporary and soonly this bug will be fixed and there is no need to install the toolbar-android package.
Prev Update
I update the package to the version "^7.0.0" on my project and still, the issue is remaining, so this solution is currently perseverance.
New Update
this issue is fixed on version "^7.1.0" and there is no need to install the #react-native-community/toolbar-android.
Update the library
react-native-vector-icons
to the latest version.
I had this problem too.
In my case, only works when I removed and added the package again with the latest version (7.0.0).
yarn remove react-native-vector-icons
yarn add react-native-vector-icons
Had this EXACT same error. All I had to do was install toolbar-android & voilà!
npm install --save #react-native-community/toolbar-android
Go the path \node_modules\native-base\node_modules\react-native-vector-icons\lib\toolbar-android.js
Replace import ToolbarAndroid from '#react-native-community/toolbar-android' to import {ToolbarAndroid} from './react-native';
I also got the same error after upgrading from version 6 to 7. The issue can be fixed simply by resetting the cache.
Please try npm start -- --reset-cache
do this:
rm -rf node_modules/
rm -rf package.lock.json
npm i
react-native start --reset-cache
from your project directory:)
Just Import it direct from react native it solves my problem
node_modules\react-native-vector-icons\lib\toolbar-android.js
import { ToolbarAndroid } from 'react-native';
Same issue, I solved it:
My environment:
RN: 0.61.5
Node: v12.18.3
OS: Windows 10 Pro
You can install react-native-vector-icons latest version (current 7.0.0).
And do not run auto-link (react-native link react-native-vector-icons)
Finally, running react-native start --reset-cache
Good luck.
First let's understand the standard convention used in package.json for packege's version.
So if you see ~1.0.2 it means to install version 1.0.2 or the latest patch version such as 1.0.4. If you see ^1.0.2 it means to install version 1.0.2 or the latest minor or patch version such as 1.1.0.
Now, coming to the issue.
The issue is caused because you are having a version of react-native-vector-icons which is giving you some trouble.
Check it's version by this command under your project directory:
npm list react-native-vector-icons --version \ is it 6.6.0 ??
No ?? . There is the problem. You need strictly 6.6.0 but you got something else.
Solution:
Delete node_modules directory under your project. Change the version of react-native-vector-icons in package.json to 6.6.0 (basically remove ^ to tell npm to get me exactly what I want. Nothing more, nothing less !)
Then do npm install !
The other alternative is to use expo's vector Icons. Something like this.
import { Ionicons } from "#expo/vector-icons".
Then render your Icon like this;
<Ionicons
name="ios-exit-outline"
color={colors.danger}
size={28}
style={{ marginRight: -15 }}
/>
Edit this file node_modules\react-native-vector-icons\lib\toolbar-android.js
remove 'import ToolbarAndroid from '#react-native-community/toolbar-android';'
edit return null
for this case you have not toolbar-android in your modules file and as friends saying you can fix it by this command
windows users:
npm install --save #react-native-community/toolbar-android
Mac users:
yarn add #react-native-community/toolbar-android
But IN GENERAL: I wanna tell you an experience for you guys whenever you encounter with this kind of errors that start with "Unable to resolve module" .
if you have a look to the error we have a problem with the module that system is telling us.
if you have not that module . you can install it with the commands
Windows users:
npm install --save THE MODULE(attention: THE MODULE IS THE NAME OF PACKAGES OR MODULES that u need to install)
and Mac users:
yarn add THE MODULE(attention: THE MODULE IS THE NAME OF PACKAGES OR MODULES that u need to install)
for example lets look at this error:
error Unable to resolve module `#react-native-community/slider` from `App.js`: #react-native-community/slider could not be found within the project.
as you can see error is telling us this module could not be found within our project.
so we need install it with this command:
for windows programmers:
npm install --save #react-native-community/slider
and for mac programmers:
yarn add #react-native-community/slider
that's all.
I hope you understand me clearly and do not have problem with unable to resolve module errors and my command be useful for you.
best regards
Mehrad Karampour (MEH)
I recently started having a problem with npm build after upgrading to newer version of react-bootstrap (1.0.0-beta.6).
Creating an optimized production build...
Failed to compile.
Cannot find module: '#restart/context/forwardRef'. Make sure this package is installed.
./node_modules/react-bootstrap/es/ThemeProvider.js
You can install this package by running: yarn add #restart/context/forwardRef.
I tried running the provided yarn command but this is not a valid package name. Does anyone have an idea how to fix this without going back to the old version (which does not support tabs, which is something I am using)?
This is an upstream issue with #restart/context, which just released a version that breaks importing forwardRef like this:
import forwardRef from '#restart/context/forwardRef'
Quick fix is to downgrade to 2.1.2 by running yarn add #restart/context#2.1.2.
Longer term fix is to wait for react-bootstrap to either fix their imports or lock their package.json to this version of #restart/context.
Edit: I added an issue to the react-bootstrap repo to track progress here: https://github.com/react-bootstrap/react-bootstrap/issues/3576
I'm trying install react-vis-force module but not working properly.
I edited package.json to install 'react-vis-force' vs 0.3.1
But I met error.
Cannot find module './factoryWithTypeCheckers' from node_modules/react-vis-force/dist
How can I fix this?
Based on a solution found in the issues section of another react library, you can resolve this issue by changing the import statement.
import {ForceGraph, ForceGraphNode, ForceGraphLink} from 'react-vis-force/dist/react-vis-force.min.js';
The un-minified version of the code has a missing dependency- the minified version does not. It appears as though npm was using the un-minified version by default.
If you're working with npm try to do it
npm install --save react-vis-force
With --save you save your dependency in package.json
If you have do it before, try npm install for reinstall your dependencies.
I wanted to install jquery and found instructions here:
http://aurelia.io/hub.html#/doc/article/aurelia/framework/latest/contact-manager-tutorial/4
I then wanted to install "moment.js" and found instructions here ( I am not using typescript) :
How to import Moment-Timezone with Aurelia/Typescript
To install both of these with the Aurelia CLI the procedure is to install the respective npm module and then to manually modify aurelia.json in some way so the app recognizes it.
In the case of moments the instructions then say to place an import at the top of app.js , but this is not the case for JQuery.
First off , is there any way the changes to aurelia.json can be automated ( like a regular node.js package.json) so I don't need to manually do it and second, how do I know what modifications I am expected to make to aurelia.json ( or app.js or any other file) for the module I want to install?
With a basic node.js app its pretty simple , just npm install. With Aurelia its much more confusing.
Edit: There is also JSPM which I've read is used for front end libraries like the ones I mentioned above. However, the links with instructions for installation that I posted are not using JSPM.
Edit
I found some of the answers here:
http://aurelia.io/hub.html#/doc/article/aurelia/framework/latest/the-aurelia-cli/6
The CLI is still under development. I think the automatic adding of a package might some day be included in the CLI itself, for example with an install command.
The extra registration is required to register the package correctly for usage with RequireJS (http://requirejs.org/). And if the plugin exists of more than just 1 file, this registration is a bit more complex then just adding the name of the plugin.
There is an experimental CLI task here https://github.com/martonsagi/aurelia-cli-pacman that will do the automation for you.
Which can be installed by running:
npm install aurelia-cli-pacman -D
The above will install the package manager and register/ include itself in the tasks in your current project (be sure to run it with install, because npm won't run the post install script if you run it the i shorthand). Next, you can run the following command to install an extension:
npm i aurelia-interactjs -S
au pacman i aurelia-interactjs
The only downside for many might be that currently there aren't that many registry entries, but I think the author of the package would be very happy if you help him out by creating a pull to extend the registry. Would take you some time to figure out what would be the correct install/ import settings, but you will help out someone else and make them happy when they hit the same problem you experience :-).
JSPM has a same sort of issue around this, only is more matured/ the registry is bigger and/ or authors added specific information for JSPM installations to their package.json. For example: To install the above plugin with JSPM it will use the following highlighted section https://github.com/eriklieben/aurelia-interactjs/blob/master/package.json#L72,L86. The same is currently not possible with aurelia-cli, because the installation is done by NPM instead of through JSPM that redirects it to NPM.
If the author of the plugin didn't specify the JSPM section in the package.json, you would most likely and up with the same sort of issues. JSPM has a similar registry (https://github.com/jspm/registry/tree/master/package-overrides/npm) as aurelia-cli-pacman.