Cannot resolve NPM module which seems to have installed successfully - module

I have installed a few modules doing npm install --save ng2-redux redux redux-actions redux-promise. If I do npm list | grep "redux" I get:
├── ng2-redux#3.0.5
├─┬ redux#3.5.2
├─┬ redux-actions#0.12.0
├─┬ redux-promise#0.5.3
And in my package.json I can find them as well:
"dependencies": {
...
"ng2-redux": "3.0.5",
"redux": "3.5.2",
"redux-actions": "0.12.0",
"redux-promise": "0.5.3",
...
}
The problem is that while ng2-redux and redux both work fine:
import { applyMiddleware } from 'redux';
import { NgRedux, select } from 'ng2-redux';
redux-actions and redux-promise both throw a Cannot resolve file 'redux-actions'/'redux-promise' when trying to import them, that appears both in the IDE (WebStorm 11.0.4) and in Webpack:
import { createAction } from 'redux-actions';
import promiseMiddleware from 'redux-promise';
The errors says:
ERROR in ../src/.../app.component.ts
(8,31): error TS2307: Cannot find module 'redux-promise'.
However...
import 'redux-actions';
import 'redux-promise';
...works just fine.
I have already tried to remove the node_modules folder and reinstall everything with npm cache clear, rm -rf node_modules and npm install and it doesn't fix the problem.

You should also have d.ts file under node_modules directory. Try
npm install --save-dev #types/redux-promise
to acquire the type information of the module.

Related

When using npm workspaces, how to force a package to be installed in the relative node_modules?

Here are some related questions:
When using yarn workspaces, how to force a package to be installed in the relative node_modules?
NPM 7 Workspaces - Multiple node_modules?
Should I have to use no-hoist for all packages in a monorepo with react-native-web?
I'm using npm workspaces to organise multiple packages. The issue is that my main package don't have its dependency's(which is also one of the workspaces) source code in local node_modules. I know the dependency is installed in root node_modules, the thing is that I need to visit it by relative path from the main package.
Here is the project structure after running npm install in root dir:
root
├── package.json -> { "workspaces": ["packages/*"] }
├── node_modules
│ ├── dependency-A
│ ├── dependency-B
└── packages
├── main-package
├── dependency-A
└── dependency-B
package.json in root dir:
{
"workspaces": [
"packages/main-package",
"packages/dependency-A",
"packages/dependency-B"
]
}
package.json in "packages/main-package":
{
"dependencies": {
"dependency-A": "0.1.0",
"dependency-B": "0.1.0"
}
}
webpack.config.js in "packages/main-package":
{
plugins: [
new CopyWebpackPlugin({
patterns: [
{
from: "node_modules/dependency-A/media",
to: "static/dependency-A-media",
},
],
}),
new CopyWebpackPlugin({
patterns: [
{
context: "node_modules/dependency-B/dist",
from: "research-data.json",
},
],
}),
]
}
When I run webapck in main-package, the error message is:
ERROR in unable to locate '/Users/trumangao/myApp/packages/main-package/node_modules/dependency-A/media' glob
ERROR in unable to locate '/Users/trumangao/myApp/packages/main-package/node_modules/dependency-B/dist/research-data.json' glob
I'm wondering what is the best practice to resolve such question? The option "nohoist" of Yarn inspired me but I can't find it in npm. I also tried to run install in package dir but it will break their symlink. How could I install dependencies of each package in their local node_modules while maintain their links like lerna#4?
Tried versions:
node.js#16.13.0
npm#8.1.0
&
node.js#18.14.0
npm#9.3.1
Hope I've made myself plain with my poor English LoL, thanks a lot.

Material-UI not working when using npm link

