Why does React app fail to start when running in container, but very same code runs OK when started from terminal? - reactjs

I learn React and try to run an app. When I start the app in terminal, it goes nice and works as expected, but when I do the very same thing in container it fails. Here are the details:
root#b8457ff69aac:/app# node -v
v16.17.0
root#b8457ff69aac:/app# npm -v
8.15.0
The error:
root#b8457ff69aac:/app# npm start server
> voting_app#1.1.0 start
> npm run server
> voting_app#1.1.0 server
> live-server public --host=localhost --port=9001 --middleware=./disable-browser-cache.js
(node:134) [DEP0111] DeprecationWarning: Access to process.binding('http_parser') is deprecated.
(Use `node --trace-deprecation ...` to show where the warning was created)
Serving "public" at http://localhost:9001 (http://127.0.0.1:9001)
/app/node_modules/opn/index.js:82
reject(new Error('Exited with code ' + code));
^
Error: Exited with code 3
at ChildProcess.<anonymous> (/app/node_modules/opn/index.js:82:13)
at Object.onceWrapper (node:events:628:26)
at ChildProcess.emit (node:events:513:28)
at maybeClose (node:internal/child_process:1093:16)
at Socket.<anonymous> (node:internal/child_process:451:11)
at Socket.emit (node:events:513:28)
at Pipe.<anonymous> (node:net:757:14)
Dockerfile
FROM node:16.17.0
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
EXPOSE 9001
# for sake of debug
CMD [ "sleep" , "infinity" ]
And running it:
docker run -p 9001:9001 vote-app:test2

/app/node_modules/opn/index.js:82
reject(new Error('Exited with code ' + code));
hints that the opn module is failing. That module is used to op(e)n a browser, which can't happen in a container.
Add --no-browser to your live-server command line to prevent it trying to open a browser.
Furthermore, you'll need --host=0.0.0.0 instead of --host=localhost so the exposed port can work from within the container.
As an aside, you'll probably also want to see if you can update your version of live-server to get rid of that deprecation warning.

Related

Yarn Install not working during docker build There appears to be trouble with your network connection. Retrying

I am newbie in docker and have been trying to run my react with docker using docker build.
`
Step 1/9 : FROM node:18.12.1-alpine
---> 6d7b7852bcd3
Step 2/9 : WORKDIR /app
---> Using cache
---> 52bdc49c2014
Step 3/9 : COPY package.json .
---> Using cache
---> 3920b54c5ec9
Step 4/9 : RUN yarn config set network-timeout 600000 -g
---> Running in 374a0b1cd0f9
yarn config v1.22.19
success Set "network-timeout" to "600000".
Done in 0.04s.
Removing intermediate container 374a0b1cd0f9
---> 00499f342961
Step 5/9 : RUN yarn install --verbose
---> Running in 223d0d40490c
yarn install v1.22.19
verbose 0.232714456 Checking for configuration file "/app/.npmrc".
verbose 0.233075334 Checking for configuration file "/usr/local/share/.npmrc".
verbose 0.23327504 Checking for configuration file "/usr/local/etc/npmrc".
verbose 0.233483662 Checking for configuration file "/root/.npmrc".
verbose 0.233677765 Checking for configuration file "/app/.npmrc".
verbose 0.234698832 Checking for configuration file "/app/.yarnrc".
verbose 0.235102797 Checking for configuration file "/usr/local/share/.yarnrc".
verbose 0.235299537 Found configuration file "/usr/local/share/.yarnrc".
verbose 0.235636309 Checking for configuration file "/usr/local/etc/yarnrc".
verbose 0.236023201 Checking for configuration file "/root/.yarnrc".
verbose 0.236307171 Checking for configuration file "/app/.yarnrc".
verbose 0.248050692 current time: 2022-12-18T19:09:37.677Z
info No lockfile found.
[1/4] Resolving packages...
verbose 0.304465887 Performing "GET" request to "https://registry.yarnpkg.com/#react-spring%2ftypes".
info There appears to be trouble with your network connection. Retrying...
verbose 134.153645027 Performing "GET" request to "https://registry.yarnpkg.com/#react-spring%2ftypes".
info There appears to be trouble with your network connection. Retrying...
verbose 267.268788936 Performing "GET" request to "https://registry.yarnpkg.com/#react-spring%2ftypes".
info There appears to be trouble with your network connection. Retrying...
verbose 400.388013951 Performing "GET" request to "https://registry.yarnpkg.com/#react-spring%2ftypes".
info There appears to be trouble with your network connection. Retrying...
verbose 533.508365167 Performing "GET" request to "https://registry.yarnpkg.com/#react-spring%2ftypes".
verbose 663.62858393 Error: connect ETIMEDOUT 2606:4700::6810:1923:443
at TCPConnectWrap.afterConnect [as oncomplete] (node:net:1300:16)
error An unexpected error occurred: "https://registry.yarnpkg.com/#react-spring%2ftypes: connect ETIMEDOUT 2606:4700::6810:1923:443".
info If you think this is a bug, please open a bug report with the information provided in "/app/yarn-error.log".
info Visit https://yarnpkg.com/en/docs/cli/install for documentation about this command.
The command '/bin/sh -c yarn install --verbose' returned a non-zero code: 1
`
It gives me There appears to be trouble with your network connection. Retrying.
I tried setting network-timeout and clearing cache but still giving me the same error.
However, it is working on my WSL2 but not on my Ubuntu 22.04.1 LTS

