bundling error on react native app (ambigous resolution) - react-native

Bundling `index.js` [development, non-minified] 0.0% (0/1), failed.
error: bundling failed: ambiguous resolution: module `C:\Users\mtlok\Desktop\RN2\pep_beta\index.js` tries to require `react-native`, but there are several files providing this module. You can delete or fix them:
* `C:\Users\mtlok\Desktop\RN2\pep_beta\node_modules\react-native-responsive-dimensions\node_modules\react-native\package.json`
* `C:\Users\mtlok\Desktop\RN2\pep_beta\node_modules\react-native\package.json`
Im getting this error when bundling react-native app.
This issue may be caused by the react-native-responsive-dimensions package
Here is the package.json file:
{
"name": "react-native-responsive-dimensions",
"version": "1.0.1",
"description": "Resposive fontSize, height and width for your react-native components.",
"main": "src/index.js",
"scripts": {
"start": "node src/index.js",
"test": "exit 0"
},
"keywords": [
"react-native",
"responsive",
"responsive-height",
"responsive-width",
"responsive-font-size",
"fontSize",
"responsive-dimensions"
],
"author": "DaniAkash <s.daniakash#gmail.com> (https://github.com/DaniAkash)",
"repository": "DaniAkash/react-native-responsive-dimensions",
"license": "MIT",
"dependencies": {
"react-native": "x"
}
}
Also, there is a node_modules folder located inside node_modules/react-native-responsive-dimensions.
Is there a quick fix?

Try this command. maybe it's because of cache.
yarn start -- --reset-cache
or
npm start -- --reset-cache
if it doesn't work you can try react-native-git-upgrade or you can just delete node_modules folder then run npm install,react-native upgrade ande react-native-link

You can uninstall react-native-responsive-dimensions package first.
npm uninstall react-native-responsive-dimensions --save
And then
yarn start -- --reset-cache or npm start -- --reset-cache
react-native run-android or react-native run-ios

Related

#tanstack/react-table npm install

I want to try basic project from tanstack/react-table from
https://github.com/TanStack/table/tree/main/examples/react/basic
I am new in NPM. I am on Windows.
I wrote:
git clone https://github.com/TanStack/table.git
then I am going to the subfolder examples\react\basic
then I wrote:
npm install
and in subfolder "node_modules" only folders "react" and "react-dom" appeard.
There is package.json:
{
"name": "tanstack-table-example-basic",
"version": "0.0.0",
"private": true,
"scripts": {
"dev": "vite",
"build": "vite build",
"serve": "vite preview",
"start": "vite"
},
"dependencies": {
"#tanstack/react-table": "^8.2.6",
"react": "^18.2.0",
"react-dom": "^18.2.0"
},
"devDependencies": {
"#rollup/plugin-replace": "^4.0.0",
"#vitejs/plugin-react": "^1.1.3",
"vite": "^2.8.6"
}
}
Please, why the "#tanstack/react-table" package is not installed?
When I wrote:
npm start
I received message:
[ERROR] [plugin vite:dep-scan] Failed to resolve entry for package "#tanstack/react-table".
I tried to write:
npm install #tanstack/react-table -g
and folder "#tanstack/react-table" appeard in folder C:\Users...\AppData\Roaming\npm\node_modules. I copied it to project folder and start project and all was OK. But I think, it is not right way.
What am I doing bad, please?
do you want to add react-table to your own project or you just want to clone their project and run the samples ?
for the first one you should go to your project folder and write this in cmd
npm install #tanstack/react-table
for the second one you should clone their project then go to example folder
then write npm install in cmd
Edit 1
remove all the node_modules in any folder of project
run this command in main folder yarn install
run yarn install in folder examples/react/basic
run command npm start in basic folder
before start you should install yarn if you didn't have it

Unable to install WebPack CLI

