React and Bootstrap4 issue when creating application using create-react-app - javascript

I am using Windows 10. Follwoing are the two scenarios where I faced problems. I created applications using create-react-app command. I installed create-react-app using command npm i -g create-react-app#1.5.2
Scenario 1
I stopped react server which was running using npm start command. Then I installed bootstrap using npm i bootstarp#4.1.1 and then I tried to run command npm start but rathern than starting the server, it has given an error 'react-scripts' is not recognized as an internal or external command.
The application is working perfactly before I stopped the react server and installed bootstrap.
Steps to recreate the problem:
create-react-app demo
cd demo
npm start (loaded the application in browser with home page)
stopped the server using Ctrl + C (break)
npm i bootstrap#4.1.1
npm start (giving error 'react-scripts' is not recognized as an internal or external command)
Scenario 2
I installed bootstrap in running react server using another command window / visul studio command line using npm i bootstarp#4.1.1 and when I imported bootstrap file in index.js and saved the file. It have given error
./node_modules/style-loader/lib/addStyles.js
Module build failed: Error: ENOENT: no such file or directory, open 'D:\react\demo2\node_modules\style-loader\lib\addStyles.js'
Steps to recreate the problem:
create-react-app demo
cd demo2
npm start (loaded the application in browser with home page)
Open another command window and reached to location demo4 folder
npm i bootstrap#4.1.1
open index.js in src folder and write: import 'bootstrap/dist/css/bootstrap.css';
save the file and error comes.

I've found many topics about this issue:
https://github.com/facebook/create-react-app/issues/1627
https://github.com/facebook/create-react-app/issues/2436
'react-scripts' is not recognized as an internal or external command
I think that it is related to the npm version that you use. It seems that npm doesn't install all the required dependencies.
Try to run npm update in order to update the dependencies. After this, npm start should work fine:
npm update
npm start

Related

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

No such file or directory react-native/scripts/libraries

I'm trying to fix this error on github - https://github.com/callstack/react-native-fbads/issues/286 . I cloned the existing repo and ran it and the error was still there. I am currently updating packages to see why this crash keeps happening, but when I try to upgrade to react-native 0.64 from 0.63.4 i get this error in xcode while trying to run on device or simulator:
Projects/ReactNative-FBAds-AdChoicesView-Issue/node_modules/react-native/scripts/../Libraries: No such file or directory
seems like when upgrading to 0.64, the libraries folder is no longer in the scripts folder... Any help would be appreciated. I'm using the same repo as in the link above and then i run npm install -g npm-check-updates
and then ncu -u and then npm install and then cd ios & pod install
(update - 0.63.4 also does not have the libraries folder in there.)
This happened also to me upgrading from 0.63 to 0.64. After trying all solutions I followed a solution moving the folder to a directory where the path contain no spaces and it works and build the app successfully.
Solution to React Native 0.64 build fail
In order for this to work properly follow these steps:
If you previously installed a global react-native-cli package, please
remove it as it may cause unexpected issues (i.e. npm uninstall -g
react-native-cli)
Move the project folder in a path with no spaces (i.e. ~/sub folder
name/ReactNativeApp won't work till you have spaces in the path, so
move in a path like ~/folder/ReactNativeApp)
Then cd into the project folder and upgrade react native to the
latest version with npx react-native upgrade and resolve conflicts if
any
After upgrading remove the node_modules folder and the yarn.lock from
the root and the podfile.lock and Pods folder from ios subfolder
Then cd back to the root and run yarn install && npx pod-install
Now run again your app in Xcode or your IDE and it works
Crazy and absurd that a space in the path-name could cause this issue

How to run npm commands like create-react-app offline

