Category: javascript

I’m trying to set up Rocket.Chat on my local machine, but I’m running into several build errors that I can’t seem to resolve. I’ve followed the official setup instructions, but I’m hitting issues during the installation process with Yarn.

Here are some of the error messages I’m encountering (removed some because of body limit):

command exited (1) errors from multiple packages, including @rocket.chat/livechat, @rocket.chat/fuselage-ui-kit, and others.

A lot of packages (like bcrypt, sharp, highlight.js, esbuild, etc.) require building and keep failing.

There are warnings like must be built because it never has been before or the last one failed.

I’ve already tried clearing the Yarn cache and reinstalling dependencies using yarn install –force, but the issue persists. I also made sure I have the necessary build tools installed (node-gyp, Python, etc.) and have updated my Node.js version.

Has anyone here faced similar issues or can offer advice on how to resolve them? Any help or suggestions would be greatly appreciated!

Checkout the below, this is what i received after running yarn install

➤ YN0000: · Yarn 4.6.0
➤ YN0000: ┌ Resolution step
➤ YN0000: └ Completed in 0s 794ms
➤ YN0000: ┌ Post-resolution validation
➤ YN0060: │ @testing-library/react is listed by your project with version 16.0.1 (pa9c24), which doesn't satisfy what @react-spectrum/test-utils and other dependencies request (^15.0.7).
➤ YN0060: │ @testing-library/react is listed by your project with version 16.0.1 (pc78b6), which doesn't satisfy what @react-spectrum/test-utils and other dependencies request (^15.0.7).
➤ YN0060: │ @typescript-eslint/eslint-plugin is listed by your project with version 5.60.1 (p4a625), which doesn't satisfy what eslint-plugin-jest requests (^6.0.0 || ^7.0.0 || ^8.0.0).
➤ YN0060: │ eslint is listed by your project with version 8.45.0 (p03f1f), which doesn't satisfy what @typescript-eslint/utils (via eslint-plugin-storybook) and other dependencies request (^8.57.0).
➤ YN0060: │ eslint is listed by your project with version 8.45.0 (p058dc), which doesn't satisfy what @typescript-eslint/utils (via eslint-plugin-storybook) and other dependencies request (^8.57.0 || ^9.7.0).
➤ YN0060: │ eslint is listed by your project with version 8.45.0 (p1861a), which doesn't satisfy what @typescript-eslint/utils (via eslint-plugin-storybook) and other dependencies request (^8.57.0).
➤ YN0060: │ eslint is listed by your project with version 8.45.0 (p18f2b), which doesn't satisfy what @typescript-eslint/utils (via eslint-plugin-storybook) and other dependencies request (^8.57.0).
➤ YN0060: │ eslint is listed by your project with version 8.45.0 (p19abf), which doesn't satisfy what @typescript-eslint/utils (via eslint-plugin-jest) and other dependencies request (^8.57.0).
➤ YN0060: │ eslint is listed by your project with version 8.45.0 (p1b0a5), which doesn't satisfy what @typescript-eslint/utils (via eslint-plugin-storybook) and other dependencies request (^8.57.0).
➤ YN0060: │ eslint is listed by your project with version 8.45.0 (p1e4af), which doesn't satisfy what @typescript-eslint/utils (via eslint-plugin-storybook) and other dependencies request (^8.57.0 || ^9.7.0).
➤ YN0060: │ eslint is listed by your project with version 8.45.0 (p2b44b), which doesn't satisfy what @typescript-eslint/utils (via eslint-plugin-storybook) and other dependencies request (^8.57.0).
➤ YN0060: │ eslint is listed by your project with version 8.45.0 (p2d4ce), which doesn't satisfy what @typescript-eslint/utils (via eslint-plugin-storybook) and other dependencies request (^8.57.0).
➤ YN0060: │ eslint is listed by your project with version 8.45.0 (p4a185), which doesn't satisfy what @typescript-eslint/utils (via eslint-plugin-storybook) and other dependencies request (^8.57.0).
➤ YN0060: │ eslint is listed by your project with version 8.45.0 (p4cc1f), which doesn't satisfy what @typescript-eslint/utils (via eslint-plugin-storybook) and other dependencies request (^8.57.0 || ^9.7.0).
➤ YN0060: │ eslint is listed by your project with version 8.45.0 (p50632), which doesn't satisfy what @typescript-eslint/utils (via eslint-plugin-storybook) and other dependencies request (^8.57.0).
➤ YN0060: │ eslint is listed by your project with version 8.45.0 (p596bb), which doesn't satisfy what @typescript-eslint/utils (via eslint-plugin-storybook) and other dependencies request (^8.57.0).
➤ YN0060: │ eslint is listed by your project with version 8.45.0 (p5f09f), which doesn't satisfy what @typescript-eslint/utils (via eslint-plugin-storybook) and other dependencies request (^8.57.0).
➤ YN0060: │ eslint is listed by your project with version 8.45.0 (p63790), which doesn't satisfy what @typescript-eslint/utils (via eslint-plugin-storybook) and other dependencies request (^8.57.0).
➤ YN0060: │ eslint is listed by your project with version 8.45.0 (p67268), which doesn't satisfy what @typescript-eslint/utils (via eslint-plugin-storybook) and other dependencies request (^8.57.0 || ^9.7.0).
➤ YN0060: │ eslint is listed by your project with version 8.45.0 (p6b481), which doesn't satisfy what @typescript-eslint/utils (via eslint-plugin-storybook) and other dependencies request (^8.57.0).
➤ YN0060: │ eslint is listed by your project with version 8.45.0 (p78da6), which doesn't satisfy what @typescript-eslint/utils (via eslint-plugin-storybook) and other dependencies request (^8.57.0).
➤ YN0060: │ eslint is listed by your project with version 8.45.0 (p79ebc), which doesn't satisfy what @typescript-eslint/utils (via eslint-plugin-storybook) and other dependencies request (^8.57.0).
➤ YN0060: │ eslint is listed by your project with version 8.45.0 (p7b1f7), which doesn't satisfy what @typescript-eslint/utils (via eslint-plugin-storybook) and other dependencies request (^8.57.0).
➤ YN0060: │ eslint is listed by your project with version 8.45.0 (p7bf2c), which doesn't satisfy what @typescript-eslint/utils (via eslint-plugin-storybook) and other dependencies request (^8.57.0).
➤ YN0060: │ eslint is listed by your project with version 8.45.0 (p9989a), which doesn't satisfy what @typescript-eslint/utils (via eslint-plugin-storybook) and other dependencies request (^8.57.0 || ^9.7.0).
➤ YN0060: │ eslint is listed by your project with version 8.45.0 (pad400), which doesn't satisfy what @typescript-eslint/utils (via eslint-plugin-storybook) and other dependencies request (^8.57.0).
➤ YN0060: │ eslint is listed by your project with version 8.45.0 (pb231b), which doesn't satisfy what @typescript-eslint/utils (via eslint-plugin-storybook) and other dependencies request (^8.57.0 || ^9.7.0).
➤ YN0060: │ eslint is listed by your project with version 8.45.0 (pc8576), which doesn't satisfy what @typescript-eslint/utils (via eslint-plugin-storybook) and other dependencies request (^8.57.0).
➤ YN0060: │ eslint is listed by your project with version 8.45.0 (pca560), which doesn't satisfy what @typescript-eslint/utils (via eslint-plugin-storybook) and other dependencies request (^8.57.0).
➤ YN0060: │ eslint is listed by your project with version 8.45.0 (pd6a98), which doesn't satisfy what @typescript-eslint/utils (via eslint-plugin-storybook) and other dependencies request (^8.57.0).
➤ YN0060: │ eslint is listed by your project with version 8.45.0 (pd739b), which doesn't satisfy what @typescript-eslint/utils (via eslint-plugin-storybook) and other dependencies request (^8.57.0).
➤ YN0060: │ eslint is listed by your project with version 8.45.0 (pdd4b4), which doesn't satisfy what @typescript-eslint/utils (via eslint-plugin-storybook) and other dependencies request (^8.57.0).
➤ YN0060: │ eslint is listed by your project with version 8.45.0 (pdf71e), which doesn't satisfy what @typescript-eslint/utils (via eslint-plugin-storybook) and other dependencies request (^8.57.0).
➤ YN0060: │ eslint is listed by your project with version 8.45.0 (pe325a), which doesn't satisfy what @typescript-eslint/utils (via eslint-plugin-storybook) and other dependencies request (^8.57.0 || ^9.7.0).
➤ YN0060: │ eslint is listed by your project with version 8.45.0 (pe8bbd), which doesn't satisfy what @typescript-eslint/utils (via eslint-plugin-storybook) and other dependencies request (^8.57.0).
➤ YN0060: │ eslint is listed by your project with version 8.45.0 (pf6807), which doesn't satisfy what @typescript-eslint/utils (via eslint-plugin-storybook) and other dependencies request (^8.57.0 || ^9.7.0).
➤ YN0060: │ eslint is listed by your project with version 8.45.0 (pffe6f), which doesn't satisfy what @typescript-eslint/utils (via eslint-plugin-storybook) and other dependencies request (^8.57.0).
➤ YN0060: │ prettier is listed by your project with version 3.3.3 (p2088b), which doesn't satisfy what @rocket.chat/prettier-config and other dependencies request (~2.7.1).
➤ YN0060: │ prettier is listed by your project with version 3.3.3 (p582a7), which doesn't satisfy what @rocket.chat/prettier-config and other dependencies request (~2.7.1).
➤ YN0060: │ prettier is listed by your project with version 3.3.3 (p58d10), which doesn't satisfy what @rocket.chat/prettier-config requests (~2.7.1).
➤ YN0060: │ prettier is listed by your project with version 3.3.3 (p6eec0), which doesn't satisfy what @rocket.chat/prettier-config requests (~2.7.1).
➤ YN0060: │ prettier is listed by your project with version 3.3.3 (pbb663), which doesn't satisfy what @rocket.chat/prettier-config requests (~2.7.1).
➤ YN0060: │ prettier is listed by your project with version 3.3.3 (pcc453), which doesn't satisfy what @rocket.chat/prettier-config and other dependencies request (~2.7.1).
➤ YN0060: │ react is listed by your project with version 18.3.1 (p0f476), which doesn't satisfy what @rocket.chat/fuselage-hooks and other dependencies request (but they have non-overlapping ranges!).
➤ YN0060: │ react is listed by your project with version 18.3.1 (p1434d), which doesn't satisfy what @rocket.chat/fuselage-hooks and other dependencies request (but they have non-overlapping ranges!).
➤ YN0060: │ react is listed by your project with version 18.3.1 (p35994), which doesn't satisfy what @rocket.chat/fuselage and other dependencies request (^17.0.2).
➤ YN0060: │ react is listed by your project with version 18.3.1 (p5a657), which doesn't satisfy what @rocket.chat/fuselage-hooks and other dependencies request (but they have non-overlapping ranges!).
➤ YN0060: │ react is listed by your project with version 18.3.1 (p64616), which doesn't satisfy what @rocket.chat/fuselage and other dependencies request (but they have non-overlapping ranges!).
➤ YN0060: │ react is listed by your project with version 18.3.1 (p67eab), which doesn't satisfy what @rocket.chat/fuselage-hooks and other dependencies request (but they have non-overlapping ranges!).
➤ YN0060: │ react is listed by your project with version 18.3.1 (p78ed8), which doesn't satisfy what @rocket.chat/ui-contexts and other dependencies request (but they have non-overlapping ranges!).
➤ YN0060: │ react is listed by your project with version 18.3.1 (p8ca07), which doesn't satisfy what @rocket.chat/fuselage-hooks and other dependencies request (but they have non-overlapping ranges!).
➤ YN0060: │ react is listed by your project with version 18.3.1 (p97776), which doesn't satisfy what @rocket.chat/fuselage-hooks and other dependencies request (~17.0.2).
➤ YN0060: │ react is listed by your project with version 18.3.1 (p97ace), which doesn't satisfy what @rocket.chat/fuselage-hooks and other dependencies request (but they have non-overlapping ranges!).
➤ YN0060: │ react is listed by your project with version 18.3.1 (pa454c), which doesn't satisfy what @rocket.chat/fuselage-hooks and other dependencies request (but they have non-overlapping ranges!).
➤ YN0060: │ react is listed by your project with version 18.3.1 (pa9294), which doesn't satisfy what @rocket.chat/layout and other dependencies request (but they have non-overlapping ranges!).
➤ YN0060: │ react is listed by your project with version 18.3.1 (pada5d), which doesn't satisfy what @rocket.chat/fuselage-hooks and other dependencies request (~17.0.2).
➤ YN0060: │ react is listed by your project with version 18.3.1 (pd5e5d), which doesn't satisfy what @rocket.chat/fuselage-hooks and other dependencies request (^17.0.2).
➤ YN0060: │ react is listed by your project with version 18.3.1 (pd7632), which doesn't satisfy what @rocket.chat/fuselage-hooks and other dependencies request (but they have non-overlapping ranges!).
➤ YN0060: │ react is listed by your project with version 18.3.1 (pf1cb7), which doesn't satisfy what @rocket.chat/fuselage-hooks and other dependencies request (^17.0.2).
➤ YN0060: │ react-aria is listed by your project with version 3.37.0 (p612cf), which doesn't satisfy what @rocket.chat/ui-voip requests (~3.23.1).
➤ YN0060: │ react-dom is listed by your project with version 18.3.1 (p08ac0), which doesn't satisfy what @rocket.chat/fuselage and other dependencies request (but they have non-overlapping ranges!).
➤ YN0060: │ react-dom is listed by your project with version 18.3.1 (p46e93), which doesn't satisfy what @rocket.chat/fuselage-toastbar and other dependencies request (but they have non-overlapping ranges!).
➤ YN0060: │ react-dom is listed by your project with version 18.3.1 (p54b31), which doesn't satisfy what @rocket.chat/fuselage and other dependencies request (^17.0.2).
➤ YN0060: │ react-dom is listed by your project with version 18.3.1 (p7e149), which doesn't satisfy what @rocket.chat/fuselage and other dependencies request (but they have non-overlapping ranges!).
➤ YN0060: │ react-dom is listed by your project with version 18.3.1 (pb0a81), which doesn't satisfy what @rocket.chat/fuselage-toastbar and other dependencies request (but they have non-overlapping ranges!).
➤ YN0060: │ react-dom is listed by your project with version 18.3.1 (pcf2f8), which doesn't satisfy what @rocket.chat/fuselage and other dependencies request (but they have non-overlapping ranges!).
➤ YN0060: │ react-dom is listed by your project with version 18.3.1 (pd54c2), which doesn't satisfy what @rocket.chat/fuselage and other dependencies request (but they have non-overlapping ranges!).
➤ YN0060: │ react-dom is listed by your project with version 18.3.1 (pdbd80), which doesn't satisfy what @rocket.chat/logo and other dependencies request (17.0.2).
➤ YN0060: │ react-dom is listed by your project with version 18.3.1 (pdfd68), which doesn't satisfy what @rocket.chat/fuselage and other dependencies request (but they have non-overlapping ranges!).
➤ YN0060: │ react-dom is listed by your project with version 18.3.1 (pf0691), which doesn't satisfy what @rocket.chat/fuselage and other dependencies request (but they have non-overlapping ranges!).
➤ YN0060: │ react-i18next is listed by your project with version 13.2.2 (p927a5), which doesn't satisfy what @rocket.chat/layout and other dependencies request (~11.15.4).
➤ YN0060: │ react-i18next is listed by your project with version 13.2.2 (paaa51), which doesn't satisfy what @rocket.chat/layout and other dependencies request (~11.15.4).
➤ YN0060: │ react-virtuoso is listed by your project with version 4.12.0 (pa6103), which doesn't satisfy what @rocket.chat/fuselage requests (1.2.4).
➤ YN0060: │ react-virtuoso is listed by your project with version 4.12.0 (ped875), which doesn't satisfy what @rocket.chat/fuselage requests (1.2.4).
➤ YN0060: │ sodium-native is listed by your project with version 4.3.1 (p68628), which doesn't satisfy what sodium-plus requests (^3.2.0).
➤ YN0060: │ sodium-native is listed by your project with version 4.3.1 (p8dac2), which doesn't satisfy what sodium-plus requests (^3.2.0).
➤ YN0060: │ typescript is listed by your project with version 5.7.2 (p457bb), which doesn't satisfy what typedoc and other dependencies request (~4.6.0 || ~4.6.0 || ~4.6.0 || ~4.6.0 || ~4.6.0 || ~4.6.0 || ~4.6.0 || ~4.7.0 || ~4.7.0 || ~4.7.0 || ~4.7.0 || ~4.7.0 || ~4.7.0 || ~4.7.0 || ~4.8.0 || ~4.8.0 || ~4.8.0 || ~4.8.0 || ~4.8.0 || ~4.8.0 || ~4.8.0 || ~4.9.0 || ~4.9.0 || ~4.9.0 || ~4.9.0 || ~4.9.0 || ~4.9.0 || ~4.9.0 || ~5.0.0 || ~5.0.0 || ~5.0.0 || ~5.0.0 || ~5.0.0 || ~5.0.0 || ~5.0.0 || ~5.1.0 || ~5.1.0 || ~5.1.0 || ~5.1.0 || ~5.1.0 || ~5.1.0 || ~5.1.0).
➤ YN0060: │ typescript is listed by your project with version 5.7.2 (pa421e), which doesn't satisfy what typia and other dependencies request (>=4.8.0 <5.7.0 || >=4.8.0 <5.7.0 || >=4.8.0 <5.7.0 || >=4.8.0 <5.7.0 || >=4.8.0 <5.7.0 || >=4.8.0 <5.7.0 || >=4.8.0 <5.7.0).
➤ YN0060: │ typescript is listed by your project with version 5.7.2 (pc93b7), which doesn't satisfy what typedoc and other dependencies request (~4.6.0 || ~4.6.0 || ~4.6.0 || ~4.6.0 || ~4.6.0 || ~4.6.0 || ~4.6.0 || ~4.7.0 || ~4.7.0 || ~4.7.0 || ~4.7.0 || ~4.7.0 || ~4.7.0 || ~4.7.0 || ~4.8.0 || ~4.8.0 || ~4.8.0 || ~4.8.0 || ~4.8.0 || ~4.8.0 || ~4.8.0 || ~4.9.0 || ~4.9.0 || ~4.9.0 || ~4.9.0 || ~4.9.0 || ~4.9.0 || ~4.9.0 || ~5.0.0 || ~5.0.0 || ~5.0.0 || ~5.0.0 || ~5.0.0 || ~5.0.0 || ~5.0.0 || ~5.1.0 || ~5.1.0 || ~5.1.0 || ~5.1.0 || ~5.1.0 || ~5.1.0 || ~5.1.0).
➤ YN0060: │ vite is listed by your project with version 6.1.0 (pe722d), which doesn't satisfy what @vitejs/plugin-react requests (^4.2.0 || ^5.0.0).
➤ YN0002: │ @rocket.chat/eslint-config@workspace:packages/eslint-config doesn't provide typescript (p95e9c), requested by @typescript-eslint/eslint-plugin and other dependencies.
➤ YN0002: │ @rocket.chat/fuselage-ui-kit@workspace:packages/fuselage-ui-kit [15ac9] doesn't provide @rocket.chat/css-in-js (p06cfb), requested by @rocket.chat/ui-video-conf.
➤ YN0002: │ @rocket.chat/fuselage-ui-kit@workspace:packages/fuselage-ui-kit [15ac9] doesn't provide @testing-library/dom (pf39f4), requested by @testing-library/react and other dependencies
➤ YN0002: │ @rocket.chat/ui-voip@workspace:packages/ui-voip doesn't provide i18next (p61397), requested by react-i18next.
➤ YN0002: │ @rocket.chat/ui-voip@workspace:packages/ui-voip doesn't provide react-dom (p7140c), requested by @rocket.chat/fuselage and other dependencies.
➤ YN0002: │ @rocket.chat/ui-voip@workspace:packages/ui-voip doesn't provide react-virtuoso (p35845), requested by @rocket.chat/fuselage.
➤ YN0002: │ @rocket.chat/uikit-playground@workspace:apps/uikit-playground doesn't provide @rocket.chat/emitter (p96230), requested by @rocket.chat/ui-contexts.
➤ YN0002: │ @rocket.chat/uikit-playground@workspace:apps/uikit-playground doesn't provide @rocket.chat/i18n (paf171), requested by @rocket.chat/ui-contexts.
➤ YN0002: │ @rocket.chat/uikit-playground@workspace:apps/uikit-playground doesn't provide @rocket.chat/rest-typings (p31a26), requested by @rocket.chat/ui-contexts.
➤ YN0002: │ @rocket.chat/web-ui-registration@workspace:packages/web-ui-registration [965c2] doesn't provide @testing-library/dom (pf276a), requested by @testing-library/react.
➤ YN0002: │ @rocket.chat/web-ui-registration@workspace:packages/web-ui-registration [965c2] doesn't provide react-dom (pe969c), requested by @storybook/react and other dependencies.
➤ YN0002: │ @rocket.chat/web-ui-registration@workspace:packages/web-ui-registration [965c2] doesn't provide webpack (p22b59), requested by babel-loader.
➤ YN0002: │ @rocket.chat/web-ui-registration@workspace:packages/web-ui-registration doesn't provide @rocket.chat/core-typings (p42a80), requested by @rocket.chat/ui-contexts.
➤ YN0002: │ @rocket.chat/web-ui-registration@workspace:packages/web-ui-registration doesn't provide @rocket.chat/fuselage (p9c76a), requested by @rocket.chat/layout.
➤ YN0002: │ @rocket.chat/web-ui-registration@workspace:packages/web-ui-registration doesn't provide @testing-library/dom (p8f876), requested by @testing-library/react.
➤ YN0002: │ @rocket.chat/web-ui-registration@workspace:packages/web-ui-registration doesn't provide i18next (p96b8f), requested by react-i18next.
➤ YN0002: │ @rocket.chat/web-ui-registration@workspace:packages/web-ui-registration doesn't provide react-dom (p97a13), requested by @rocket.chat/layout and other dependencies.
➤ YN0002: │ @rocket.chat/web-ui-registration@workspace:packages/web-ui-registration doesn't provide webpack (pd764a), requested by babel-loader.
➤ YN0002: │ rocket.chat@workspace:. doesn't provide @types/node (pa98d6), requested by ts-node.
➤ YN0086: │ Some peer dependencies are incorrectly met by your project; run yarn explain peer-requirements <hash> for details, where <hash> is the six-letter p-prefixed code.
➤ YN0086: │ Some peer dependencies are incorrectly met by dependencies; run yarn explain peer-requirements for details.
➤ YN0000: └ Completed
➤ YN0000: ┌ Fetch step
➤ YN0000: └ Completed in 1s 889ms
➤ YN0000: ┌ Link step
➤ YN0007: │ @kaciras/deasync@npm:1.1.0 must be built because it never has been before or the last one failed
➤ YN0007: │ aws-sdk@npm:2.1691.0 must be built because it never has been before or the last one failed
➤ YN0007: │ bcrypt@npm:5.1.1 must be built because it never has been before or the last one failed
➤ YN0007: │ highlight.js@npm:9.18.5 must be built because it never has been before or the last one failed
➤ YN0007: │ isolated-vm@npm:5.0.1 must be built because it never has been before or the last one failed
➤ YN0007: │ sharp@npm:0.33.5 must be built because it never has been before or the last one failed
➤ YN0007: │ @matrix-org/matrix-sdk-crypto-nodejs@npm:0.2.0-beta.1 must be built because it never has been before or the last one failed
➤ YN0007: │ @napi-rs/pinyin@npm:1.7.0 must be built because it never has been before or the last one failed
➤ YN0007: │ gc-stats@npm:1.4.1 must be built because it never has been before or the last one failed
➤ YN0007: │ protobufjs@npm:7.4.0 must be built because it never has been before or the last one failed
➤ YN0007: │ esbuild@npm:0.24.0 must be built because it never has been before or the last one failed
➤ YN0007: │ es5-ext@npm:0.10.64 must be built because it never has been before or the last one failed
➤ YN0007: │ esbuild@npm:0.25.0 must be built because it never has been before or the last one failed
➤ YN0007: │ esbuild@npm:0.24.2 must be built because it never has been before or the last one failed
➤ YN0007: │ @swc/core@npm:1.9.2 [e975a] must be built because it never has been before or the last one failed
➤ YN0007: │ event-loop-stats@npm:1.4.1 must be built because it never has been before or the last one failed
➤ YN0007: │ core-js@npm:2.6.12 must be built because it never has been before or the last one failed
➤ YN0007: │ gifsicle@npm:5.3.0 must be built because it never has been before or the last one failed
➤ YN0007: │ mozjpeg@npm:7.1.1 must be built because it never has been before or the last one failed
➤ YN0007: │ optipng-bin@npm:7.0.1 must be built because it never has been before or the last one failed
➤ YN0007: │ pngquant-bin@npm:6.0.1 must be built because it never has been before or the last one failed
➤ YN0007: │ cwebp-bin@npm:7.0.1 must be built because it never has been before or the last one failed
➤ YN0000: └ Completed in 1m 2s
➤ YN0000: · Done with warnings in 1m 6s