I'm trying out webpack for the first time, but I cant even get past the installation of webpack-cli
I get this error
{ Error: Cannot find module 'webpack-cli'
at Function.Module._resolveFilename (internal/modules/cjs/loader.js:580:15)
at Function.Module._load (internal/modules/cjs/loader.js:506:25)
at Module.require (internal/modules/cjs/loader.js:636:17)
at require (internal/modules/cjs/helpers.js:20:18)
at runCommand.then (C:\Users\Henrik\AppData\Roaming\npm\node_modules\webpack\bin\webpack.js:142:5)
at process._tickCallback (internal/process/next_tick.js:68:7) code: 'MODULE_NOT_FOUND' }
When I run webpack it suggest to auto install it, but fails at that.
Any suggestions?
-- EDIT 1 --
My package.json looks like this:
{
"name": "webpacktest",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"devDependencies": {
"webpack-cli": "^3.2.1",
"webpack-dev-server": "^3.1.14"
},
"dependencies": {}
}
I've tried running this : "npm install webpack-cli --save-dev" amongst various other suggestions found all over the web
Try this:
npm install -g --save-dev webpack-cli
Looks like you might be trying to use a global webpack package with a local webpack-cli package.
Try adding webpack to your devDependencies and running webpack from inside an npm/yarn script, and if that doesn't work try uninstalling your global webpack binary.
I executed your package.json and it worked without any errors
Try deleting the node_modules folder and run the comand npm install from the prompt

react-native init AwesomeProject - fails to build

I cannot get a vanilla react-native project to build immediately after running react-native init. I have not made any changes to the project, nor run other commands.
Commands/output:
> react-native init AwesomeProject
> cd AwesomeProject
> react-native run-ios
....
** BUILD FAILED **
The following commands produced analyzer issues:
Analyze Base/RCTModuleMethod.mm normal x86_64
Analyze RCTVibration.m normal x86_64
(2 commands with analyzer issues)
The following build commands failed:
CompileC build/RCTVibration.build/Debug-iphonesimulator/RCTVibration.build/Objects-normal/x86_64/RCTVibration.o RCTVibration.m normal x86_64 objective-c com.apple.compilers.llvm.clang.1_0.compiler
(1 failure)
Installing build/Build/Products/Debug-iphonesimulator/AwesomeProject57.app
An error was encountered processing the command (domain=com.apple.CoreSimulator.SimError, code=164):
Unable to lookup in current state: Shutdown
Print: Entry, ":CFBundleIdentifier", Does Not Exist
Command failed: /usr/libexec/PlistBuddy -c Print:CFBundleIdentifier build/Build/Products/Debug-iphonesimulator/AwesomeProject57.app/Info.plist
Print: Entry, ":CFBundleIdentifier", Does Not Exist
Error: Command failed: /usr/libexec/PlistBuddy -c Print:CFBundleIdentifier build/Build/Products/Debug-iphonesimulator/AwesomeProject57.app/Info.plist
Print: Entry, ":CFBundleIdentifier", Does Not Exist
at checkExecSyncError (child_process.js:601:13)
at Object.execFileSync (child_process.js:621:13)
at Promise.then (/Users/local/common/native-attempt/AwesomeProject57/node_modules/react-native/local-cli/runIOS/runIOS.js:208:5)
at <anonymous>
Mac OS X: 10.3.4
XCode: 9.4.1
react-native: 0.57
react: 16.5.0
package.json:
{
"name": "AwesomeProject",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start",
"test": "jest"
},
"dependencies": {
"react": "16.5.0",
"react-native": "0.57.0"
},
"devDependencies": {
"babel-jest": "23.6.0",
"jest": "23.6.0",
"metro-react-native-babel-preset": "0.45.2",
"react-test-renderer": "16.5.0"
},
"jest": {
"preset": "react-native"
}
}
After looking around StackOverflow, I tried:
rm -rf node_modules
rm -fr $TMPDIR/react-*
watchman watch-del-all
Using react-native run-ios still failed. FWIW, I did open the project in XCode and tried to build it there. I received a build error "/Users/local/common/native-attempt/AwesomeProject/node_modules/react-native/Libraries/Text/RawText/RCTRawTextViewManager.h:8:9: 'React/RCTViewManager.h' file not found". Different error, but I assume it is related.
Really pulling my hair out... any help appreciated.

