TypeScript 4.9 error (can`t use satisfies) - reactjs

Why after npm install -g typescript#latest (for lates version at 2022.12 - 4.9v) i can`t use satisfies?
Error ... ! (error: Newline or semicolon expected)
At the package.json
"devDependencies": {
"typescript": "^4.9.4"
}
enter image description here
enter image description here

Related

How to set graphql-codegen documents file?

I have graphql-codegen.yml file and src folder under project root path.
graphql-codegen.yml
schema: "https://swapi-graphql.netlify.app/.netlify/functions/index"
overwrite: true
documents: "src/**/*.graphql"
generates:
src/generated/graphql-types.tsx:
plugins:
— "typescript"
— "typescript-operations"
— "typescript-react-apollo"
src/graphql/getAllPeople.graphql
query GetAllPeople($pageSize: Int) {
allPeople(first: $pageSize) {
people {
name
birthYear
gender
height
}
}
}
package.json
"scripts": {
"graphql:codegen": "graphql-codegen — config graphql-codegen.yml"
},
"dependencies": {
"#apollo/client": "^3.7.0",
"#emotion/core": "^10.0.21",
"#graphql-codegen/cli": "^2.16.2",
"#graphql-codegen/fragment-matcher": "^3.3.3",
"#graphql-codegen/typescript": "^2.8.6",
"#graphql-codegen/typescript-operations": "^2.5.11",
"#graphql-codegen/typescript-react-apollo": "^3.3.7"
},
When I type command yarn graphql:codegen on terminal, it shows error:
yarn run v1.22.17
$ graphql-codegen — config graphql-codegen.yml
Unable to find Codegen config file!
Please make sure that you have a configuration file under the current directory!
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
What's wrong with the setting ?

#discordjs/voice can't find encryption package with pnpm

When I try to play audio with #discordjs/voice I just get an error:
ERROR file:///C:/Users/[username]/Desktop/code/[project name]/node_modules/.pnpm/#discordjs+voice#0.13.0_#discordjs+opus#0.9.0/node_modules/#discordjs/voice/src/util/Secretbox.ts:51
throw new Error(
^
ERROR Error: Cannot play audio as no valid encryption package is installed. 20:03:27
- Install sodium, libsodium-wrappers, or tweetnacl.
- Use the generateDependencyReport() function for more information.
at Object.fallbackError (file:///C:/Users/[username]/Desktop/code/[project name]/node_modules/.pnpm/#discordjs+voice#0.13.0_#discordjs+opus#0.9.0/node_modules/#discordjs/voice/src/util/Secretbox.ts:51:8)
at Networking.encryptOpusPacket (file:///C:/Users/[username]/Desktop/code/[project name]/node_modules/.pnpm/#discordjs+voice#0.13.0_#discordjs+opus#0.9.0/node_modules/#discordjs/voice/src/networking/Networking.ts:585:23)
at Networking.createAudioPacket (file:///C:/Users/[username]/Desktop/code/[project name]/node_modules/.pnpm/#discordjs+voice#0.13.0_#discordjs+opus#0.9.0/node_modules/#discordjs/voice/src/networking/Networking.ts:568:47)
at Networking.prepareAudioPacket (file:///C:/Users/[username]/Desktop/code/[project name]/node_modules/.pnpm/#discordjs+voice#0.13.0_#discordjs+opus#0.9.0/node_modules/#discordjs/voice/src/networking/Networking.ts:490:31)
at VoiceConnection.prepareAudioPacket (file:///C:/Users/[username]/Desktop/code/[project name]/node_modules/.pnpm/#discordjs+voice#0.13.0_#discordjs+opus#0.9.0/node_modules/#discordjs/voice/src/VoiceConnection.ts:520:27)
at AudioPlayer._preparePacket (file:///C:/Users/[username]/Desktop/code/[project name]/node_modules/.pnpm/#discordjs+voice#0.13.0_#discordjs+opus#0.9.0/node_modules/#discordjs/voice/src/audio/AudioPlayer.ts:640:15)
at AudioPlayer._stepPrepare (file:///C:/Users/[username]/Desktop/code/[project name]/node_modules/.pnpm/#discordjs+voice#0.13.0_#discordjs+opus#0.9.0/node_modules/#discordjs/voice/src/audio/AudioPlayer.ts:604:10)
at prepareNextAudioFrame (file:///C:/Users/[username]/Desktop/code/[project name]/node_modules/.pnpm/#discordjs+voice#0.13.0_#discordjs+opus#0.9.0/node_modules/#discordjs/voice/src/DataStore.ts:146:13)
at audioCycleStep (file:///C:/Users/[username]/Desktop/code/[project name]/node_modules/.pnpm/#discordjs+voice#0.13.0_#discordjs+opus#0.9.0/node_modules/#discordjs/voice/src/DataStore.ts:127:2)
at Timeout._onTimeout (file:///C:/Users/[username]/Desktop/code/[project name]/node_modules/.pnpm/#discordjs+voice#0.13.0_#discordjs+opus#0.9.0/node_modules/#discordjs/voice/src/DataStore.ts:139:42)
Here's the output of generateDependencyReport():
-------------------------------------------------- 20:11:50
Core Dependencies
- #discordjs/voice: 0.13.0
- prism-media: not found
Opus Libraries
- #discordjs/opus: not found
- opusscript: not found
Encryption Libraries
- sodium-native: not found
- sodium: not found
- libsodium-wrappers: not found
- tweetnacl: not found
FFmpeg
- version: 2021-09-08-git-5e7e2e5031-full_build-www.gyan.dev
- libopus: yes
--------------------------------------------------
These are my dependencies:
"dependencies": {
"#discordjs/opus": "^0.9.0",
"#discordjs/voice": "^0.13.0",
"consola": "^2.15.3",
"discord.js": "^14.6.0",
"libsodium-wrappers": "^0.7.10",
"sodium-native": "^3.4.1",
"tweetnacl": "^1.0.3"
},
As you can see I've clearly installed an encryption package, but it's not being detected by #discordjs/voice.
I believe it's because I am using pnpm, as it's node_modules format is different compared to normal npm.
Does anyone know how to make #discordjs/voice detect it?
It is a bug with #discordjs/voice if it can't work with symlinked dependencies.
But you can use node-linker=hoisted to install a hoisted node_modules without using symlinks. Put this setting to a .npmrc file in the root of you project, remove node_modules and run pnpm install.

events.js:288 Error: write EPIPE when executing tests with Jest

I have a problem when setting React Testing Library into a new project, which is a project that generates common UI components for several projects. In one of the projects it is correctly setup, but when I added React Testing Library and updated dependencies in this project, I am able to run a test but not all of them.
If I do yarn test this is the result:
Test Suites: 8 passed, 8 of 33 total
Tests: 84 passed, 84 total
Snapshots: 0 total
Time: 28 sevents.js:288
throw er; // Unhandled 'error' event
^
Error: write EPIPE
at ChildProcess.target._send (internal/child_process.js:806:20)
at ChildProcess.target.send (internal/child_process.js:677:19)
at ChildProcessWorker.send (C:\Users\user\workspace\project\node_modules\jest-worker\build\workers\ChildProcessWorker.js:291:17)
at WorkerPool.send (C:\Users\user\workspace\project\node_modules\jest-worker\build\WorkerPool.js:32:34)
at Farm._process (C:\Users\user\workspace\project\node_modules\jest-worker\build\Farm.js:129:10)
at Farm._enqueue (C:\Users\user\workspace\project\node_modules\jest-worker\build\Farm.js:152:10)
at Farm._push (C:\Users\user\workspace\project\node_modules\jest-worker\build\Farm.js:159:12)
at C:\Users\user\workspace\project\node_modules\jest-worker\build\Farm.js:90:14
at new Promise (<anonymous>)
at Farm.doWork (C:\Users\user\workspace\project\node_modules\jest-worker\build\Farm.js:56:12)
Emitted 'error' event on ChildProcess instance at:
at internal/child_process.js:810:39
at processTicksAndRejections (internal/process/task_queues.js:79:11) {
errno: 'EPIPE',
code: 'EPIPE',
syscall: 'write'
}
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
I tried doing rm -rf node_modules and then cleaning cache, and didn't work.
Any help?
It turns out that by changing some libraries in package.json the error dissapears:
Before (KO):
"babel-jest": "^24.9.0",
"jest": "^26.0.1",
After (OK):
"babel-jest": "^26.0.1",
"jest": "^25.5.4",
By doing yarn cache clean solved my problem. If you met pipe error similar like image below. I believe it is related to memory leaks.
In my case was the version of node. I had the version 15 (from Latest Features) and changed it to the stable version 14.17.3 (from LTS).
To know which version you have use node -v in a terminal.

yarn build in ReactJS, Allocation failed - JavaScript heap out of memory

In local enviroments I have no problem, but running a production enviroment on jenkins with this script it does:
yarn install --production
yarn build
The build takes like 5 minutes, in the end, jenkins exit with this console output error:
+ yarn install --production
yarn install v1.9.4
[1/4] Resolving packages...
[2/4] Fetching packages...
info fsevents#1.2.9: The platform "linux" is incompatible with this module.
info "fsevents#1.2.9" is an optional dependency and failed compatibility check. Excluding it from installation.
[3/4] Linking dependencies...
warning " > bootstrap#4.3.1" has unmet peer dependency "jquery#1.9.1 - 3".
warning " > bootstrap#4.3.1" has unmet peer dependency "popper.js#^1.14.7".
warning " > google-maps-react#1.1.11" has incorrect peer dependency "react#~0.14.8 || ^15.0.0".
warning " > google-maps-react#1.1.11" has incorrect peer dependency "react-dom#~0.14.8 || ^15.0.0".
warning " > react-addons-css-transition-group#15.6.2" has incorrect peer dependency "react#^15.4.2".
warning " > react-bootstrap-table-next#3.1.5" has unmet peer dependency "prop-types#^15.0.0".
warning " > react-bootstrap-table2-paginator#2.0.7" has unmet peer dependency "prop-types#^15.0.0".
warning " > react-bootstrap-table2-toolkit#1.4.2" has unmet peer dependency "prop-types#^15.0.0".
warning " > react-intl#2.9.0" has unmet peer dependency "prop-types#^15.5.4".
warning " > react-simple-collapse#0.1.2" has incorrect peer dependency "react#^0.14.3".
warning " > react-simple-collapse#0.1.2" has incorrect peer dependency "react-dom#^0.14.3".
warning " > react-widgets-globalize#5.0.20" has incorrect peer dependency "react-widgets#^4.2.2".
warning " > react-widgets-moment#4.0.27" has incorrect peer dependency "react-widgets#^4.2.2".
warning " > eslint-plugin-react-hooks#1.6.1" has unmet peer dependency "eslint#^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0".
warning "react-styleguidist > uglifyjs-webpack-plugin#1.2.7" has unmet peer dependency "webpack#^2.0.0 || ^3.0.0 || ^4.0.0".
warning "react-styleguidist > webpack-dev-server#2.11.5" has unmet peer dependency "webpack#^2.2.0 || ^3.0.0".
[4/4] Building fresh packages...
Done in 28.04s.
+ yarn build
yarn run v1.9.4
$ react-scripts build
Creating an optimized production build...
<--- Last few GCs --->
[31498:0x2ab86d0] 229792 ms: Mark-sweep 1277.3 (1459.7) -> 1277.2 (1461.7) MB, 1801.1 / 0.0 ms allocation failure GC in old space requested
[31498:0x2ab86d0] 231676 ms: Mark-sweep 1277.2 (1461.7) -> 1277.0 (1420.7) MB, 1884.4 / 0.0 ms last resort GC in old space requested
[31498:0x2ab86d0] 233210 ms: Mark-sweep 1277.0 (1420.7) -> 1277.0 (1419.2) MB, 1533.2 / 0.0 ms last resort GC in old space requested
<--- JS stacktrace --->
==== JS stack trace =========================================
Security context: 0xb1707c25879 <JSObject>
0: builtin exit frame: stringify(this=0xb1707c090a9 <Object map = 0x123a95202ba1>,0x11b5562822d1 <undefined>,0x11b5562822d1 <undefined>,0x26b024683529 <Object map = 0x2449e8a328d1>)
1: arguments adaptor frame: 1->3
2: toString [0x11b5562822d1 <undefined>:9522] [bytecode=0xf76e19f6a69 offset=28](this=0xb3c89b82b29 <Object map = 0x306621cb3d19>)
7: /* anonymous */(aka /* anonymous ...
FATAL ERROR: CALL_AND_RETRY_LAST Allocation failed - JavaScript heap out of memory
1: node::Abort() [node]
2: 0x8c21ec [node]
3: v8::Utils::ReportOOMFailure(char const*, bool) [node]
4: v8::internal::V8::FatalProcessOutOfMemory(char const*, bool) [node]
5: v8::internal::Factory::NewRawOneByteString(int, v8::internal::PretenureFlag) [node]
6: v8::internal::String::SlowFlatten(v8::internal::Handle<v8::internal::ConsString>, v8::internal::PretenureFlag) [node]
7: v8::internal::JsonStringifier::SerializeString(v8::internal::Handle<v8::internal::String>) [node]
8: v8::internal::JsonStringifier::Result v8::internal::JsonStringifier::Serialize_<true>(v8::internal::Handle<v8::internal::Object>, bool, v8::internal::Handle<v8::internal::Object>) [node]
9: v8::internal::JsonStringifier::Result v8::internal::JsonStringifier::Serialize_<false>(v8::internal::Handle<v8::internal::Object>, bool, v8::internal::Handle<v8::internal::Object>) [node]
10: v8::internal::JsonStringifier::Stringify(v8::internal::Handle<v8::internal::Object>, v8::internal::Handle<v8::internal::Object>, v8::internal::Handle<v8::internal::Object>) [node]
11: v8::internal::Builtin_JsonStringify(int, v8::internal::Object**, v8::internal::Isolate*) [node]
12: 0x14795198697d
error Command failed with exit code 1.
The only change that started to generate this error was the adition of 2 node dependencies:
"react-accessible-accordion": "^3.0.0",
"react-simple-collapse": "^0.1.2",
The full package.json is this:
{
"name": "front-master",
"version": "0.1.0",
"private": true,
"dependencies": {
"#blueprintjs/core": "^2.3.1",
"#blueprintjs/select": "^2.0.1",
"#esri/arcgis-to-geojson-utils": "^1.3.0",
"#kenshooui/react-multi-select": "^1.1.5",
"antd": "^3.12.1",
"async": "^2.6.1",
"axios": "^0.18.0",
"bootstrap": "^4.1.2",
"classnames": "^2.2.6",
"esri-loader": "^2.4.0",
"fetch-jsonp": "^1.1.3",
"globalize": "^1.4.2",
"google-maps-react": "^1.1.11",
"highcharts": "^6.1.1",
"moment": "^2.22.2",
"npm": "^6.2.0",
"react": "^16.4.1",
"react-accessible-accordion": "^3.0.0",
"react-addons-css-transition-group": "^15.6.2",
"react-autosuggest": "^9.4.3",
"react-beautiful-dnd": "^10.0.4",
"react-bootstrap-table-next": "^3.1.2",
"react-bootstrap-table2-paginator": "^2.0.6",
"react-bootstrap-table2-toolkit": "^1.4.2",
"react-color": "^2.14.1",
"react-csv": "^1.0.15-RC2",
"react-custom-scrollbars": "^4.2.1",
"react-data-export": "^0.5.0",
"react-datepicker": "^2.8.0",
"react-dom": "^16.4.1",
"react-export-excel": "^0.5.3",
"react-intl": "^2.4.0",
"react-lineto": "^3.1.2",
"react-redux": "^5.0.7",
"react-router-dom": "^4.3.1",
"react-scripts": "^1.1.4",
"react-select": "^2.0.0",
"react-simple-collapse": "^0.1.2",
"react-sortable-hoc": "^0.8.3",
"react-transition-group": "^2.4.0",
"react-widgets": "^5.0.0-7",
"react-widgets-globalize": "^5.0.20",
"react-widgets-moment": "^4.0.27",
"reactstrap": "^5.0.0",
"redux": "^3.7.2",
"redux-thunk": "^2.3.0",
"terraformer-wkt-parser": "^1.2.0",
"video-react": "^0.14.1",
"x2js": "^3.2.1",
"xlsx": "^0.14.1"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
},
"devDependencies": {
"eslint-plugin-react-hooks": "^1.3.0",
"react-docgen": "^2.21.0",
"react-styleguidist": "^7.1.0"
}
}
EDIT: Also, I got this warning from github when I pushed my branch
So I checked yarn.lock and I can see that the version there is:
mem#^1.1.0:
version "1.1.0"
But how could I upgrade a dependency that is not defined on package.json ?
Finally, I use this:
https://stackoverflow.com/a/55378108/3541320
In my package.json the script for build:
"build": "react-scripts --max_old_space_size=4096 build"
If you use a server with less memory (512MB) you need set try two things:
1 - Set less memory on react-scripts
"build": "react-scripts --max_old_space_size=256 build"
2 - You can disable generation of source maps as described in https://create-react-app.dev/docs/advanced-configuration put in .env file:
GENERATE_SOURCEMAP=false
Sometimes increasing the memory allocation for node.js is not the solution you need. The most common culprit for this is caused by recursion which can arise from cyclic dependencies.
Madge is a tool that can help you detect when you have a cyclic dependency in your Nodejs/React Application
Add to your script
npm i -g madge
"madge": "madge --image ./madge-graph.svg --extensions js,jsx,ts,tsx --circular .",
Maybe the 2 dependencies you added use lot of memory, it would explain the error you get from jenkins.
Did you try to increase the memory allocated to jenkins as explained here?
Hope it will help you!
It seems that my case is ridiculous but I had to replace the 32-bit node with a 64-bit node.
Doing npm cache clean --force resolve the problem for me
In my case I do this and it works
Linux/macOS
export NODE_OPTIONS=--max-old-space-size=8192
please refer click on this URL
I faced the same issue today. My code works fine when i run in local machine. But when i deploy it to netlify it shows the error you have mentioned above.
I have tried setting "max_old_space_size" variable and some other answers on other posts.
But none of them worked for me.
In my case, my node version in local machine differs from netlify site version.
So I edited environment variable with my local machine node version and the build is succesfully completed.
I could fix it for one of my project like this :
On a newly created git branch run :
npm run eject
This will create many files and update your package json (the start/test/build commands if you haven't changed them).
Go to config/webpack.config.js and update the TerserPlugin options properties "compress" and "mangle" :
new TerserPlugin({
terserOptions: {
...
compress: false,
mangle: true,
...
This has decreased drastically build time and memory usage...
The tradeoff is a slightly bigger build file (went from 2.3Mo to 2.6Mo for my project). So you should consider if it fits for your project in case of performance constraints.
Why this change ? I tried this because of the following info in the Terser documentation :
It's not well known, but whitespace removal and symbol mangling accounts for 95% of the size reduction in minified code for most JavaScript - not elaborate code transforms.
If you want to "revert" the eject command : https://stackoverflow.com/a/54248621/4739462

React Native Debugger Error - Cannot GET /debugger-ui/

React Native Debugger is automatically loading to http://localhost:8081/debugger-ui/.
However, I keep getting the following error -
Cannot GET /debugger-ui/
Apparently they have left a bug in the code. For it to work right now, you will have to change the react-native-community module on your own.
Go to the file
/node_modules/react-native-community/cli/build/commands/server/middleware/MiddlewareManager.js
and, in the line 97
const debuggerUIFolder = _path().default.join(__dirname, '..', 'util',
'debugger-ui');
remove the 'util' param, changing it to
const debuggerUIFolder = _path().default.join(__dirname, '..',
'debugger-ui');
For me it was only:
rm -rf node_modules && npm i
npm run start -- -- reset-cache
cd ios && rm -rf Pods && pod install

Resources