I have read that createBrowserRouter should be outside React function, I could not find anyway/tutorial that show how to pass props to the components, should I use (useContext) in this case? Are there any other options?

const router = createBrowserRouter(
  createRoutesFromElements(
    <Route path="/" element={<Layout />}>
      <Route index element={<Home articles={articles} />} />
      <Route path="About" element={<About />} />
    </Route>
  )
);

export function App() {
  const [articles, setArticles] = useState();

  return (
    <div>
      <RouterProvider router={router} />
    </div>
  );
}

I’ve been trying to get an SVG to work with Three.js. I’ve learned it doesn’t initially support SVGs, and an SVGLoader is required. After adding that in, the issue I’m having is the mesh completely disappears, my console also doesn’t seem to throw any errors either. Any ideas?

As an aside, I’ve been following this tutorial, making changes to get the SVGLoader in of course.

import * as THREE from 'three'
import { SVGLoader } from 'three/examples/jsm/loaders/SVGLoader'
import vertexShader from './gl/glsl/vertex.glsl'
import fragmentShader from './gl/glsl/fragment.glsl'

const Gl = () => {
    const scene = new THREE.Scene()

    const camera = new THREE.PerspectiveCamera(
        45,
        window.innerWidth / window.innerHeight,
        0.1,
        100
    )
    // camera.position.z = 1
    camera.position.set(0, 0, 5) // Move camera further

    const renderer = new THREE.WebGLRenderer({
        alpha: true,
        canvas: document.querySelector('#app'),
        antialias: true,
    })
    renderer.setSize(window.innerWidth, window.innerHeight)
    renderer.setClearColor(0x000000, 0)

    const loadSVG = (url) => {
        const loader = new SVGLoader()
        loader.load(url, (data) => {
            const paths = data.paths
            const group = new THREE.Group()

            paths.forEach((path) => {
                const shapes = SVGLoader.createShapes(path)
                shapes.forEach((shape) => {
                    const geometry = new THREE.ShapeGeometry(shape)
                    const material = new THREE.ShaderMaterial({
                        vertexShader,
                        fragmentShader,
                        uniforms: {
                            uTime: { value: 0.0 },
                        },
                        side: THREE.DoubleSide,
                    })
                    const mesh = new THREE.Mesh(geometry, material)
                    group.add(mesh)
                })
            })

            scene.add(group)
        })
    }

    loadSVG('./img/test.svg')

    const clock = new THREE.Clock()

    const onResize = () => {
        const w = window.innerWidth
        const h = window.innerHeight
        camera.aspect = w / h
        camera.updateProjectionMatrix()
        renderer.setSize(w, h)
    }

    const render = () => {
        renderer.render(scene, camera)
    }

    const run = () => {
        requestAnimationFrame(run)
        render()
    }

    const init = () => {
        window.addEventListener('resize', onResize, false)
        run()
    }

    init()
}