Yarn installing multiple versions of the same package

I have angular in my dependencies at 1.5.11:
{
"dependencies": {
"angular": "1.5.11",
"angular-foundation": "0.7.0"
}
}
angular-foundation happens to depend on angular#>=1.3.0.
Why does Yarn install angular#1.6.9 as a nested dependency of angular-foundation instead of using the project's version? This causes angular to exist twice in the app and doesn't work properly:
node_modules
angular (1.5.11)
angular-foundation (0.7.0)
node_modules
angular (1.6.9)
This doesn't happen with npm#5.6.0 - npm uses 1.5.11 for both the app and the package.
You need to use Yarn resolutions for this
https://yarnpkg.com/lang/en/docs/selective-version-resolutions/
So your package.json will become like this
{
"name": "depdencies",
"version": "1.0.0",
"main": "index.js",
"license": "MIT",
"dependencies": {
"angular": "1.5.11",
"angular-foundation": "0.7.0"
},
"resolutions": {
"**/angular": "1.5.11"
}
}
Which tells yarn that any child angular dependency will be set to 1.5.11. After updating this run below
$ rm yarn.lock
$ yarn
https://classic.yarnpkg.com/en/docs/cli/add/#toc-yarn-add-alias
yarn add <alias-package>#npm:<package>
yarn add react17#npm:react#17

npm can't find dependencies for some react-native modules

I'm creating a react native app using create-react-native-app
npm create-react-native-app
I updated react-native version to 0.44.0, which requires to update react version to 16.0.0-alpha.6
This is my package.json
{
"name": "test",
"version": "0.1.0",
"private": true,
"devDependencies": {
"react-native-scripts": "0.0.29",
"jest-expo": "^0.4.0",
"react-test-renderer": "~15.5.4"
},
"main": "./node_modules/react-native-scripts/build/bin/crna-entry.js",
"scripts": {
"start": "react-native-scripts start",
"eject": "react-native-scripts eject",
"android": "react-native-scripts android",
"ios": "react-native-scripts ios",
"test": "node node_modules/jest/bin/jest.js --watch"
},
"jest": {
"preset": "jest-expo"
},
"dependencies": {
"#expo/ex-navigation": "^2.11.1",
"babel-preset-react-native-stage-0": "^1.0.1",
"expo": "^16.0.0",
"react": "~16.0.0-alpha.6",
"react-native": "0.44.0"
}
}
Running npm install gives me following errors
C:\dev\repo\test>npm install
npm WARN lottie-react-native#1.1.1 requires a peer of react#>=15.3.1 but none was installed.
npm WARN react-native-maps#0.12.2 requires a peer of react#>=15.4.0 but none was installed.
npm WARN react-native-svg#4.4.1 requires a peer of react#>=15.4.0 but none was installed.
npm WARN react-static-container#1.0.1 requires a peer of react#^0.13.0 || ^0.14.0 || ^15.0.0 but none was installed.
It looks like react version 16.0.0-alpha.6 is not recognized by lottie-react-native, react-native-maps, react-native-svg, and react-static-container. I'm not sure if major version (15) must be met, or the alpha version 16 is not picked up by those libraries, or something else. Does anyone know how to fix this? Thanks.
I have a similar problem, actually right now I get this problem, whenever I try to create a new application with create-react-native-app.
The only solution (hack) I have found right now is:
Delete node_modules (for me it's not enough to just do npm install)
Do npm install
I just solve the same issue by removing the react-native folder in node_modules and reinstall the react-native by run this command
Delete the react-native folder in node_modules
Reinstall react-native by run npm install react-native
I think is more simply than deleting the entire node_modules as only the react-native packages and its package.json is missing.