npm run build hangs no matter what, cannot upgrade webpack - reactjs

I cloned a react repository and would like to run it. However, npm run build and npm start hang indefinitely.
I am trying to run the application on a CentOS 7 server which I access via ssh.
I am running:
npm install
and then
npm run build or npm start
Here is what I see:
my-project# build /local/scratch/my-project/app
webpack --mode development --progress
The progress does not seem to display.
I tried updating webpack with:
npm install --global webpack#4.29.6
I know that I need version 4.29.6 or higher. When I run this:
npm webpack --version
I still see version 3.10.10. My package.json file references version 4.29.6.
What should I try next?
Please let me know if I need to provide more information.

There are two mistakes I was making above:
1) npm webpack --version does not show the version of webpack. Instead, it shows my version of npm.
2) I should not have installed webpack globally - this caused issues. I should have installed it locally.
The app still doesn't work...but I can build and see error messages which is a big step forward.

Related

Error installing the Expo CLI, running command "npm install expo-cli --global"

I'm trying to start a React Native application, But when I try to install the Expo CLI running any of the commands below, it returns this error:
npm WARN config global --global, --local are deprecated. Use --location=global instead.
npm ERR! Unexpected token '.'
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\Amro\AppData\Local\npm-cache_logs\2022-07-21T18_29_03_950Z-debug-0.log
Commands tried:
"npm install expo-cli --global"
"npm install --global expo-cli"
"npm install expo-cli --location=global"
If anybody has any suggestion on how to install the Expo CLI, I would very much appreciate it, thanks.
Have you tried installing without the global tag?
npm install expo-cli
I started a blank project and this worked fine.
Triple check you are in the correct file location when running the command. If you are new to expo/npm/etc, double check you are using correct versions of Node.js and Npm, as well as having correctly set up environment variables. Please reply to this comment if this doesn't work and you have further questions.
As of Expo v46 the CLI is part of the local expo package. There is no need to install the global package.
Use npx expo start to start your app.
npx will look in the node_modules of your current directory first, and because the expo package includes the expo-cli bin it will be invoked.
This makes maintaining older apps MUCH easier.
Details in the blog post.
The New Expo CLI

Unable to resolve empty-module.js react-native and metro-cli

I've switched over from a windows dev environment to a linux environment and I'm having trouble getting react-native app going again. The application builds with gradle and installs onto the phone through adb perfectly, when I send the app build through metro (npx react-native start) I get the following spit back. The package exists... so I don't understand how its not found. I thing I don't understand is why from /home/hovaness/Public/ignitefolderscan/_ returns when its not a realy directory in the first place...
Error
error: Error: Unable to resolve module /home/hovaness/Public/ignitefolderscan/node_modules/#react-native-community/cli-plugin-metro/node_modules/metro-runtime/src/modules/empty-module.js from /home/hovaness/Public/ignitefolderscan/_: /home/hovaness/Public/ignitefolderscan/node_modules/#react-native-community/cli-plugin-metro/node_modules/metro-runtime/src/modules/empty-module.js could not be found within the project or in these directories:
node_modules
Ignite-cli doctor
System
platform linux
arch x64
cpu 20 cores Intel(R) Core(TM) i9-10900X CPU # 3.70GHz
directory ignitefolderscan /home/hovaness/Public/ignitefolderscan
JavaScript (and globally-installed packages)
node 16.14.2 /bin/node
npm 8.7.0 /home/hovaness/Public/ignitefolderscan/node_modules/.bin/npm
#react-native-community/cli 7.0.3
corepack 0.10.0
expo 44.0.6
jetifier 2.0.0
n 8.1.0
npm 8.7.0
npx 10.2.2
pnpm 7.0.0-rc.6
react-native-cli 2.0.1
yarn 1.22.18
yarn 1.22.18 /bin/yarn
pnpm 7.0.0-rc.6 /bin/pnpm
<no pnpm global package info available>
Ignite
ignite-cli 7.10.8 /home/hovaness/.npm/_npx/e31027f3785124a8/node_modules/.bin/ignite
ignite src build /home/hovaness/.npm/_npx/e31027f3785124a8/node_modules/ignite-cli/build
Android
java 11.0.14.1 /bin/java
android home - undefined
Running npm audit fix --force ended up upgrading the packages to versions that were not compatible with each other creating this error. Don't blindly run this.
I had the same issue, to fix that I did:
remove the node_modules folder
remove yarn.lock or package-lock.json
Run command: npm install --force
if it does not work, try also:
npm install --legacy-peer-deps

Could not find a required file. - Adding TypeScript to React project