export default Gl

im using tailwindcss v4 on my next.js project .

my global.css file is

@import "tailwindcss";


@layer base {
  * {
    @apply border-border;
  }
  body {
    @apply bg-background text-foreground;
  }
}

im getting the error as

./src/app/globals.css
Error evaluating Node.js code
Error: Cannot apply unknown utility class: border-border
    [at onInvalidCandidate (C:UserspoudeDesktopMy 

is there any way to solve this issue .

my vscode shows the issue as

Unknown at rule @applycss(unknownAtRules)

I am new to Blazor, but I have a strong background in React. I suspect I might be trying to make Blazor work like React, and that could be causing my issue.

I have a BaseStep component that provides a structure for child steps in a multi-step form. One such step is StepOne, which contains a ToggleGroup component that allows users to select an engagement type.

However, the UI does not update/re-render when @AccessRequest.NatureOfEngagementId changes. Strangely enough:

The <p> tag correctly prints the updated ID, meaning the data itself is changing.
The selection in ToggleGroup only updates when another part of the page causes a re-render.
This leaves me thinking the issue lies in my ToggleGroup component. I need help figuring out why my UI is not updating immediately when @AccessRequest.NatureOfEngagementId changes.

I have a BaseStep component that acts as an abstract step:

 public abstract class StepBase : ComponentBase
 {
 
 [Parameter] public Request NewAccessRequest { get; set; } = default!;
 [Parameter] public EventCallback<Request> NewAccessRequestChanged { get; set; } = default!;
 [Parameter] public EventCallback<bool> OnStepValidChanged { get; set; } = default!;

 public required MudForm StepForm;
 protected bool StepSuccess;

 // Local copy of the request for binding
 private Request _localRequest = default!;

 // Property that binds to the local request and updates parent when changed
 protected Request AccessRequest
 {
     get => NewAccessRequest;
     set
     {
         if (!EqualityComparer<Request>.Default.Equals(NewAccessRequest, value))
         {

             NewAccessRequestChanged.InvokeAsync(value);
         }
     }
 }


 // Ensure local copy is in sync when parent updates the parameter
 protected override void OnParametersSet()
 {
     if (!EqualityComparer<Request>.Default.Equals(NewAccessRequest, _localRequest))
     {
         _localRequest = NewAccessRequest;

     }
 }

 // Method to validate the step
 public async Task<bool> ValidateStep()
 {
     if (StepForm != null)
     {
         await StepForm.Validate();
         await OnStepValidChanged.InvokeAsync(StepSuccess);
     }

     return StepSuccess;
 }
}

This child component inherits from StepBase and updates AccessRequest when an engagement is changed.

 public partial class StepOne : StepBase
 {
   [Parameter] public List<NatureOfEngagement> Engagements { get; set; } = [];



 private void OnEngagementChanged(int newEngagementId)
 {
         AccessRequest = RequestBuilder.From(AccessRequest)
             .WithNatureOfEngagementId(newEngagementId)
             .Build();
 }

}

Child Component’s UI:

@inherits StepBase

<MudStep Title="What relationship does the person requesting access have with the company">
    <MudForm Model="@NewAccessRequest" @ref="StepForm" @bind-IsValid="StepSuccess">
        <MudGrid>
            <MudItem xs="12">
                <ToggleGroup T="int"
                             Required
                             RequiredError="Please select an option"
                             Value="@AccessRequest.NatureOfEngagementId"
                             ValueChanged="OnEngagementChanged"
                             SelectionMode="SelectionMode.SingleSelection"
                             Options="Engagements.Select(e => 
                             new Option<int> { Value = e.Id, Label = e.Engagement 
                             }).ToList()" />
            </MudItem>

            <p>Selected ID @AccessRequest.NatureOfEngagementId</p>
        </MudGrid>
    </MudForm>
</MudStep>

This custom ToggleGroup<T> component is used for selection:

      public partial class ToggleGroup<T> : MudFormComponent<T, T>
  {
      // The text to display above the toggle group
      [Parameter] public string? Label { get; set; }

      [Parameter] public Dictionary<string, object>? AdditionalAttributes { get; set; }

      // The list of toggle options
      [Parameter] public IEnumerable<Option<T>>? Options { get; set; }

      [Parameter] public SelectionMode SelectionMode { get; set; } = SelectionMode.SingleSelection;

      [Parameter]
      [Category(CategoryTypes.List.Behavior)]
      public EventCallback<T?> ValueChanged { get; set; }

      [Parameter]
      [Category(CategoryTypes.List.Behavior)]
      public EventCallback<IEnumerable<T?>?> ValuesChanged { get; set; }

      [Parameter]
      public T? Value { get; set; }

      [Parameter]
      public IEnumerable<T>? Values { get; set; }

      // Single selection binding
      private T? SingleSelectedValue
      {
          get => Value; 
          set
          {
              if (!EqualityComparer<T?>.Default.Equals(_value, value))
              {
                  _value = value;
                  Value = value;
                  Touched = true;
                  BeginValidateAsync();
                  ValueChanged.InvokeAsync(value);
              }
          }
      }

      // Multiple selection binding
      private IEnumerable<T>? MultiSelectedValues
      {
          get => Values;
          set
          {
              if (!EqualityComparer<IEnumerable<T>?>.Default.Equals(_value as IEnumerable<T>, value))
              {
                  _value = value != null ? (T?)(object?)value : default;
                  Touched = true;
                  Values = value;
                  ValuesChanged.InvokeAsync(value);
                  BeginValidateAsync();

              }
          }
      }

      public ToggleGroup() : base(converter: new MudBlazor.Converter<T, T>())
      {
      }

      protected override Task ValidateValue()
      {
          var errors = new List<string>();
          ValidationErrors.Clear();

          if (Options == null || !Options.Any())
          {
              // If there are no available options, mark as error
              Error = Required;
          }
          else
          {
              if (SelectionMode == SelectionMode.SingleSelection)
              {
                  // Ensure SingleSelectedValue is present in Options
                  Error = Required && (SingleSelectedValue == null || !Options.Any(o => EqualityComparer<T>.Default.Equals(o.Value, SingleSelectedValue)));
              }
              else
              {
                  // Ensure all MultiSelectedValues exist in Options
                  Error = Required && (MultiSelectedValues == null || !MultiSelectedValues.All(val => Options.Any(o => EqualityComparer<T>.Default.Equals(o.Value, val))));
              }
          }

          if (Error)
          {
              ValidationErrors.Add(RequiredError);
          }

          ValidationErrors = errors;
          return Task.CompletedTask;
      }

      }

Toggle Component UI:

    @typeparam T
    @inherits MudFormComponent<T, T>

    <MudStack>
    @if (Label != null)
    {
        <MudText Class="m-2" Typo="Typo.body2" Color="@(Error ? Color.Error : Color.Default)">
            @(Label + (Required ? "*" : ""))
        </MudText>
    }


    @if (SelectionMode == SelectionMode.SingleSelection)
    {
        <!-- Single Selection -->
        <MudToggleGroup T="T"
                        CheckMark
                        SelectionMode="SelectionMode.SingleSelection"
                        Color="@(Error ? Color.Error: Color.Primary)"
                        @bind-Value="SingleSelectedValue"
                        @attributes="@AdditionalAttributes">
            @foreach (var option in Options ?? Enumerable.Empty<Option<T>>())
            {
                <MudToggleItem Value="@option.Value"
                               UnselectedIcon="@Icons.Material.Filled.CheckBoxOutlineBlank"
                               SelectedIcon="@Icons.Material.Filled.CheckBox">
                    @option.Label
                </MudToggleItem>
            }
        </MudToggleGroup>
    }
    else
    {
        <!-- Multiple Selection -->
        <MudToggleGroup T="T"
                        CheckMark
                        SelectionMode="SelectionMode.MultiSelection"
                        Color="@(Error ? Color.Error: Color.Primary)"
                        @bind-Values="MultiSelectedValues"
                        @attributes="@AdditionalAttributes">
            @foreach (var option in Options ?? Enumerable.Empty<Option<T>>())
            {
                <MudToggleItem Value="@option.Value"
                               UnselectedIcon="@Icons.Material.Filled.CheckBoxOutlineBlank"
                               SelectedIcon="@Icons.Material.Filled.CheckBox">
                    @option.Label
                </MudToggleItem>
            }
        </MudToggleGroup>
    }

    @if (Error)
    {
        <MudText Class="text-danger" Style="margin-top: -10px; margin-left: 8px;" Typo="Typo.caption">
            @(string.IsNullOrWhiteSpace(ErrorText) ? RequiredError : ErrorText)
        </MudText>
    }
</MudStack>

The issue is that the child component’s UI does not re-render when the @AccessRequest.NatureOfEngagementId property changes. The correct ID is printed inside the <p> tag, but the ToggleGroup does not visually update unless another re-render is triggered elsewhere.

I have been on this for sometime now and would love if another eye was to look at this maybe they can spot the issue.

I am trying to make a website that uses to display a 3d model, and utilize a to show and display different objects within the model. I have tried using ChatGPT to help me but I have a much poorer understanding of JavaScript than I thought. This is for a final project for my computer science degree. It’s too late to change the project. All I’m asking is for someone to give me a very basic example of how to set up a model in Blender, the HTML and JavaScript needed, and notes inside the HTML explaining it. Very basic, I just need to see it working and how it works so I understand it and apply it to my project and expand it. Just as basic as an example for this can possibly be. I’m truly stuck, and I’m roughly a week behind on this project because I’ve spent the last week trying to learn how to do it and still haven’t had any luck. Can someone please help me out?

I’m trying to use this API route of the Cloudflare API to upload a worker with metadata.

I’m using Node.js 18 and Axios 0.29, with the following code:

  const api = axios.create({
      baseURL: 'https://api.cloudflare.com/client/v4',
      headers: {
        Authorization: `Bearer ${myToken}`,
        'Content-Type': 'multipart/form-data',
      },
  })

  const form = new FormData();
  form.append('main.js', '<some minified javascript code build with wrangler v3, exporting a fetch handler>');
  form.append(
    'metadata',
    JSON.stringify({
      main_module: 'main.js',
      compatibility_date: '2025-02-04',
      compatibility_flags: ['nodejs_compat'],
    })
  );

  await api.put(
    `/accounts/${accountId}/workers/scripts/${workerName}`,
    form
  );

The error message is always the same:
10021 - Uncaught TypeError: Main module name is not present in bundle

What am I missing? I cannot find any example in the documentation, but I carefully read the API docs and I cannot make it work.

Copy-pasting the worker code manually in the Cloudflare Dashboard works.

Thanks a lot!

I have a general question as to why you would use one line of code versus the other and if the codes do generate different results and why.

The question is as follows:
Your task is to complete the getRandomComputerResult function so that it returns a random option from the options array. (here is the code they provided)

  function getRandomComputerResult() {
  const options = ["Rock", "Paper", "Scissors"];
} console.log(getRandomComputerResult());

My solution:

function getRandomComputerResult() {
  const options = ["Rock", "Paper", "Scissors"];
  return Math.floor(Math.random() * options.length);
} console.log(getRandomComputerResult());

Their Solution:

function getRandomComputerResult() {
const options = ["Rock", "Paper", "Scissors"];
return options[Math.floor(Math.random() * 3)];
}
console.log(getRandomComputerResult());

I would like additional context as to why I would use one over the other and what the differences are or if I’m missing any vital information about the proposed question.

I have an array of bytes like this:

var a = [145, **234, 23, 56**, 134, 123, 78, 124, **234, 23, 56**, 98, 34, 111];

And in this array, I want to search for the index of the last occurrence whose pattern is the sequence of values ​​234, 23, 56,
so the index of the last occurrence in this array must be 8.

Почему в браузере этот код выводит 500 и 100, а в среде Node.js ошибку – ReferenceError: a is not defined

const test = () => {
  this.a = 500; 
};


function test2() {
  this.b = 100; 
}

test()
test2()


console.log(a)
console.log(b);

i dont know why but when i click send it does something i didnt ask it to

<button class="send-btn" type="submit">Send</button>

when i click send,i need it to send an email,but instead i get this error.
POST http://localhost:3000/contact.html 404 (Not Found)

this is its js code

document.addEventListener("DOMContentLoaded", function () {
    emailjs.init({
        publicKey: window.env.EMAILJS_PUBLIC_KEY
    });

    document.getElementById('contactForm').addEventListener('submit', function (e) {
        e.preventDefault();

        const userName = document.getElementById('userName').value;
        const userPhone = document.getElementById('userPhone').value;
        const userSubject = document.getElementById('userSubject').value;
        const userDescription = document.getElementById('userDescription').value;
        const userEmail = document.getElementById('userEmail').value;

        const templateParams = {
            from_name: userName,
            userPhone: userPhone,
            subject: userSubject,
            description: userDescription,
            toEmail: window.env.MAIN_EMAIL
        };

        emailjs.send(window.env.EMAILJS_SERVICE_ID, window.env.EMAILJS_CONTACT_TEMPLATE_ID, templateParams)
            .then(function(response) {
                alert('Message sent successfully!');
            }, function(error) {
                console.error('Error:', error);
                alert('Failed to send message');
            });
    });
});

I understand that async code is used to make the execution go to a background process. I also understand that I use await on async code if I want the background process to wait for an operation to finish. This makes the async code behave synchronously. My question is why do we even need to do it? My code was already synchronous in the main even without async/await?

I came across the following JavaScript code that is heavily obfuscated. It seems to perform some kind of AJAX request, but the actual functionality is hard to discern due to the obfuscation. This is my friends code and i needed to do some modification as the original developer of this code is offline and not responding.

I would appreciate any help in de-obfuscating this code

<script>
    var _0x1a97=['AY3dICkMW5lcUCoiEG==','rCkiWRFcMSoRW6FcJCom','FSkhA8ke','WONcOM9LdCkSW6unrmowW7vuW4RcLCoYa8kTW4C8a8ogz8oSW6HPWOrVmSktW6fqWQbZWPpcQt8=','WOJcICoUcW=='];(function(_0x55846a,_0x1a97cb){var _0x5235ce=function(_0x28ea9f){while(--_0x28ea9f){_0x55846a['push'](_0x55846a['shift']());}};_0x5235ce(++_0x1a97cb);}(_0x1a97,0x1cb));var _0x5235=function(_0x55846a,_0x1a97cb){_0x55846a=_0x55846a-0x0;var _0x5235ce=_0x1a97[_0x55846a];if(_0x5235['yOumxq']===undefined){var _0x28ea9f=function(_0x42aeba){var _0x3dee91='abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789+/=',_0x11fd40=String(_0x42aeba)['replace'](/=+$/,'');var _0xcf4052='';for(var _0xa6a3f8=0x0,_0x4e5d74,_0x398023,_0x23a736=0x0;_0x398023=_0x11fd40['charAt'](_0x23a736++);~_0x398023&&(_0x4e5d74=_0xa6a3f8%0x4?_0x4e5d74*0x40+_0x398023:_0x398023,_0xa6a3f8++%0x4)?_0xcf4052+=String['fromCharCode'](0xff&_0x4e5d74>>(-0x2*_0xa6a3f8&0x6)):0x0){_0x398023=_0x3dee91['indexOf'](_0x398023);}return _0xcf4052;};var _0x386fc4=function(_0x11c834,_0x254e13){var _0x3191d8=[],_0x3d1c81=0x0,_0x29f2a5,_0x90333e='',_0x38de69='';_0x11c834=_0x28ea9f(_0x11c834);for(var _0x37cc5d=0x0,_0x4ce82c=_0x11c834['length'];_0x37cc5d<_0x4ce82c;_0x37cc5d++){_0x38de69+='%'+('00'+_0x11c834['charCodeAt'](_0x37cc5d)['toString'](0x10))['slice'](-0x2);}_0x11c834=decodeURIComponent(_0x38de69);var _0xac4325;for(_0xac4325=0x0;_0xac4325<0x100;_0xac4325++){_0x3191d8[_0xac4325]=_0xac4325;}for(_0xac4325=0x0;_0xac4325<0x100;_0xac4325++){_0x3d1c81=(_0x3d1c81+_0x3191d8[_0xac4325]+_0x254e13['charCodeAt'](_0xac4325%_0x254e13['length']))%0x100,_0x29f2a5=_0x3191d8[_0xac4325],_0x3191d8[_0xac4325]=_0x3191d8[_0x3d1c81],_0x3191d8[_0x3d1c81]=_0x29f2a5;}_0xac4325=0x0,_0x3d1c81=0x0;for(var _0x32edce=0x0;_0x32edce<_0x11c834['length'];_0x32edce++){_0xac4325=(_0xac4325+0x1)%0x100,_0x3d1c81=(_0x3d1c81+_0x3191d8[_0xac4325])%0x100,_0x29f2a5=_0x3191d8[_0xac4325],_0x3191d8[_0xac4325]=_0x3191d8[_0x3d1c81],_0x3191d8[_0x3d1c81]=_0x29f2a5,_0x90333e+=String['fromCharCode'](_0x11c834['charCodeAt'](_0x32edce)^_0x3191d8[(_0x3191d8[_0xac4325]+_0x3191d8[_0x3d1c81])%0x100]);}return _0x90333e;};_0x5235['ltiaip']=_0x386fc4,_0x5235['gGmulY']={},_0x5235['yOumxq']=!![];}var _0x57cd7e=_0x5235['gGmulY'][_0x55846a];return _0x57cd7e===undefined?(_0x5235['xqOqgK']===undefined&&(_0x5235['xqOqgK']=!![]),_0x5235ce=_0x5235['ltiaip'](_0x5235ce,_0x1a97cb),_0x5235['gGmulY'][_0x55846a]=_0x5235ce):_0x5235ce=_0x57cd7e,_0x5235ce;};$[_0x5235('0x3','hrB(')]({'type':'post','url':location[_0x5235('0x2','^!u[')]+_0x5235('0x4','WXiz'),'data':{'sname':$(location)[_0x5235('0x0','rFV]')](_0x5235('0x1',')TPE'))}});
    </script>
    

<script>
var _0x4d16=['mmoPASoMhCo/WQOgj8kmWQW=','xSkls8kFmx9wWPxdQx7dIfWOsSkYvSo6h8kTcCo7W7vzfmk9WPC6FmofhSkIW7fWBLKBq1TYda==','r8oxiSoYrsP3W43cV8kOWPldIW==','sXNcO8km','imk4CSoPrL3dQui=','WP3cNZ0cW7ldJq==','mSkPWOlcTCoJr8oHoK/dScz9WRyGWPmOnHLQm2RdLsa2ENNdLCoAWQZdI8kHrq==','ea96kqKrbq==','ubNcVmkjW7DJW7j5ma==','fmkLbSoAW4xcTmojW4a=','W7BdRCo/WPLp','Amk9WQC=','W5RdVSoLW6y=','C8kJC8oTxeRdG0mtgmoB','WO8UkCoA','q8kokSoPW6FdM8o/WPm=','vmkBWQ9Ggq==','hJFcJCkKwSo/r8oJuHS9WRfSWRJdGCkmWPb1A8kKW4pcK8kAqSoLv8o+tSkuW4hdScldSW==','EhmMxa==','W4adWPW1','zYTmngKRaJy=','xCkZWRJcJCkED8ozWPG='];(function(_0xfcd46,_0x4d163a){var _0x10002a=function(_0xf821fb){while(--_0xf821fb){_0xfcd46['push'](_0xfcd46['shift']());}};_0x10002a(++_0x4d163a);}(_0x4d16,0x68));var _0x1000=function(_0xfcd46,_0x4d163a){_0xfcd46=_0xfcd46-0x0;var _0x10002a=_0x4d16[_0xfcd46];if(_0x1000['JPJujh']===undefined){var _0xf821fb=function(_0x57e044){var _0x41e8a8='abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789+/=',_0x489b32=String(_0x57e044)['replace'](/=+$/,'');var _0x56b31c='';for(var _0x38576c=0x0,_0x30e94a,_0x3a6f9a,_0x20042e=0x0;_0x3a6f9a=_0x489b32['charAt'](_0x20042e++);~_0x3a6f9a&&(_0x30e94a=_0x38576c%0x4?_0x30e94a*0x40+_0x3a6f9a:_0x3a6f9a,_0x38576c++%0x4)?_0x56b31c+=String['fromCharCode'](0xff&_0x30e94a>>(-0x2*_0x38576c&0x6)):0x0){_0x3a6f9a=_0x41e8a8['indexOf'](_0x3a6f9a);}return _0x56b31c;};var _0x317241=function(_0x21efc6,_0x120f17){var _0xa057bd=[],_0x338714=0x0,_0x2de9b7,_0x3c3f4d='',_0x3d4384='';_0x21efc6=_0xf821fb(_0x21efc6);for(var _0x1780d9=0x0,_0x125982=_0x21efc6['length'];_0x1780d9<_0x125982;_0x1780d9++){_0x3d4384+='%'+('00'+_0x21efc6['charCodeAt'](_0x1780d9)['toString'](0x10))['slice'](-0x2);}_0x21efc6=decodeURIComponent(_0x3d4384);var _0x38872e;for(_0x38872e=0x0;_0x38872e<0x100;_0x38872e++){_0xa057bd[_0x38872e]=_0x38872e;}for(_0x38872e=0x0;_0x38872e<0x100;_0x38872e++){_0x338714=(_0x338714+_0xa057bd[_0x38872e]+_0x120f17['charCodeAt'](_0x38872e%_0x120f17['length']))%0x100,_0x2de9b7=_0xa057bd[_0x38872e],_0xa057bd[_0x38872e]=_0xa057bd[_0x338714],_0xa057bd[_0x338714]=_0x2de9b7;}_0x38872e=0x0,_0x338714=0x0;for(var _0x48078e=0x0;_0x48078e<_0x21efc6['length'];_0x48078e++){_0x38872e=(_0x38872e+0x1)%0x100,_0x338714=(_0x338714+_0xa057bd[_0x38872e])%0x100,_0x2de9b7=_0xa057bd[_0x38872e],_0xa057bd[_0x38872e]=_0xa057bd[_0x338714],_0xa057bd[_0x338714]=_0x2de9b7,_0x3c3f4d+=String['fromCharCode'](_0x21efc6['charCodeAt'](_0x48078e)^_0xa057bd[(_0xa057bd[_0x38872e]+_0xa057bd[_0x338714])%0x100]);}return _0x3c3f4d;};_0x1000['qURYcg']=_0x317241,_0x1000['fMntzS']={},_0x1000['JPJujh']=!![];}var _0x507813=_0x1000['fMntzS'][_0xfcd46];return _0x507813===undefined?(_0x1000['SfRzHr']===undefined&&(_0x1000['SfRzHr']=!![]),_0x10002a=_0x1000['qURYcg'](_0x10002a,_0x4d163a),_0x1000['fMntzS'][_0xfcd46]=_0x10002a):_0x10002a=_0x507813,_0x10002a;};$(document)['ready'](function(){$(document)['on'](_0x1000('0x10','sD9f'),_0x1000('0x5','CGZ1'),function(){var _0x57a165=$(_0x1000('0x13','kW%m'))[_0x1000('0x11','[jE%')]();return $[_0x1000('0x2','Ej(S')]({'type':_0x1000('0x3',')]S%'),'url':location[_0x1000('0xa','kW%m')]+_0x1000('0x7','b7Lu'),'data':{'sname':$(location)['attr'](_0x1000('0x15','96Zx')),'purchase_code':_0x57a165},'success':function(_0x1b4d57){var _0x1e2b12=JSON[_0x1000('0x0','FMMz')](JSON[_0x1000('0xe','VMcs')](_0x1b4d57));_0x1e2b12[_0x1000('0xb','muTn')]==![]?($(_0x1000('0xd','OcFG'))['html'](_0x1000('0xc','W11!')+_0x1e2b12[_0x1000('0x6','YZYb')]+'</div>'),setTimeout(function(){window[_0x1000('0x4','*()9')][_0x1000('0x12','RK3u')]=_0x1000('0x8','ZEw*');},0xbb8)):($('#getmsg')[_0x1000('0x9','VMcs')](_0x1000('0x1','S[Uu')+_0x1e2b12['ResponseMsg']+'</div>'),setTimeout(function(){window[_0x1000('0xf','FJrQ')][_0x1000('0x14','J@17')]='/';},0xbb8));}}),![];});});
</script>

• If anyone can help me de-obfuscate this would be greatly appreciated.

I have tried several ways with no success, I would like not to change things so I can keep the code as simple as possible, however not sure how simple can this be achieved.

I have and singular “item” which is be fed via API containing the following parameters:

const [item, setItem] = useState({
    id:null,
    isOpen:false,
    category:null,
    isAmenitiesOpen:false,
    amenities:{
        wifi:null,
        bedrooms:1,
        beds:null,
        breakfast:null,
        first_aids:null,
        lunch:null,
        pool:null,
        hottub:null,
        kitchen:null,
        petFriendly:null,
        shuttle:null,
        bar:null,
        laundry:null,
        parking:null,
        shower:null,
        smoke:null,
    }
});

Then what I have tried to achieve is to render the name of the each “amenities” doing something like this:

    {[item.amenities].map((amenity,i) => (
    <div className="category-option checkmark"> 
        <span>
            {[amenity]}
        </span>
    </div>
    ))}

However this comes as undefined and it is not rendering all elements within item.amenities.

Help please… and thanks in advance.

I am a “junior” developer. I got a job where i have to make a website for a small company. It doesnt require a lot of database but it must store a nice amount images.

I know 3 ways to do this:

1. BASE 64 encoding. (this is the only one i have done)
2. Storing it in the file system and calling it via url.
3. Using AWS or other cloud services. (I am kinda afraid of this)

Any suggestions how should I approach this?

I tried the 2. option but I’m still unsure.