Have an build problem for react-native project - reactjs

Im create new a react-native project
react-native init navigationApp--version 0.59.8
But have build problems... When i try run (react-native run-android)
Console stay step: app:installDebug and have some errors in npm part.
I tried they step-step;
1.rm -rf node_modules package-lock.json
2.npm install react-native#0.55.2 babel-preset-react-native#4.0.0
3.npm install
4.react-native run-android
λ react-native run-android
Scanning folders for symlinks in C:\Users\MONSTER\Desktop\project\react-navigation\navigationApp\node_modules (55ms)
JS server already running.
Building and installing the app on the device (cd android && gradlew.bat installDebug)...
Starting a Gradle Daemon (subsequent builds will be faster)
<============-> 97% EXECUT¦NG [7m 40s]
IDLE
IDLE
IDLE
IDLE
IDLE
:app:installDebug
IDLE
IDLE
λ npm start
> navigationApp#0.0.1 start C:\Users\MONSTER\Desktop\project\react-navigation\navigationApp
> node node_modules/react-native/local-cli/cli.js start
Scanning folders for symlinks in C:\Users\MONSTER\Desktop\project\react-navigation\navigationApp\node_modules (49ms)
┌───────────────────────────────────────────────────────────────────────────
───┐
│
│
│ Running Metro Bundler on port 8081.
│
│
│
│ Keep Metro running while developing on any JS projects. Feel free to
│
│ close this tab and run your own Metro instance if you prefer.
│
│
│
│ https://github.com/facebook/react-native
│
│
│
└───────────────────────────────────────────────────────────────────────────
───┘
Looking for JS files in
C:\Users\MONSTER\Desktop\project\react-navigation\navigationApp
Metro Bundler ready.
Loading dependency graph, done.
ERROR EPERM: operation not permitted, lstat 'C:\Users\MONSTER\Desktop\project\react-navigation\navigationApp\android\app\build\intermediates\blame\res\debug\multi-v2'
npm ERR! code ELIFECYCLE
npm ERR! errno 11
npm ERR! navigationApp#0.0.1 start: `node node_modules/react-native/local-cli/cli.js start`
npm ERR! Exit status 11
npm ERR!
npm ERR! Failed at the navigationApp#0.0.1 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! C:\Users\MONSTER\AppData\Roaming\npm-cache\_logs\2019-07-31T07_51_31_477Z-debug.log
ERROR IMAGE
CMD IMAGE

you must clean your project as below
npm start -- --reset-cache
react-native run-android
Also, you can clear project android gradlew file,
cd/android
./gradlew clean

Related

How do I run Next.js app after cloning repository

I created a Next.js app using npx create-next-app#latest, pushed the new app to a GitHub repository, then cloned the repository into a new directory. When I tried to run the app using npm run dev, I got the following output:
operable program or batch file.
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! mini-warehouse#0.1.0 dev: `next dev`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the mini-warehouse#0.1.0 dev script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm WARN Local package.json exists, but node_modules missing, did you mean to install?
I was expecting the development server to start. How can I run my app?
npm WARN Local package.json exists, but node_modules missing, did you mean to install?
run : npm install
NOTE : you have always to install node_modules after coloning a repo. because when you push inside a repo the .gitignore file by default ignores node_modules folder because of its size so you should install it by running npm install
the last line from you error stack is telling you the problem
Your projet has an package.json but you didn't install your dependencies
You should install before trying to run you project
running npm install and then npm run dev
https://docs.npmjs.com/cli/v9/configuring-npm/package-json
if you want to know more about package.json

Error: spawn wslvar ENOENT when running yarn storybook on WSL2