Trying to add TypeScript to an already created React app via: https://create-react-app.dev/docs/adding-typescript
I do everything bu get the following error when I try and start:
> npx react-scripts start
Could not find a required file.
Name: index.js
Searched in: /home/karl/dev/afry/tmr-client/src
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! tmr-client#0.1.0 start: `npx react-scripts start`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the tmr-client#0.1.0 start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! /home/karl/.npm/_logs/2020-11-06T18_43_02_622Z-debug.log
I renamed the index.js to index.ts as stated in the guide.
I faced the same issue today with create-react-app. The problem is the version of react-scripts as per this Git issue: Git Reference
A quick solution is to update react-scripts. I am using react-scripts version 4.0.3 with no issues.
A safe way to do it based on the documentation: Create React App Docs would be to change the version of react-scripts in the package.json file to the most recent stable version like "react-scripts": "^4.0.3". Then, run npm install from the command line.
TLDR: npm i -D react-scripts#latest
Outdated react-scripts Version
I'm not sure why index.ts isn't working for you, it seems to be supported.
The only explanation is that you're using an outdated version of react-scripts, which you can update by simply running npm i -D react-scripts#latest. More detail from Updating to New Releases:
Create React App is divided into two packages:
create-react-app is a global command-line utility that you use to
create new projects. react-scripts is a development dependency in the
generated projects (including this one). When you run npx
create-react-app my-app it automatically installs the latest version
of Create React App.
If you've previously installed create-react-app globally via npm
install -g create-react-app, please visit Getting Started to learn
about current installation steps.
Create React App creates the project with the latest version of
react-scripts so you’ll get all the new features and improvements in
newly created apps automatically.
To update an existing project to a new version of react-scripts, open
the changelog, find the version you’re currently on (check
package.json in this folder if you’re not sure), and apply the
migration instructions for the newer versions.
In most cases bumping the react-scripts version in package.json and
running npm install (or yarn install) in this folder should be enough,
but it’s good to consult the changelog for potential breaking changes.
We commit to keeping the breaking changes minimal so you can upgrade
react-scripts painlessly.
If this is the issue, you're relying on global installation of create-react-app - which is not recommended given that it won't use the latest version. See note under Quick Start:
If you've previously installed create-react-app globally via npm
install -g create-react-app, we recommend you uninstall the package
using npm uninstall -g create-react-app or yarn global remove
create-react-app to ensure that npx always uses the latest version.

How do I properly configure ng from npm as a normal CLI command?

I am seeing tutorials with NPM and Node.js that have the ng package handler. However, they run this straight from the command prompt. I am curious if I am missing something to install to run commands like ng serve for example, without having to preface them with npm run like npm run ng serve --open ?
Thank you!
You don't naturally prefix the ng server with npm run
Install the angular-cli globally
npm i -g #angular/cli
Then you will be able to do:
ng serve
ng new [appname]
ng generate component [name]
Without any prefix and from anywhere.
It's not recommended to install #angular/cli globally. Some projects will use different version of angular#cli and executing ng commands will have unexpected result.
Instead, install locally into dev dependencies with:
npm install --save-dev angular#cli
or Yarn:
yarn add --dev angular#cli
After you install locally, you can setup various npm scripts to execute ng commands:
scripts: {
"dev": "ng serve"
}
Run the script:
npm run dev
** Please note, if you have globally installed angular#cli, running the commands mentioned above will use the local angular#cli package from node_modules/.bin.
Also, npx is a tool intended to help round out the experience of using packages from the npm registry. You can read about it more here

gh-pages failing while trying to deploy Reactjs app to GitHub in windows 10

I tried following the exact instructions listed in the react documentation on how to deploy a working app to github pages. When I ran npm run deploy. It kept failing at the gh-pages -d build saying that the 'gh-pages' is not an internal or external command. I made sure I had the latest versions of node and npm installed
I had installed gh-pages using the -g tag to make it globally available. Tried adding to the system path variable leading to the node modules folder where i knew gh-pages was loaded. Still nothing.
Finally i tried running it from the git bash window instead of the cmd terminal. This hadn't occurred to me at first as all of the other npm commands worked. Don't know why this fixed things but it did. Just posting this so somebody else might be spared the pain
I had the same issue but finally managed to make it work. The main issue was that I hadn't installed Git for Windows, but I took some extra steps to make sure everything works fine.
Download and install Git for Windows from here
Run npm cache clean to clean npm cache
Run npm install npm#latest -g to install the latest version of npm
Add "homepage" : "http://myname.github.io/myapp", to
"package.json" file and replace the URL with correct GitHub pages URL. If you are not sure about the URL, open the project repository in the browser and go to "Settings" tab. Scroll down and find correct URL under "GitHub Pages".
Run npm install --save-dev gh-pages to install gh-pages module
Add the following 2 lines to "scripts" object in "package.json" file:
"predeploy": "npm run build",
"deploy": "gh-pages -d build"
Finally, run npm run deploy to create an optimized production
build and deploy it on GitHub pages. If you haven't logged in to
Github for windows app before, Github app pops up and asks you to enter your username and password. When you've done that the deploy process will continue and uploads the production build on GitHub pages.
Hope that helps, happy coding.
If it says this, then node_modules/.bin/gh-pages doesn't exist (no, you don't need to install it globally). If it doesn't exist, then it means you either forgot to run npm install --save-dev gh-pages, or something went wrong during the installation.
I would not recommend installing it globally (although looks like it worked in your case).

Resources