I am working offline without any internet connectivity. I have node JS installed on my system. When I am trying to run the npm create-react-app command it gives me error. Is there any way for me to run npm commands and get react application running offline? Below is the error code I get:
npm ERR! code ENOTFOUND
npm ERR! errcode ENOTFOUND
npm ERR! network request to https://registry.npmjs.org/create-react-app failed,
reason: getaddrinfo ENOTFOUND registry.npmjs.org
and get react application running offline
npm start works offline already. Once you created your application, you should have no problem.
i am trying to run the npm create-react-app command [offline]
Npm is basically a package manager, which downloads dependencies for you, located under /node_modules at your project root.
create-react-app does two things :
Install specific dependencies for React : as a huge framework, React doesn't only require Node.js to run, but also multiple other packages (including React istelf).
Creating a template project with some presets.
If you are working offline and need to create multiple React projects that way, then you'll have no choice but to run the create-react-app command at least once while being online.
However, once you created your first React app, you can just leave the folder untouched : this will give you a fully functional offline copy for your React applications.
When you're back offline, just copy those files to the folder of the React application you want to create (make sure to copy everything, including the node_modules folder). You should then be able to run npm start offline, and build your application.
I believe this is what you are looking for
https://npm.io/package/create-react-app-offline
It helps you create (download) a react project installer, which you can use to create any react JavaScript project offline.

React native with expo: ‘react-navigation does not exist in the haste module map’

I’m a beginner working on my first app with react native and expo. I’m having trouble getting the navigation to work. When I run the app, I get the error ‘react-navigation does not exist in the haste module map’. I’ve installed react navigation through the command line and ran install npm to install dependancies.
I also had the same problems few weeks back , please follow the steps below :
Open terminal and navigate to project root directory.
write 'rm -rf node_modules' in the terminal to remove the node modules.
write 'npm install' in order to install the node modules again
write 'cd ios'.
write 'rm -r build' to clear the old build.
come back to the root folder of project again and run the project.
Your code will run smoothly.

build dev failed: Cannot set property 'fileSystem' of null

I am trying to run an Ionic 2 Application. I am getting following error on running ionic serve
build dev failed: Cannot set property 'fileSystem' of null
The complete log is as below:
λ ionic serve
> ionic-hello-world# ionic:serve D:\ionic
> ionic-app-scripts serve
[18:11:23] ionic-app-scripts 0.0.47
[18:11:24] watch started ...
[18:11:24] build dev started ...
[18:11:24] clean started ...
[18:11:24] clean finished in 6 ms
[18:11:24] copy started ...
[18:11:24] transpile started ...
[18:11:28] transpile finished in 4.15 s
[18:11:28] webpack started ...
[18:11:28] build dev failed: Cannot set property 'fileSystem' of null
[18:11:28] dev server running: http://localhost:8100/
[18:11:28] copy finished in 4.39 s
[18:11:28] watch ready in 4.44 s
Update your ionic app scripts to the latest version. It is 1.0.0 for RC5 release.
npm install #ionic/app-scripts#latest --save-dev.
As suggested, check the package.json from here.
Run npm install
This worked for me:
In your project go to yourProjectname\node_modules\#typesoject
Then install
$ npm install pouchdb #types/pouchdb
You can now use
import PouchDB from 'pouchdb';
as explained here here
I also faced this issue for Ionic2 application. When i tried to run the application in ripple browser it was telling "You're almost ready! If you're seeing this page, then you still need to install the NPM Task Runner extension for Visual Studio and run this app again. You can download the extension from:".
I struggled a lot to resolve the issue i was using visual studio 2015 Update3.
Finally i got a solution issue was with ionic "#ionic/app-scripts".
To resolve the issue i fallowed the below steps.
1] execute command "npm uninstall -g ionic" in Command Prompt.
2] Update the version of #ionic/app-scripts to 1.1.4 i.e "#ionic/app-scripts": "1.1.4" in package.json file and Save the file.
3] execute command "npm install -g ionic" in Command Prompt.
it will give some warning don't need to wary about it.
4] again i have done Restore Packages by right clicking on the packages.json file.
5] next go to view menu in the visual studio and select other windows from there select Task Runner Explorer.
6] Right Click on ionic:build select Binding > Before Build(it will make the all the ionic component to build first before deploying to www directory.
Make sure you have deleted the node_module folder before starting these steps.
That's all everything got set to me application started working fine.
I hope it will help some one.
Second solution is instead black project take sidemenu project even if you fail do the above mentioned steps and restart the visual studio and create new project with sidemenu it will work fine.

Categories

Resources