I am trying to follow this tutorial on https://storybook.js.org/tutorials/intro-to-storybook/react/en/get-started/
The commands that are given in the tutorial are as follows
# Clone the template
npx degit chromaui/intro-storybook-react-template taskbox
cd taskbox
# Install dependencies
yarn
# Run the test runner (Jest) in a terminal:
yarn test --watchAll
# Start the component explorer on port 6006:
yarn storybook
# Run the frontend app proper on port 3000:
yarn start
I am however running into an issue when yarn storybook on my wsl2 ubuntu terminal.
Here is the error
yarn storybook
yarn run v1.22.5
warning ../package.json: No license field
$ start-storybook -p 6006 -s public
info #storybook/react v6.3.0
info
info => Loading presets
info => Serving static files from ./public at /
info => Loading 1 config file in "/mnt/d/taskbox/.storybook"
info => Loading 9 other files in "/mnt/d/taskbox/.storybook"
info => Adding stories defined in "/mnt/d/taskbox/.storybook/main.js"
info => Using prebuilt manager
info => Loading Webpack configuration from `node_modules/react-scripts`
info => Removing existing JavaScript and TypeScript rules.
info => Modifying Create React App rules.
info => Using default Webpack4 setup
(node:7126) [DEP0148] DeprecationWarning: Use of deprecated folder mapping "./" in the "exports" field module resolution of the package at /mnt/d/taskbox/node_modules/postcss-safe-parser/node_modules/postcss/package.json.
Update this package.json to use a subpath pattern like "./*".
(Use `node --trace-deprecation ...` to show where the warning was created)
17% building 63/88 modules 25 active /mnt/d/taskbox/node_modules/global/window.jsBrowserslist: caniuse-lite is outdated. Please run:
npx browserslist#latest --update-db
Why you should do it regularly:
https://github.com/browserslist/browserslist#browsers-data-updating
webpack built preview 0ef1297f848efab9f24c in 139265ms
╭─────────────────────────────────────────────────────╮
│ │
│ Storybook 6.3.0 started │
│ 3.97 min for preview │
│ │
│ Local: http://localhost:6006/ │
│ On your network: http://172.22.229.210:6006/ │
│ │
│ A new version (6.3.6) is available! │
│ │
│ Upgrade now: npx sb#latest upgrade │
│ │
│ Read full changelog: https://git.io/fhFYe │
│ │
╰─────────────────────────────────────────────────────╯
node:internal/errors:456
ErrorCaptureStackTrace(err);
^
Error: spawn wslvar ENOENT
at Process.ChildProcess._handle.onexit (node:internal/child_process:282:19)
at onErrorNT (node:internal/child_process:480:16)
at processTicksAndRejections (node:internal/process/task_queues:83:21) {
errno: -2,
code: 'ENOENT',
syscall: 'spawn wslvar',
path: 'wslvar',
spawnargs: [ 'systemroot' ],
cmd: 'wslvar systemroot',
stdout: '',
stderr: ''
}
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
I've been having a hard time finding similar errors to go off of since it seems like a rare error. I suspect it's related to me running storybook on WSL2 though.
According to this Github comment, the error is usually caused by either:
powershell.exe not being in the path (unlikely, but could be the case if a /etc/wsl.conf explicitly disabled Windows PATH interop).
Missing wslvar, which is part of the wslu (WSL Utilities) package. While it's installed by default in some WSL distributions, it may not be up-to-date or installed in some. See the Github page for installation instructions for each distribution.

getting error while trying to deploy a React app to Azure App Service

I am trying to deploy a React site in Azure App Service. i get error and logs shows errors like below. Its a huge log so i pasted a part of it. when i run "npm run build" it works and generates a "dist" folder. but this error is when i try to publish to azure using App Azure Service extention of VSCode.
Any suggestions whats going on here.?
modules 0 active npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR! medefis#1.0.0 build: cross-env NODE_OPTIONS='--max-old-space-size=8192' NODE_ENV=production VIZ=true webpack --mode production --config webpack.config.prod.js --color -p --progress npm ERR! Exit status 1 npm ERR! npm ERR! Failed at the medefis#1.0.0 build 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/.npm/_logs/2020-12-23T00_47_33_640Z-debug.log ../deps/libexpat/lib/xmlparse.c:6:32: warning: unknown option after ‘#pragma GCC diagnostic’ kind [-Wpragmas]\n #pragma GCC diagnostic ignored "-Wimplicit-fallthrough"\n ^~~~~~~~~~~~~~~~~~~~~~~~\nngrok - error unpacking binary Error: Could not find the End of Central Directory Record\n at DecompressZip.findEndOfDirectory (/tmp/8d8a6d70a2473e5/node_modules/decompress-zip/lib/decompress-zip.js:176:15)\n at _fulfilled (/tmp/8d8a6d70a2473e5/node_modules/q/q.js:854:54)\n at /tmp/8d8a6d70a2473e5/node_modules/q/q.js:883:30\n at Promise.promise.promiseDispatch (/tmp/8d8a6d70a2473e5/node_modules/q/q.js:816:13)\n at /tmp/8d8a6d70a2473e5/node_modules/q/q.js:624:44\n at runSingle (/tmp/8d8a6d70a2473e5/node_modules/q/q.js:137:13)\n at flush (/tmp/8d8a6d70a2473e5/node_modules/q/q.js:125:13)\n at processTicksAndRejections (internal/process/task_queues.js:79:11)\nngrok - install failed, retrying\n ⚠ Command failed: /tmp/8d8a6d70a2473e5/node_modules/cwebp-bin/vendor/cwebp -version\n/tmp/8d8a6d70a2473e5/node_modules/cwebp-bin/vendor/cwebp: error while loading shared libraries: libGL.so.1: cannot open shared object file: No such file or directory\n\n\n
Do the scripts below locally:
npm install
npm run build
npm start
Deploy to Azure Web App (Check the stack Configuration):
There should be one log like this shows compressing the Modules:
It should work:

Receive error when deploy to GitHub pages

I'm deploy react app to git hub pages and receive error. File sizes after gzip:
68.67 KB build\static\js\2.c2c334ae.chunk.js
2.98 KB build\static\js\main.8a72b1a2.chunk.js
774 B build\static\js\runtime~main.8f8a00a4.js
The project was built assuming it is hosted at /sort-customers-list/.
You can control this with the homepage field in your package.json.
The build folder is ready to be deployed.
To publish it at https://sejob.github.io/sort-customers-list,
run: npm run deploy
Find out more about deployment here:
sort-customers-list#0.1.0 deploy
C:\Users\SeJo\Documents\Code\DEV_HW\sort-customers-list
gh-pages -d build
The "file" argument must be of type string. Received type undefined
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! sort-customers-list#0.1.0 deploy: `gh-pages -d build`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the sort-customers-list#0.1.0 deploy 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!
C:\Users\SeJo\AppData\Roaming\npm-cache\_logs\2019-08-01T12_09_52_445Z-debug.log
The problem occurs in the new version of GitHub pages. Just use this command to install the previous version of GitHub pages:
npm install gh-pages#2.0.1
Hope it will help!
I also had this same problem on a fresh install of create-react-app. I have no idea what the problem was, but I did the following:
Downgrade gh-pages from 2.1.0 to 2.0.1
Instead of running npm run deploy, manually run npm run build then gh-pages -d build from the commandline.
At first, I'd get the same error in the commandline, even after checking that the version was downgraded to 2.0.1, but for some reason it worked after manually creating the gh-pages branch and pushing some files into it. As of now, npm run deploy throws the error but at least gh-pages -d build from the console works.
INSTALL/REINSTALL GIT
Update NPM
Reopen EDITOR
this solved my problem
use version 2.0.1
npm i gh-pages#2.0.1

create-react-app npm run build fail to minify watson node sdk

I am new to React and I am trying to build a react app using create-react-app and Watson node-sdk. Everything works fine in development mode after running npm start. But when I try to build a production package using npm run build and below is the error I receive.
e:\Microsoft\Workspace\React\myapp>npm run build
> myapp#0.1.0 build e:\Microsoft\Workspace\React\myapp
> react-scripts build
Creating an optimized production build...
Failed to compile.
Failed to minify the code from this file:
./node_modules/watson-developer-cloud/lib/helper.js:31
Read more here: https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#npm-run-build-fails-to-minify
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! myapp#0.1.0 build: `react-scripts build`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the myapp#0.1.0 build 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! C:\Users\yk\AppData\Roaming\npm-cache\_logs\2017-09-
20T09_40_36_144Z-debug.log
The line that giving error is let missing; and seems like the let is causing the issue. Is there anything I can do with this?
Encountered this problem today. the doc suggests some solutions:
Open an issue on the dependency's issue tracker and ask that the package be published pre-compiled.
Fork the package and publish a corrected version yourself.
If the dependency is small enough, copy it to your src/ folder and treat it as application code.
Read more here: https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#npm-run-build-fails-to-minify

Resources