react-native, bundling failed - javascript

I am new to react-native and have found an error that makes absolutely no sense to me.
I am trying to include a calendar library: https://github.com/wix/react-native-calendars
I have included the dependency for that library in my package.json file and run npm install
The project was running fine and as expected. I have simply added one line of code to the project:
import { Calendar, CalendarList, Agenda } from 'react-native-calendars';
Nothing else. However now I am getting a red error message when the app loads on device and this is what my console is saying:
error: bundling failed: Error: While trying to resolve module xdate
from file
/Users/Alex/Documents/workspace/mobile/node_modules/react-native-calendars/src/index.js,
the package
/Users/Alex/Documents/workspace/mobile/node_modules/xdate/package.json
was successfully found. However, this package itself specifies a
main module field that could not be resolved
(/Users/Alex/Documents/workspace/mobile/node_modules/xdate/src/xdate.js.
Indeed, none of these files exist:
*
/Users/Alex/Documents/workspace/mobile/node_modules/xdate/src/xdate.js(.native||.ios.js|.native.js|.js|.ios.json|.native.json|.json)
*
/Users/Alex/Documents/workspace/mobile/node_modules/xdate/src/xdate.js/index(.native||.ios.js|.native.js|.js|.ios.json|.native.json|.json)
at ResolutionRequest.resolveDependency (/Users/Alex/Documents/workspace/mobile/node_modules/metro/src/node-haste/DependencyGraph/ResolutionRequest.js:103:15)
at DependencyGraph.resolveDependency (/Users/Alex/Documents/workspace/mobile/node_modules/metro/src/node-haste/DependencyGraph.js:272:4579)
at dependencies.map.relativePath (/Users/Alex/Documents/workspace/mobile/node_modules/metro/src/DeltaBundler/traverseDependencies.js:376:19)
at Array.map ()
at resolveDependencies (/Users/Alex/Documents/workspace/mobile/node_modules/metro/src/DeltaBundler/traverseDependencies.js:374:16)
at /Users/Alex/Documents/workspace/mobile/node_modules/metro/src/DeltaBundler/traverseDependencies.js:212:33
at Generator.next ()
at step (/Users/Alex/Documents/workspace/mobile/node_modules/metro/src/DeltaBundler/traverseDependencies.js:297:313)
at /Users/Alex/Documents/workspace/mobile/node_modules/metro/src/DeltaBundler/traverseDependencies.js:297:473
at
However I have checked in the directory and in fact /Users/Alex/Documents/workspace/mobile/node_modules/xdate/src/xdate.js does exist. However I do not see any of this part: (.native||.ios.js|.native.js|.js|.ios.json|.native.json|.json)`
As to how /Users/Alex/Documents/workspace/mobile/node_modules/xdate/src/xdate.js/index can exist, that doesn't make sense because xdate.js is not a directory.
Any help?

It Usually happens if you try to install a module while your packager is open.
Try to delete node_modules folder and close the packager.
Then reinstall everything by npm install in your project directory.

First close your JavaScript bundler (Metro bundler in my case) and restart the application. This will create fresh dependency graph. This should solve the issue.

Just restart the bundler - no need to delete the Node Modules folder
I came across this issue when adding and using react-native-elements when using VS Code and Android Studio emulator on Linux Mint
In VS Code I had a terminal running Expo with Metro Bundler via 'npm start' command. After installing the react-native-elements in the folder (using 'npm install --save react-native-elements') and adding the import into the .js file I got the "However, this package itself specifies a main module field that could not be resolved" error.
In my case, this just involved a ^C in the terminal session to stop the Metro bundler and then running 'npm start' again. There was no need to delete the node modules folder at all.

If you're still getting the error even after deleting the ./node_modules folder and running npm install again, try doing the install with the --update-binary flag, i.e npm install --update-binary. This should clear out and rebuild any previously built packages on your machine.

Please don't delete the node modules folder.
The bundler has least to deal with node modules folder.
Instead close all the terminals. If using VS-code close that also.
Close all the local host server ports and if possible restart the system.
This might solve the issue.

If anyone have same issue, and remove node_module not working. Then you can try remove all node_module, package lock and using yarn to install node_module instead npm. Hope this help

None of the solutions above helped me except for restarting my MacBook. Wasted 30 minutes trying to fix this issue as I couldn't believe restarting my computer could be a solution.

Related

Node cannot find path in node_modules / 'react-scripts' is not recognized as an internal or external command

I'm on windows 10
When I run:
npm run start
or
npm start
I get an error:
npm start
> app-test#0.1.0 start
> react-scripts start
'react-scripts' is not recognized as an internal or external command,
operable program or batch file.
What I already tried:
npm ci
remove node_modules and reinstall project
npm audit fix
run command from elevated PowerShell (as admin)
Uninstall Node v.18 win NVM and reinstall common Node installation LTS v.16
Check if react scripts is on dependencies section in package.json - and it's of course there.
Recreate project itself and also create a fresh new React project with npx create-react-app
Clearing npm cache
Nothing's helped me.
BUT This project runs fine WHEN I explicitly tell the node path to subfolder with a script:
app-test> node node_modules/react-scripts/scripts/start.js
Compiled successfully!
You can now view app-test in the browser.
Local: http://localhost:3000
On Your Network: http://192.168.91.1:3000
Note that the development build is not optimized.
To create a production build, use npm run build.
webpack compiled successfully
What's interesting that an old React projects also resided in the parent folder starts normally even I renew node_modules in these projects doing them npm i or npm ci
But any time I try to create and start new React app command npm start fails
UPD1: Tried to create-react-app on any other drive or folder. And it's running ok.
So culprit seems permissions policies in my common working directory ?
UPD2:
I resolved a problem though still have no clear idea who was actually the really culprit of this bug.
I copied all my parent developer folder with all code examples to another drive, then tried to create react app there and out of the blue it worked fine at then new location.
Also I removed this original folder from the drive where it used to be. And do git clone "..." at this directory< recreating the exact structure as it was before all experiments.
Then I tried create-react-app exactly at that location as I've unsuccessfully tried before swapping folders and it was OK !
Tried couple of time with different folder location within parent directory and all sill working fine now !
I remembered now I already have such bug before. And I had to reinstall Windows that time.
I also want to mention that I also have another machine with Windows, another one with Linux and had also laptop with an OSX so I can ( or could) push to this very git repository from any of these computers.
Suggestion of somebody who have any idea, why this bug was happening repeatable would be highly appreciated.
Thanks.

Javascript issue installing npm packages (nodemon, express)

I'm new to js and trying to setup a simple project with express and nodemon via npm.
However, installing these packages does give me multiple errors (see below).
I am on Win 10, using the PowerShell & Atom IDE. Project is saved on Google Drive.
"Calc.js" is simply the name of my project.
I have node & npm installed and restarted pc multiple times before.
Then I set up the npm init
I begin to install the first package and get this error:
I try to install express, but get the same result, adding -g also does not make a difference. Now I install "ci", which works for some reason.
Now I have the node modules folder in my project, try to install express again, and it seems to kinda work (got the files in the node_modules folder).
However when I try to run the calc.js via "node calc.js" it
does not work.
Already tried out many things and even accidentally made it work, then tried to reproduce it and failed. Would be super happy for some help.

How can I run nodejs in eclipse?(javascript runtime does not appear in eclipse preferences)

Maybe similar questions found but those are very old and recommending outdated plugins.
-I'm using eclipse Ide for enterprise java developers 2021-06 and installed Nodejs 16.3 and Npm.
As eclipse news
says, Eclipse Neon and later will support jnodejs by default and you can configure runtime but I don't see any runtime in javaScript section in preferences and any option related to nodeJs and JavaScript in import sections.
I tried to install nodeClipse plugin but encountered errors.
When I import nodeJs project as general project, I get this error.
C:\Users\Hamidreza Abroshan\Documents\workspace-spring-tool-suite-4-4.12.0.RELEASE.metadata.plugins\org.eclipse.wildwebdeveloper.embedder.node\node-v14.15.4-win-x64\node.exe index.js
D:\dclm\dclm-customer-interaction-worker\dclm\node_modules\grpc\src\grpc_extension.js:55
throw error;
^
Error: Failed to load gRPC binary module because it was not installed for the current system
Expected directory: node-v83-win32-x64-unknown
Found: [node-v93-win32-x64-unknown]
This problem can often be fixed by running "npm rebuild" on the current system
Original error: Cannot find module 'D:\dclm\dclm-customer-interaction-worker\dclm\node_modules\grpc\src\node\extension_binary\node-v83-win32-x64-unknown\grpc_node.node'
Require stack:
D:\dclm\dclm-customer-interaction-worker\dclm\node_modules\grpc\src\grpc_extension.js
**Note: I can run this project from command line successfully with npm run start.
Thanks in advance.
I found this way, but if you found better way, please post your answer.
First, import the app as general project E.G, file>import>general>existing project in to workSpace.
Then, open project explorer view and find package.json.
Write click on that and choose run configuration.
choose launch npm and create new configuration.
Now, in npm command enter run start and in package.json file enter the file's address.
Hit run and your app will run successfully.
This config should be done for the first time and for later times, you can go to runAs and choose npm...
If you can not find package.json, open Cmd and navigate to project root folder and type npm run start and it will download some dependencies and create package.json also.

Getting Node Module Error (Cannot find module)

I am learning the Automated tests by using selenium web driver + Javascript and node.js.
Everything is working fine when I ran that script.js from the Visual Studio code terminal(by using node main.js)
Problem
I want to schedule this script in the scheduler which automatically tests the login functionality. But when I try to run it from the task scheduler then it gives Error: Cannot find module
Does anybody know how to get rid of this.
To fix Cannot find module errors, install the modules properly by running a npm install command in the appropriate directory as your project's app. ... or delete the node_modules folder and package-lock. json file and re-install it again using the npm install command.
rm -rf node_modules package-lock.json

Next.js: Module not found: Can't resolve 'canvg'

I have a next.js project and I keep getting:
error - ./node_modules/jspdf/dist/jspdf.es.min.js:458:25
Module not found: Can't resolve 'canvg'
I'm not sure why because I'm not including either jspdf or canvg.
Not sure what's causing it. Any help would be appreciated. I'm using material-ui if that matters.
It seems dependency error means that particular Module is missing when it's running.
Run npm ls or yarn list will print to stdout all the versions of packages that are installed, as well as their dependencies, in a tree-structure. Then search for that particulate packages are listed or not.
Run npm ls jspdf or yarn list jspdf then you can see its list of dependencies in tree-structure.
Please check your node version is updated or not ? If not then update first.
Quick & Dirty way: delete package.lock or yarn.lock file and delete .node_modules folders And Then run npm install or yarn to install again.
Look at console while you installing and make sure there are no error in the installing process. If you saw error you better look that massages also.

Categories

Resources