I created a shared-components repo which contains wrapped Material-UI components and are packaged as an NPM module.
The module works fine when installed via the remote package: npm install *name-of-package*, but when I npm link so I can develop locally it crashes saying the theme variables I define are undefined.
Here is my main repo's code:
import { ThemeProvider } from '#mui/material';
import { theme, Button } from 'my-shared-components'; // npm-link'd repo
...
<ThemeProvider theme={theme}>
<Button>Click</Button>. // crash occurs here saying a theme color is undefined
</ThemeProvider>
package.json
dependencies: {
"#mui/material": "^5.0.0-rc.0",
"#mui/styled-engine": "npm:#mui/styled-engine-sc#next",
"#mui/styled-engine-sc": "^5.0.0-rc.0",
...
}
Shared-Component repo code:
import { createTheme } from '#mui/material/styles';
...
export default createTheme(themeObj);
package.json
"peerDependencies": {
"#mui/material": "^5.0.0-rc.0",
"#mui/styled-engine-sc": "^5.0.0-rc.0",
"#mui/styled-engine": "npm:#mui/styled-engine-sc#next",
...
}
Does anyone know why this would work when I do npm install but not when I npm link? Thanks!

Unable to resolve module `react-native-gesture-handler`

unable to resolve "react-native-gesture-handler" from "node_modules/#react-navigation/native/src/Scrollables.js"
E:\>npm install react-native-gesture-handler --save
npm ERR! code ENOENT
npm ERR! syscall spawn git
npm ERR! path git
npm ERR! errno ENOENT
npm ERR! enoent Error while executing:
npm ERR! enoent undefined ls-remote -h -t https://github.com/naver/hammer.js.git
npm ERR! enoent
npm ERR! enoent
npm ERR! enoent spawn git ENOENT
npm ERR! enoent This is related to npm not being able to find a file.
npm ERR! enoent
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\AppData\Roaming\npm-cache\_logs\2020-02-13T05_04_32_3
58Z-debug.log
I just found the solution of this problem ..
It's Just version Error
npm install react-native-gesture-handler#1.3.0
When I try this
It's Working
In your scenario I think you haven't install the gesture handler package.
For more information on React Native Gesture Handler please visit here
SOLUTION
Inside your project root folder run this code :
If you are using npm - npm install --save react-native-gesture-handler
If you are using yarn - yarn add react-native-gesture-handler
Once you have installed above package run your project using react-native run
If you still getting errors open cmd via administrator and run above code
Cause
Some some reason, autolinking is not working and had to manually link packages in both IOS and android.
Specs
"react": "17.0.1",
"react-native": "0.64.2",
"#react-navigation/native": "^5.9.4",
"#react-navigation/stack": "^5.14.5",
"react-native-gesture-handler": "^1.10.3",
Solution
put import 'react-native-gesture-handler'; at the top of the app.js or index.js
Android
Step 1
implementation project(':react-native-gesture-handler') in app/build.gradle file inside dependencies {} block.
Step 2
in MainActivity.java
package com.myapp;
import com.facebook.react.ReactActivity;
import com.facebook.react.ReactActivityDelegate;
import com.facebook.react.ReactRootView;
import com.swmansion.gesturehandler.react.RNGestureHandlerEnabledRootView;
public class MainActivity extends ReactActivity {
/**
* Returns the name of the main component registered from JavaScript. This is used to schedule
* rendering of the component.
*/
#Override
protected String getMainComponentName() {
return "myapp";
}
#Override
protected ReactActivityDelegate createReactActivityDelegate() {
return new ReactActivityDelegate(this, getMainComponentName()) {
#Override
protected ReactRootView createRootView() {
return new RNGestureHandlerEnabledRootView(MainActivity.this);
}
};
}
}
Step 3
add import com.swmansion.gesturehandler.react.RNGestureHandlerPackage; in MainApplication.java also add packages.add(new RNGestureHandlerPackage()); in getPackages() function like below
#Override
protected List<ReactPackage> getPackages() {
#SuppressWarnings("UnnecessaryLocalVariable")
List<ReactPackage> packages = new PackageList(this).getPackages();
// Packages that cannot be autolinked yet can be added manually here, for example:
// packages.add(new MyReactNativePackage());
packages.add(new MapsPackage());
packages.add(new VectorIconsPackage());
packages.add(new RNGestureHandlerPackage());
return packages;
}
Step 4
add following in settings.gradle file
include ':react-native-gesture-handler'
project(':react-native-gesture-handler').projectDir = new File(rootProject.projectDir, '../../../node_modules/react-native-gesture-handler/android')
Note: Make necessary adjustments for ../../../ in your case it can be ../ because I am using monorepo concept.
delete node_modoules
run npm install --save react-native-gesture-handler (additional android setup here - https://software-mansion.github.io/react-native-gesture-handler/docs/getting-started.html)
Bare React Native#
yarn add react-native-gesture-handler
** Update your MainActivity.java file **
import com.facebook.react.ReactActivity;
import com.facebook.react.ReactActivityDelegate;
import com.facebook.react.ReactRootView;
import com.swmansion.gesturehandler.react.RNGestureHandlerEnabledRootView;

Unable to resolve react-native-swiper

Relatively new to react native. Issued the following commmands to create a new react native project:
create-react-native-app SwiperExample
cd SwiperExample
npm install --save react-native-swipe-gestures
I modified App.js and included
import Swiper from 'react-native-swiper';
When I go to test using npm start, I the following error:
Unable to resolve react-native-swiper" from "./C:\Users\sue\ReactNativeApps\SwiperExample\App.js"
Failed building JavaScript bundle
My package.json include the following dependecies
"dependencies": {
"expo": "^25.0.0",
"react": "16.2.0",
"react-native": "0.52.0",
"react-native-swipe-gestures": "^1.0.2"
}
Any suggestions what is wrong?
You are doing a wrong import
Change this
import Swiper from 'react-native-swiper';
By
import Swiper from 'react-native-swiper-gestures';
Or install the correct package in case you installed the wrong one
npm install --save react-native-swipe

React-Native Install Error with Babel ES2015

I am trying to start a new react-native project following the Getting Started example in the projects docs. Below is the install and error I get. NODE is 5.2, NPM is 3.3.12. Mac is El Capitain.
I get an error: Error: Couldn't find preset "es2015" relative to directory referencing ES2015 relative to directory.
I then follow the advice here and have both presets installed globally and locally in the project. You can see it in the npm ls -g command below that its installed globally. After installing it locally in the project, i get a peer deependency warning for react: UNMET PEER DEPENDENCY react#15.0.2
I then installed react#15.0.2. I then re-run react-native run-ios and I get the same error:
Alains-MacBook-Pro:AwesomeProject klik$ react-native run-ios
/Users/klik/projects/AwesomeProject/node_modules/babel-core/lib/transformation/file/options/option-manager.js:413
throw new Error( /*istanbul ignore next*/"Couldn't find preset " + /*istanbul ignore next*/(0, _stringify2.default)(val) + " relative to directory " + /*istanbul ignore next*/(0, _stringify2.default)(dirname));
^
Error: Couldn't find preset "es2015" relative to directory "/Users/klik"
at /Users/klik/projects/AwesomeProject/node_modules/babel-core/lib/transformation/file/options/option-manager.js:413:17
at Array.map (native)
I then run npm install on the project and get the same error again.
Alains-MacBook-Pro:AwesomeProject klik$ npm -v
3.3.12
Alains-MacBook-Pro:AwesomeProject klik$ npm install
Alains-MacBook-Pro:AwesomeProject klik$ react-native run-ios
/Users/klik/projects/AwesomeProject/node_modules/babel-core/lib/transformation/file/options/option-manager.js:413
throw new Error( /*istanbul ignore next*/"Couldn't find preset " + /*istanbul ignore next*/(0, _stringify2.default)(val) + " relative to directory " + /*istanbul ignore next*/(0, _stringify2.default)(dirname));
^
Error: Couldn't find preset "es2015" relative to directory "/Users/klik"
at /Users/klik/projects/AwesomeProject/node_modules/babel-core/lib/transformation/file/options/option-manager.js:413:17
at Array.map (native)
at OptionManager.resolvePresets (/Users/klik/projects/AwesomeProject/node_modules/babel-core/lib/transformation/file/options/option-manager.js:405:20)
at OptionManager.mergePresets (/Users/klik/projects/AwesomeProject/node_modules/babel-core/lib/transformation/file/options/option-manager.js:388:10)
at OptionManager.mergeOptions (/Users/klik/projects/AwesomeProject/node_modules/babel-core/lib/transformation/file/options/option-manager.js:347:14)
at OptionManager.addConfig (/Users/klik/projects/AwesomeProject/node_modules/babel-core/lib/transformation/file/options/option-manager.js:248:10)
at OptionManager.findConfigs (/Users/klik/projects/AwesomeProject/node_modules/babel-core/lib/transformation/file/options/option-manager.js:454:16)
at OptionManager.init (/Users/klik/projects/AwesomeProject/node_modules/babel-core/lib/transformation/file/options/option-manager.js:502:12)
at compile (/Users/klik/projects/AwesomeProject/node_modules/babel-register/lib/node.js:112:69)
at loader (/Users/klik/projects/AwesomeProject/node_modules/babel-register/lib/node.js:158:14)
I then add a .babelrc file with the following JSON. This has worked on other projects for me after reading it on Babeljs.io and I saw it suggested here again so I tried it. It didnt work but produced this different error referencing the promise directory. This looks like it waiting for a promise to return with the ios file in the project, which doesnt exist because React-Native never completed the install. All I have for files in the project after running npm install are node_modules directory and package.json and the .babelrc file I added:
Alains-MacBook-Pro:AwesomeProject klik$ npm install
Alains-MacBook-Pro:AwesomeProject klik$ react-native run-ios
/Users/klik/projects/AwesomeProject/node_modules/promise/lib/done.js:10
throw err;
^
Error: ENOENT: no such file or directory, uv_chdir
at Error (native)
at process.chdir (/Users/klik/projects/AwesomeProject/node_modules/graceful-fs/polyfills.js:18:9)
at _runIOS (runIOS.js:51:11)
at runIOS.js:24:5
at tryCallTwo (/Users/klik/projects/AwesomeProject/node_modules/promise/lib/core.js:45:5)
at doResolve (/Users/klik/projects/AwesomeProject/node_modules/promise/lib/core.js:200:13)
at new Promise (/Users/klik/projects/AwesomeProject/node_modules/promise/lib/core.js:66:3)
at Array.runIOS (runIOS.js:23:10)
at Object.run (/Users/klik/projects/AwesomeProject/node_modules/react-native/local-cli/cli.js:87:13)
at Object.<anonymous> (/Users/klik/.nvm/versions/node/v5.2.0/lib/node_modules/react-native-cli/index.js:88:7)
This is the original install with error:
Alains-MacBook-Pro:~ klik$ npm ls -g --depth=0
/Users/klik/.nvm/versions/node/v5.2.0/lib
├── babel-cli#6.8.0
├── babel-preset-es2015#6.6.0
├── babel-preset-react#6.5.0
├── cf-package#1.0.2
├── eslint#2.10.2
├── express#4.13.4
├── firebase-tools#3.0.0
├── gulp-cli#1.2.1
├── jshint#2.9.2
├── node-pre-gyp#0.6.28
├── nodemon#1.9.2
├── npm#3.3.12
├── react-native-cli#0.2.0
├── reindex-cli#0.4.1
├── rnpm#1.7.0
├── webpack#1.13.0
└── webpack-dev-server#1.14.1
Alains-MacBook-Pro:~ klik$ which node
**/Users/klik/.nvm/versions/node/v5.2.0/bin/node**
Alains-MacBook-Pro:~ klik$ which npm
**/Users/klik/.nvm/versions/node/v5.2.0/bin/npm**
Alains-MacBook-Pro:~ klik$ watchman -v
4.5.0
Alains-MacBook-Pro:~ klik$ cd projects
Alains-MacBook-Pro:projects klik$ react-native init AwesomeProject
This will walk you through creating a new React Native project in /Users/klik/projects/AwesomeProject
Installing react-native package from npm...
/Users/klik/projects/AwesomeProject/node_modules/babel-core/lib/transformation/file/options/option-manager.js:413
throw new Error( /*istanbul ignore next*/"Couldn't find preset " + /*istanbul ignore next*/(0, _stringify2.default)(val) + " relative to directory " + /*istanbul ignore next*/(0, _stringify2.default)(dirname));
^
Error: Couldn't find preset "es2015" relative to directory "/Users/klik"
at /Users/klik/projects/AwesomeProject/node_modules/babel-core/lib/transformation/file/options/option-manager.js:413:17
at Array.map (native)
at OptionManager.resolvePresets (/Users/klik/projects/AwesomeProject/node_modules/babel-core/lib/transformation/file/options/option-manager.js:405:20)
at OptionManager.mergePresets (/Users/klik/projects/AwesomeProject/node_modules/babel-core/lib/transformation/file/options/option-manager.js:388:10)
at OptionManager.mergeOptions (/Users/klik/projects/AwesomeProject/node_modules/babel-core/lib/transformation/file/options/option-manager.js:347:14)
at OptionManager.addConfig (/Users/klik/projects/AwesomeProject/node_modules/babel-core/lib/transformation/file/options/option-manager.js:248:10)
at OptionManager.findConfigs (/Users/klik/projects/AwesomeProject/node_modules/babel-core/lib/transformation/file/options/option-manager.js:454:16)
at OptionManager.init (/Users/klik/projects/AwesomeProject/node_modules/babel-core/lib/transformation/file/options/option-manager.js:502:12)
at compile (/Users/klik/projects/AwesomeProject/node_modules/babel-register/lib/node.js:112:69)
at loader (/Users/klik/projects/AwesomeProject/node_modules/babel-register/lib/node.js:158:14)
Alains-MacBook-Pro:projects klik$
Any ideas come to mind? Thank you in advance for your help.
tl;dr.
npm i babel-preset-react-native --save-dev
$ echo '{"presets": ["react-native"]}' > .babelrc
So the problem as noted in the first error starts in the babel options manager:
at OptionManager.init (/Users/klik/projects/AwesomeProject/node_modules/babel-core/lib/transformation/file/options/option-manager.js:502:12)
While trying to figure out how to get any react-native project running, I came across Este's DevStack for react-native. When I installed, it worked as advertised. I went to the code to see why this worked and not one single other worked. Este has a .babelrc file. This is it:
Este .babelrc
{
"presets": ["react-native"],
"env": {
"production": {
"plugins": [
"transform-react-constant-elements",
"transform-react-inline-elements"
]
}
}
}
I added the "env" setting to the .babelrc i created earlier. This is the current .babelrc file.
{
"retainLines": true,
"compact": true,
"comments": false,
"plugins": [],
"presets": ["react", "react-native"],
"env": {
"plugins": [
"transform-react-constant-elements",
"transform-react-inline-elements"
]
},
"sourceMaps": false,
}
I added this options configuration into each previous project including the one that is the subject of the question and everyone of them worked. This includes the Firebase, example. They all worked. Apparently, Babel 6 no longer does transforms by default and you have to enable it. I checked the React-Native Babel Preset on github and it handles transforms. So this is the new .babelrc file and it works.
{"presets": ["react-native"]}
Turns out #jaxoncreed has the right solution in his question here. The answer there suggests there is a default fallback .babelrc file that will be used if you put one in. In the copy of the the tutorial project downloaded a few days ago, that file doesn't exist. So the short answer is I need to add the .babelrc file in the project.
npm i babel-preset-react-native --save-dev
$ echo '{"presets": ["react-native"]}' > .babelrc