React native app failed to build while trying to bundle release

I created an app which worked perfectly on debug but when i run
./gradlew assembleRelease
the build failed to complete.
Below is the error I receive.
at ModuleResolver.resolveDependency (C:\Users\Chifes\Desktop\app\RoGoods\node_modules\metro\src\node-haste\DependencyGraph\ModuleResolution.js:136:15)
at DependencyGraph.resolveDependency (C:\Users\Chifes\Desktop\app\RoGoods\node_modules\metro\src\node-haste\DependencyGraph.js:231:43)
at Object.resolve (C:\Users\Chifes\Desktop\app\RoGoods\node_modules\metro\src\lib\transformHelpers.js:129:24)
at resolve (C:\Users\Chifes\Desktop\app\RoGoods\node_modules\metro\src\DeltaBundler\traverseDependencies.js:396:33)
at C:\Users\Chifes\Desktop\app\RoGoods\node_modules\metro\src\DeltaBundler\traverseDependencies.js:412:26
at Array.reduce (<anonymous>)
at resolveDependencies (C:\Users\Chifes\Desktop\app\RoGoods\node_modules\metro\src\DeltaBundler\traverseDependencies.js:411:33)
at processModule (C:\Users\Chifes\Desktop\app\RoGoods\node_modules\metro\src\DeltaBundler\traverseDependencies.js:140:31)
at runMicrotasks (<anonymous>)
at processTicksAndRejections (node:internal/process/task_queues:96:5)
info Run CLI with --verbose flag for more details.
?[0K
?[0K
?[0K
?[3A?[1m<?[0;32;1m=?[0;39;1m------------> 13% EXECUTING [2m 37s]?[m?[38D?[1B?[1m> :app:bundleReleaseJsAndAssets?[m?[31D?[1B> IDLE?[6D?[1B?[3A?[0K
?[31;1m> Task :app:bundleReleaseJsAndAssets?[0;39m?[31m FAILED?[39m
?[1B?[0K
?[0K
?[3A?[1m<?[0;31;1m=?[0;39;1m------------> 13% EXECUTING [2m 37s]?[m?[38D?[1B> IDLE?[6D?[1B> IDLE?[6D?[1B?[3A?[0K
?[31mFAILURE: ?[39m?[31mBuild failed with an exception.?[39m
?[0K
* What went wrong:
Execution failed for task ':app:bundleReleaseJsAndAssets'.
?[33m> ?[39mProcess 'command 'cmd'' finished with non-zero exit value 1
* Try:
?[33m> ?[39mRun with ?[1m--stacktrace?[m option to get the stack trace.
?[33m> ?[39mRun with ?[1m--info?[m or ?[1m--debug?[m option to get more log output.
?[33m> ?[39mRun with ?[1m--scan?[m to get full insights.
* Get more help at ?[1mhttps://help.gradle.org?[m
Deprecated Gradle features were used in this build, making it incompatible with Gradle 8.0.
You can use '--warning-mode all' to show the individual deprecation warnings and determine if they come from your own scripts or plugins.
See https://docs.gradle.org/7.4.2/userguide/command_line_interface.html#sec:command_line_warnings
Execution optimizations have been disabled for 1 invalid unit(s) of work during this build to ensure correctness.
Please consult deprecation warnings for more details.
?[31;1mBUILD FAILED?[0;39m in 2m 41s
24 actionable tasks: 2 executed, 22 up-to-date
?[0K
?[0K
?[0K
?[3A?[1m<?[0;1m-------------> 0% WAITING?[m?[26D?[1B> IDLE?[6D?[1B> IDLE?[6D?[1B?[3A?[2K?[1B?[2K?[1B?[2K?[2A
The graddle drama has been there since I first installed the react native framework, and all solution to get it fixed has yielded nothing. However, like I said early, I'm able to get the app run on emulators; even on physical device, the debug apk worked perfectly.
Help is appreciated
try this,
Close metro server if is opend
watchman shutdown-server
for delete node-modules and re install and clear-cache
watchman watch-del-all && rm -rf node_modules && npm cache clean --force && yarn install && npm start -- --reset-cache
3.after complete close the metro server, then next run this code
npx react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle
finally npx react-native run-android or yarn android
Did you try to re-bundle the entry file ?
react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res
Here's an issue that seems related to yours: React-Native assembleRelease fails for task ':app:bundleReleaseJsAndAssets'

Next JS : Error: EPERM: operation not permitted, open

I am trying to build the next Js app production files to deploy it on cPanel, when I execute
npm run dev the app is working just fine but as I start to build a production file with the help of this video(https://youtu.be/1ykSXau838c) and executes npm run build it gives me an error in the terminal as given below:
PS C:\Users\hp\Desktop\reactJs-project\NextJs\test-app> npm run build
> test-app#0.1.0 build
> next build
info - Checking validity of types
info - Creating an optimized production build .node:events:368
throw er; // Unhandled 'error' event
^
Error: EPERM: operation not permitted, open 'C:\Users\hp\Desktop\reactJs-project\NextJs\test-app\.next\trace'
Emitted 'error' event on WriteStream instance at:
at emitErrorNT (node:internal/streams/destroy:157:8)
at emitErrorCloseNT (node:internal/streams/destroy:122:3)
at processTicksAndRejections (node:internal/process/task_queues:83:21) {
errno: -4048,
code: 'EPERM',
syscall: 'open',
path: 'C:\\Users\\hp\\Desktop\\reactJs-project\\NextJs\\test-app\\.next\\trace'
}
so I just want to know is there any way to solve this problem?
Posting comment from Koronag as an answer (as it helped me with this error and seems the most likely cause)...
This error is commonly seen when running a build while the dev server is already running. (E.g. in my case, I had a local build running via npm run dev and was trying to commit/push code, which invoked a Git Hook that also runs npm run dev.)
For me, it works fine this answer drives me to the resolver.
I run 2 scripts in terminals:
once for development
another for the build process.
So after killing the development script it looks perfectly fine!
From next-sitemap repo README.md
"Having next-sitemap command & next-sitemap.js file may result in file opening instead of building sitemaps in windows machines.
As a solution to this, it is now possible to use a custom config file instead of next-sitemap.js. Just pass --config .js to build command."
Next-Sitemap README.md - Building Sitemaps
The above worked for me

yarn install error:Failed to download Chromium

The Yarn install failed to download Chromium. Error is as follows:
D:\workspace\www\ant-design-mobile-pro
λ yarn
yarn install v1.12.3
//...
Directory: D:\\workspace\\www\\ant-design-mobile-pro\\node_modules\\puppeteer
Output:
ERROR: Failed to download Chromium r599821! Set \"PUPPETEER_SKIP_CHROMIUM_DOWNLOAD\" env variable to skip download.
{ Error: connect ETIMEDOUT 172.217.161.176:443
at TCPConnectWrap.afterConnect [as oncomplete] (net.js:1113:14)
errno: 'ETIMEDOUT',
code: 'ETIMEDOUT',
syscall: 'connect',
address: '172.217.161.176',
success Saved lockfile.
Done in 343.80s.
Question:
Can I download Chromium manually? I can download it from https://npm.taobao.org/mirrors/chromium-browser-snapshots/Win_x64/,the question is: Where should I put it after dowloading it?
If you don't intend to run the automated browser tests which depend upon Chromium, you can skip the install per the error message:
export PUPPETEER_SKIP_CHROMIUM_DOWNLOAD=true && yarn
I've occasionally encountered this yarn install timeout recently as well, and no cache clear or other manipulation has seemed to resolve it.

npm test fails with error for reactjs app created with create-react-app

For a create-react-app I have created some tests in a __test__ folder at the same level as the src
After running npm test the project folder I get the following error
How can I fix this so that I can run my tests?
jenkins#VBOX:dashboard$ npm test
> react-scripts test --env=jsdom
Determining test suites to run...fs.js:1236
throw error;
^
Error: watch /home/jenkins/dev/git-stash/dashboard/node_modules/react-scripts/node_modules/babel-jest/node_modules/babel-plugin-istanbul/node_modules/istanbul-lib-instrument/node_modules/babel-types/node_modules/babel-runtime/node_modules/core-js/fn/symbol ENOSPC
at exports._errnoException (util.js:907:11)
at FSWatcher.start (fs.js:1234:19)
at Object.fs.watch (fs.js:1262:11)
at NodeWatcher.watchdir (/home/jenkins/dev/git-stash/dashboard/node_modules/react-scripts/node_modules/jest/node_modules/jest-cli/node_modules/sane/src/node_watcher.js:144:20)
at Walker.<anonymous> (/home/jenkins/dev/git-stash/dashboard/node_modules/react-scripts/node_modules/jest/node_modules/jest-cli/node_modules/sane/src/node_watcher.js:353:12)
at emitTwo (events.js:87:13)
at Walker.emit (events.js:172:7)
at /home/jenkins/dev/git-stash/dashboard/node_modules/react-scripts/node_modules/jest/node_modules/jest-cli/node_modules/sane/node_modules/walker/lib/walker.js:69:16
at go$readdir$cb (/home/jenkins/dev/git-stash/dashboard/node_modules/react-scripts/node_modules/jest/node_modules/jest-cli/node_modules/graceful-fs/graceful-fs.js:149:14)
at FSReqWrap.oncomplete (fs.js:82:15)
npm ERR! Test failed. See above for more details.
Sometimes we hit the limit on the number of files we can watch simultaneously and we gains the error while having plenty of free space.
On Linux (Debian Wheezy, npm v3.10.10, node v6.10.2) it can be fixed by trying $ npm dedupe first, and, if still necessary, by
$ echo fs.inotify.max_user_watches=524288 | sudo tee -a /etc/sysctl.conf && sudo sysctl -p
Credits go to hexo.io.
So that nonsensical word in all caps at the end of the first line of every node error... that's an error code. This one was ENOSPC, which means "no space on drive".
i.e. your drive was full, You must've freed up space before running npm install again, and it was the former not the latter that fixed your problem.
I got exactly same problem. and I solve this issue by installing newest npm. I got ENOSPC error with npm version 2.15.11. and it works well with v3.10.10.

Resources