DEV Community: Ruslan Sydorovych

Issue with BBCode tags inside the spoiler

Ruslan Sydorovych — Tue, 02 Apr 2024 11:48:54 +0000

I have BBCode parsing issue inside spoiler tag. So, for example, when I add [hr] or any other BBCode tag, it breaks the spoiler:

BBCode:

[spoiler=Title]#ff7f50 hex color red value is 255, green value is 127 and the blue value of its RGB is 80. 

[hr]

Cylindrical-coordinate representations (also known as HSL) of color #ff7f50 hue: 0.04 , saturation: 1.00 and the lightness value of ff7f50 is 0.66.[/spoiler]

Screenshot:

As you can see on the image, the text after [hr] tag displays outside the spoiler.

Code:

InfoSpoiler.tsx:

`import React, {useState} from "react";
import CustomTooltip from "./CustomTooltip";

const InfoSpoiler = ({isDefaultSpoilerTitle, spoilerContentVisibility, spoilerTitle, spoilerContent}) => {
    const [isSpoilerVisible, setSpoilerVisible] = useState(spoilerContentVisibility);

    const handleSpoilerState = (event) => {
        setSpoilerVisible(!isSpoilerVisible);
    };

    return (
        <div className="spoiler">
            <CustomTooltip msg="Click to open/close">
                <p className={`${isDefaultSpoilerTitle ? "spoiler-title" : "spoiler-title-centered"}`} onClick={handleSpoilerState}><i className={`notification-icon fa-solid ${isSpoilerVisible ? "fa-minus" : "fa-plus"}`}></i>{spoilerTitle}</p>
            </CustomTooltip>
            {isSpoilerVisible && (
                typeof spoilerContent === "string" ? (
                    <div className="spoiler-content" dangerouslySetInnerHTML={{__html: spoilerContent}} />
                ) : (
                    <div className="spoiler-content">{spoilerContent}</div>
                )
            )} 
        </div>
    );
};

export default InfoSpoiler;`

CustomTooltip.tsx:

`import React from "react";
import "react-tippy/dist/tippy.css";
import {Tooltip} from "react-tippy";

export type Position =
  | "top"
  | "top-start"
  | "top-end"
  | "bottom"
  | "bottom-start"
  | "bottom-end"
  | "left"
  | "left-start"
  | "left-end"
  | "right"
  | "right-start"
  | "right-end";
export type Size = "small" | "regular" | "big";
export type Theme = "dark" | "light" | "transparent";

interface IToolTip {
    children: React.ReactNode;
    msg: string;
    pos?: Position, 
    tooltipSize?: Size, 
    tooltipTheme?: Theme
}

const CustomTooltip = ({children, msg, pos = "top", tooltipSize = "big", tooltipTheme = "light"} : IToolTip) => {
    return (
        <Tooltip title={msg} position={pos} size={tooltipSize} theme={tooltipTheme} followCursor={true}>{children}</Tooltip>
    );
};

export default CustomTooltip;`

utilsGeneral.ts:

`const validateHtml = (data) => {
  return data
    .replace(/&/g, "&amp;")
    .replace(/</g, "&lt;")
    .replace(/>/g, "&gt;")
    .replace(/"/g, "&quot;")
    .replace(/'/g, "&#039;");
};`

BBCodeComponent.tsx:

`import React, {useEffect} from "react";
import ReactDOM from "react-dom";
import CustomTooltip from "./CustomTooltip";
import {validateHtml} from "../../../utils/utilsGeneral";
import InfoSpoiler from "./InfoSpoiler";

const BBCodeComponent = ({content}) => {
     useEffect(() => {
        const handleTooltip = () => {
            const tooltipWrappers = document.querySelectorAll(".tooltip-wrapper");
            tooltipWrappers.forEach((wrapper) => {
                const title = wrapper.getAttribute("data-title");
                const src = wrapper.getAttribute("data-src");

                if (title && src) {
                    ReactDOM.render(<CustomTooltip msg={title}><img src={src} alt={title} /></CustomTooltip>, wrapper);
                }
            });
        };

        const handleSpoiler = () => {
            const spoilerWrappers = document.querySelectorAll(".spoiler-wrapper");
            spoilerWrappers.forEach((wrapper) => {
                const title = wrapper.getAttribute("data-title");
                const content = wrapper.getAttribute("data-content");

                if (title && content) {
                    ReactDOM.render(<InfoSpoiler isDefaultSpoilerTitle={true} spoilerContentVisibility={false} spoilerTitle={title} spoilerContent={parseBBCode(content)} />, wrapper);
                }
            });
        };

        handleTooltip();
        handleSpoiler();
    }, [content]);

    const parseBBCode = (text) => {
        return text
        .replace(/\[b\](.*?)\[\/b\]/g, "<strong>$1</strong>")
        .replace(/\[i\](.*?)\[\/i\]/g, "<em>$1</em>")
        .replace(/\[u\](.*?)\[\/u\]/g, "<u>$1</u>")
        .replace(/\[s\](.*?)\[\/s\]/g, "<s>$1</s>")
        .replace(/\[inline\](.*?)\[\/inline\]/g, "<div class=\"inline-tag\">$1</div>")
        .replace(/\[left\](.*?)\[\/left\]/g, "<div class=\"left-tag\">$1</div>")
        .replace(/\[center\](.*?)\[\/center\]/g, "<div class=\"center-tag\">$1</div>")
        .replace(/\[right\](.*?)\[\/right\]/g, "<div class=\"right-tag\">$1</div>")
        .replace(/\[img=(.*?)\](.*?)\[\/img\]/g, (match, title, src) => {
            return `<div class=\"tooltip-wrapper\" data-title=\"${title}\" data-src=\"${src}\"><img src=\"${src}\" alt=\"${title}\"></div>`;
        })
        .replace(/\[quote\](.*?)\[\/quote\]/g, "<blockquote class=\"quote-tag\">$1</blockquote>")
        .replace(/\[url=(.*?)\](.*?)\[\/url\]/g, "<a class=\"url-tag\" href=\"$1\">$2</a>")
        .replace(/\[code\]([\s\S]*?)\[\/code\]/g, (match, content) => {
            return `<pre class=\"code-tag\">${validateHtml(content)}</pre>`;
        })
        .replace(/\[spoiler=(.*?)\]([\s\S]*?)\[\/spoiler\]/g, (match, title, content) => {
            return `<div class=\"spoiler-wrapper\" data-title=\"${title}\" data-content=\"${validateHtml(content.trim())}\"></div>`;
        })
        .replace(/\[hr\]/g, "<div class=\"hr-wrapper\"><hr class=\"horizontal-line-tag\"></div>")
        .replace(/\[li\](.*?)\[\/li\]/g, "<li class=\"list-tag\">$1</li>")
        .replace(/\[color=(\#[0-9A-F]{6}|[a-z]+|[rgb(\d{1,3},\d{1,3},\d{1,3}(\s?))]+)\](.*?)\[\/color\]/g, "<span style=\"color: $1\">$2</span>")
        .replace(/\[youtube\](.*?)\[\/youtube\]/g, (match, url) => {
            const videoID = url.split("v=")[1];
            return `<div class="youtube-container"><iframe width=\"640\" height=\"510\" src=\"https://www.youtube.com/embed/${videoID}\" loading=\"lazy\" frameborder=\"0\" allow=\"accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen></iframe></div>`;
        });
    };

    return <div dangerouslySetInnerHTML={{__html: parseBBCode(content)}} />;
};

export default BBCodeComponent;`

These BBCode tags work well when outside the spoiler but fails to render inside the spoiler.

HTML output from a browser:

`<div><div class="spoiler-wrapper" data-title="Title" data-content="#ff7f50 hex color red value is 255, green value is 127 and the blue value of its RGB is 80. 

<div class=" hr-wrapper"=""><div class="spoiler"><div class="" data-tooltipped="" aria-describedby="tippy-tooltip-59" data-original-title="Click to open/close" style="display: inline;"><p class="spoiler-title"><i class="notification-icon fa-solid fa-minus"></i>Title</p></div><div class="spoiler-content">#ff7f50 hex color red value is 255, green value is 127 and the blue value of its RGB is 80. 

</div></div></div>

Cylindrical-coordinate representations (also known as HSL) of color #ff7f50 hue: 0.04 , saturation: 1.00 and the lightness value of ff7f50 is 0.66."&gt;</div>`

Any ideas how to fix this issue? Thanks.

Autosuggest with Rest API issue on React

Ruslan Sydorovych — Sat, 22 Jul 2023 09:18:45 +0000

I use Autosuggest component (https://github.com/moroshko/react-autosuggest) in my React website. So, on the onChange event, I call serviceOsago to get the city/region/country data. Full data are too heavy to load at once, it takes about 10 seconds, so I get it partially by using onChange event. But the problem is when I type a city name for example: "Стрий", it does not add it to the Autosuggest and does not display it.

  const onChange = (event, {newValue, method}) => {
    setValue(newValue);
    serviceOsago.getCityCode(newValue).then((value:any) => {
      setCities(value);
    });
  };

When debugging it in the browser (Network -> Fetch/XHR), I found out it fails to add "Стрий" to Autosuggest due to request delay. For example, when I typed "Стрий", it still loads the "Стри" old call.

Code:

import React, { useState } from 'react';
import Autosuggest from 'react-autosuggest';
import {useDispatch, useSelector} from 'react-redux';
import {
  getErrorCity,
  getLoadingCity,
  getRegisterCity,
  setData,
  setError
} from '../../../redux-data/city/cityReducer';
import {getInstanceError} from '../../../utils/getInstanceError';
import theme from './AutoComplete.module.css';
import SquareLoader from 'react-spinners/SquareLoader';
import {config} from '../../../assets/config';
import serviceOsago from '../../../service/serviceOsago';

export const AutoComplete = (props) => {
  const [touch, setTouch] = useState(false);
  const dispatch = useDispatch();
  const regCity = useSelector(getRegisterCity);
  const loading = useSelector(getLoadingCity);
  const [suggestions, setSuggestions] = useState([] as any[]);
  const [value, setValue] = useState(regCity);
  const [cities, setCities] = useState([]);

  const getSuggestions = (value, cities) => {
    let res = []; 
    const inputValue = value.trim().toLowerCase();
    const inputLength = inputValue.length;

    if (inputValue && inputLength > 0) {
        res = cities.filter(city => {
          return city.name.trim().toLowerCase().startsWith(inputValue);
        });
    }

    return res;
  };

  const renderSuggestion = suggestion => (
    <div>
      {suggestion.nameFull}
    </div>
  );

  const getSuggestionValue = suggestion => suggestion.nameFull;
  const error = useSelector(getErrorCity);
  const errors = {
    regCity: error
  };
  const {
    getClassError,
    getMessageError
  } = getInstanceError(errors);
  const mes = getMessageError('regCity');

  const onSuggestionsFetchRequested = ({ value }) => {
    setSuggestions(getSuggestions(value, cities));
  };

  const onChange = (event, {newValue, method}) => {
    setValue(newValue);
    console.log(newValue);
    serviceOsago.getCityCode(newValue).then((value:any) => {
      setCities(value);
    });
  };

  const onBlur = () => {
    setTouch(true);
    if (value === '') {
        dispatch(setError({
          message: 'Це поле обов\'язкове'
        }));
    }
  };

  const inputProps = {
    placeholder: 'Місто реєстрації автомобіля',
    value,
    onChange,
    onBlur,
    disabled: loading,
    id: props.id
  };

  const renderSuggestionInput = (inputProps) => (
    props.isAutoFocus ? <input {...inputProps} autoFocus /> : <input {...inputProps} />
  );

  const onSuggestionHighlighted = ({ suggestion }) => {
    //console.log(suggestion);
  };

  return (
    <div className={getClassError('regCity', touch)}>
      <Autosuggest 
        suggestions={suggestions}
        onSuggestionsFetchRequested={onSuggestionsFetchRequested}
        getSuggestionValue={getSuggestionValue}
        renderSuggestion={renderSuggestion}
        inputProps={inputProps}
        onSuggestionSelected={(event, data) => {
          dispatch(setData(data.suggestion));
        }}
        theme={theme}
        renderInputComponent={renderSuggestionInput}
        highlightFirstSuggestion={true}
        alwaysRenderSuggestions={true}
        onSuggestionHighlighted={onSuggestionHighlighted}
      />
      {mes && <p>{mes}</p>}
      <SquareLoader loading={loading} size={20} color={config.color} css={config.css}/>
    </div>
  );
};

I think, there are two options how to fix this issue.

Load full data when website is loaded, save somewhere this data (for example: localStorage) and add it to Autosuggest, so it will be available when user is typing. But I think localStorage will fail to save 12 - 15 MB of data. There must be another way to store huge data in React/TypeScript?
Change/improve the onChange event, so it will only trigger API request when a user finished typing and get the full city word instead of calling request on every character. Is it possible to override the onChange event?

What is the proper way to add data from REST API to Autosuggest when a user typing data in React/TypeScript? Thank you.

Issue with starting React project

Ruslan Sydorovych — Tue, 06 Jun 2023 15:52:43 +0000

I want to start some react project. The issue is when I run the following command: yarn add react-app-rewired -D to install all the required components.

Output:

Microsoft Windows [Version 10.0.19045.2965]
(c) Microsoft Corporation. All rights reserved.

C:\WINDOWS\system32>cd C:\wamp64\www\insurance_site-master

C:\wamp64\www\insurance_site-master>yarn add react-app-rewired -D
yarn add v1.22.19
info No lockfile found.
[1/4] Resolving packages...
warning react-scripts > workbox-webpack-plugin > workbox-build > @hapi/joi > @hapi/address@2.1.4: Moved to 'npm install @sideway/address'
warning react-scripts > workbox-webpack-plugin > workbox-build > @hapi/joi > @hapi/hoek@8.5.1: This version has been deprecated and is no longer supported or maintained
warning react-scripts > workbox-webpack-plugin > workbox-build > @hapi/joi > @hapi/topo@3.1.6: This version has been deprecated and is no longer supported or maintained
warning react-scripts > workbox-webpack-plugin > workbox-build > @hapi/joi > @hapi/topo > @hapi/hoek@8.5.1: This version has been deprecated and is no longer supported or maintained
warning react-scripts > workbox-webpack-plugin > workbox-build > strip-comments > babel-plugin-transform-object-rest-spread > babel-runtime > core-js@2.6.12: core-js@<3.23.3 is no longer maintained and not recommended for usage due to the number of issues. Because of the V8 engine whims, feature detection in old core-js versions could cause a slowdown up to 100x even if nothing is polyfilled. Some versions have web compatibility issues. Please, upgrade your dependencies to the actual version of core-js.
warning react-scripts > jest > jest-cli > jest-config > jest-environment-jsdom > jsdom > left-pad@1.3.0: use String.prototype.padStart()
warning react-scripts-ts > html-webpack-plugin@2.29.0: out of support
warning react-scripts-ts > fsevents@1.1.2: The v1 package contains DANGEROUS / INSECURE binaries. Upgrade to safe fsevents v2
warning react-scripts-ts > autoprefixer > browserslist@2.11.3: Browserslist 2 could fail on reading Browserslist >3.0 config used in other tools.
warning react-scripts-ts > fork-ts-checker-webpack-plugin > chokidar@1.7.0: Chokidar 2 will break on node v14+. Upgrade to chokidar 3 with 15x less dependencies.
warning react-scripts-ts > webpack > acorn-dynamic-import@2.0.2: This is probably built in to whatever tool you're using. If you still need it... idk
warning react-scripts-ts > webpack-dev-server > chokidar@1.7.0: Chokidar 2 will break on node v14+. Upgrade to chokidar 3 with 15x less dependencies.
warning react-scripts-ts > fork-ts-checker-webpack-plugin > chokidar > fsevents@1.2.13: The v1 package contains DANGEROUS / INSECURE binaries. Upgrade to safe fsevents v2
warning react-scripts-ts > webpack-dev-server > sockjs > uuid@2.0.3: Please upgrade  to version 7 or higher.  Older versions may use Math.random() in certain circumstances, which is known to be problematic.  See https://v8.dev/blog/math-random for details.
warning react-scripts-ts > css-loader > cssnano > autoprefixer > browserslist@1.7.7: Browserslist 2 could fail on reading Browserslist >3.0 config used in other tools.
warning react-scripts-ts > css-loader > cssnano > postcss-merge-rules > browserslist@1.7.7: Browserslist 2 could fail on reading Browserslist >3.0 config used in other tools.
warning react-scripts-ts > css-loader > cssnano > postcss-svgo > svgo@0.7.2: This SVGO version is no longer supported. Upgrade to v2.x.x.
warning react-scripts-ts > jest > jest-cli > jest-haste-map > sane@1.6.0: some dependency vulnerabilities fixed, support for node < 10 dropped, and newer ECMAScript syntax/features added
warning react-scripts-ts > css-loader > cssnano > postcss-merge-rules > caniuse-api > browserslist@1.7.7: Browserslist 2 could fail on reading Browserslist >3.0 config used in other tools.
warning react-scripts-ts > css-loader > cssnano > postcss-merge-rules > postcss-selector-parser > flatten@1.0.3: flatten is deprecated in favor of utility frameworks such as lodash.
warning react-scripts-ts > jest > jest-cli > jest-environment-jsdom > jsdom > request@2.88.2: request has been deprecated, see https://github.com/request/request/issues/3142
warning react-scripts-ts > extract-text-webpack-plugin@3.0.2: Deprecated. Please use https://github.com/webpack-contrib/mini-css-extract-plugin
warning react-scripts-ts > fsevents > node-pre-gyp@0.6.39: Please upgrade to @mapbox/node-pre-gyp: the non-scoped node-pre-gyp package is deprecated and only the @mapbox scoped package will recieve updates in the future
warning react-scripts-ts > fsevents > node-pre-gyp > request@2.81.0: request has been deprecated, see https://github.com/request/request/issues/3142
warning react-scripts-ts > fsevents > node-pre-gyp > tar@2.2.2: This version of tar is no longer supported, and will not receive security updates. Please upgrade asap.
warning react-scripts-ts > fsevents > node-pre-gyp > request > har-validator@4.2.1: this library is no longer supported
warning react-scripts-ts > fsevents > node-pre-gyp > request > uuid@3.4.0: Please upgrade  to version 7 or higher.  Older versions may use Math.random() in certain circumstances, which is known to be problematic.  See https://v8.dev/blog/math-random for details.
warning react-scripts-ts > fsevents > node-pre-gyp > tar-pack > tar@2.2.2: This version of tar is no longer supported, and will not receive security updates. Please upgrade asap.
warning react-scripts-ts > fsevents > node-pre-gyp > hawk@3.1.3: This module moved to @hapi/hawk. Please make sure to switch over as this distribution is no longer supported and may contain bugs and critical security issues.
warning react-scripts-ts > fsevents > node-pre-gyp > request > hawk@3.1.3: This module moved to @hapi/hawk. Please make sure to switch over as this distribution is no longer supported and may contain bugs and critical security issues.
warning react-scripts-ts > jest > jest-cli > jest-runtime > babel-core > babel-register > core-js@2.6.12: core-js@<3.23.3 is no longer maintained and not recommended for usage due to the number of issues. Because of the V8 engine whims, feature detection in old core-js versions could cause a slowdown up to 100x even if nothing is polyfilled. Some versions have web compatibility issues. Please, upgrade your dependencies to the actual version of core-js.
warning react-scripts-ts > fsevents > node-pre-gyp > hawk > cryptiles@2.0.5: This version has been deprecated in accordance with the hapi support policy (hapi.im/support). Please upgrade to the latest version to get the best features, bug fixes, and security patches. If you are unable to upgrade at this time, paid support is available for older versions (hapi.im/commercial).
warning react-scripts-ts > fsevents > node-pre-gyp > hawk > boom@2.10.1: This version has been deprecated in accordance with the hapi support policy (hapi.im/support). Please upgrade to the latest version to get the best features, bug fixes, and security patches. If you are unable to upgrade at this time, paid support is available for older versions (hapi.im/commercial).
warning react-scripts-ts > fsevents > node-pre-gyp > hawk > cryptiles > boom@2.10.1: This version has been deprecated in accordance with the hapi support policy (hapi.im/support). Please upgrade to the latest version to get the best features, bug fixes, and security patches. If you are unable to upgrade at this time, paid support is available for older versions (hapi.im/commercial).
warning react-scripts-ts > fsevents > node-pre-gyp > hawk > hoek@2.16.3: This version has been deprecated in accordance with the hapi support policy (hapi.im/support). Please upgrade to the latest version to get the best features, bug fixes, and security patches. If you are unable to upgrade at this time, paid support is available for older versions (hapi.im/commercial).
warning react-scripts-ts > fsevents > node-pre-gyp > hawk > boom > hoek@2.16.3: This version has been deprecated in accordance with the hapi support policy (hapi.im/support). Please upgrade to the latest version to get the best features, bug fixes, and security patches. If you are unable to upgrade at this time, paid support is available for older versions (hapi.im/commercial).
warning react-scripts-ts > fsevents > node-pre-gyp > hawk > sntp@1.0.9: This module moved to @hapi/sntp. Please make sure to switch over as this distribution is no longer supported and may contain bugs and critical security issues.
warning react-scripts-ts > fsevents > node-pre-gyp > hawk > sntp > hoek@2.16.3: This version has been deprecated in accordance with the hapi support policy (hapi.im/support). Please upgrade to the latest version to get the best features, bug fixes, and security patches. If you are unable to upgrade at this time, paid support is available for older versions (hapi.im/commercial).
warning react-scripts-ts > sw-precache-webpack-plugin > sw-precache@5.2.1: Please migrate to Workbox: https://developers.google.com/web/tools/workbox/guides/migrations/migrate-from-sw
warning react-scripts-ts > sw-precache-webpack-plugin > sw-precache > sw-toolbox@3.6.0: Please migrate to Workbox: https://developers.google.com/web/tools/workbox/guides/migrations/migrate-from-sw
warning react-select-2 > less > request@2.81.0: request has been deprecated, see https://github.com/request/request/issues/3142
warning react-select-2 > webpack > acorn-dynamic-import@2.0.2: This is probably built in to whatever tool you're using. If you still need it... idk
warning react-select-2 > webpack-dev-server > chokidar@2.1.8: Chokidar 2 does not receive security updates since 2019. Upgrade to chokidar 3 with 15x fewer dependencies
warning react-select-2 > jest-cli > jest-haste-map > sane@1.5.0: some dependency vulnerabilities fixed, support for node < 10 dropped, and newer ECMAScript syntax/features added
warning react-select-2 > babel-preset-es2015@6.24.1: 🙌  Thanks for using Babel: we recommend using babel-preset-env now: please read https://babeljs.io/env to update!
warning react-select-2 > babel-cli > chokidar@1.7.0: Chokidar 2 will break on node v14+. Upgrade to chokidar 3 with 15x less dependencies.
warning react-select-2 > postcss-cssnext@2.11.0: 'postcss-cssnext' has been deprecated in favor of 'postcss-preset-env'. Read more at https://moox.io/blog/deprecating-cssnext/
warning react-select-2 > postcss-cssnext > postcss-pseudo-class-any-link > postcss-selector-parser > flatten@1.0.3: flatten is deprecated in favor of utility frameworks such as lodash.
warning react-select-2 > image-webpack-loader > imagemin-svgo > svgo@0.7.2: This SVGO version is no longer supported. Upgrade to v2.x.x.
warning react-select-2 > babel-cli > babel-polyfill > core-js@2.6.12: core-js@<3.23.3 is no longer maintained and not recommended for usage due to the number of issues. Because of the V8 engine whims, feature detection in old core-js versions could cause a slowdown up to 100x even if nothing is polyfilled. Some versions have web compatibility issues. Please, upgrade your dependencies to the actual version of core-js.
warning react-select-2 > postcss-cssnext > pixrem > browserslist@1.7.7: Browserslist 2 could fail on reading Browserslist >3.0 config used in other tools.
warning react-select-2 > postcss-assets > assets > calipers@2.1.0: 2.1.0 contains breaking changes, published instead as 3.0.0
warning react-select-2 > postcss-assets > assets > calipers-jpeg@2.1.0: 2.1.0 contains breaking changes, published instead as 3.0.0
warning react-select-2 > postcss-assets > assets > calipers-png@2.1.0: 2.1.0 contains breaking changes, published instead as 3.0.0
warning react-select-2 > image-webpack-loader > imagemin-gifsicle > exec-buffer > tempfile > uuid@3.4.0: Please upgrade  to version 7 or higher.  Older versions may use Math.random() in certain circumstances, which is known to be problematic.  See https://v8.dev/blog/math-random for details.
warning react-select-2 > image-webpack-loader > imagemin-gifsicle > gifsicle > bin-build > tempfile > uuid@2.0.3: Please upgrade  to version 7 or higher.  Older versions may use Math.random() in certain circumstances, which is known to be problematic.  See https://v8.dev/blog/math-random for details.
warning react-select-2 > image-webpack-loader > imagemin-gifsicle > gifsicle > bin-build > decompress > buffer-to-vinyl > uuid@2.0.3: Please upgrade  to version 7 or higher.  Older versions may use Math.random() in certain circumstances, which is known to be problematic.  See https://v8.dev/blog/math-random for details.
warning react-select-2 > image-webpack-loader > imagemin-gifsicle > gifsicle > bin-build > download > gulp-decompress > gulp-util@3.0.8: gulp-util is deprecated - replace it, following the guidelines at https://medium.com/gulpjs/gulp-util-ca3b1f9f9ac5
warning @types/react-router-dom > @types/history@5.0.0: This is a stub types definition. history provides its own type definitions, so you do not need this installed.
[2/4] Fetching packages...
[3/4] Linking dependencies...
warning " > babel-loader@8.3.0" has unmet peer dependency "@babel/core@^7.0.0".
warning " > babel-loader@8.3.0" has unmet peer dependency "webpack@>=2".
warning " > bootstrap@4.6.2" has unmet peer dependency "popper.js@^1.16.1".
warning " > dotenv-webpack@1.8.0" has unmet peer dependency "webpack@^1 || ^2 || ^3 || ^4".
warning " > file-loader@3.0.1" has unmet peer dependency "webpack@^4.0.0".
warning " > less-loader@5.0.0" has unmet peer dependency "webpack@^2.0.0 || ^3.0.0 || ^4.0.0".
warning " > react-app-rewire-less@2.1.3" has incorrect peer dependency "react-app-rewired@^1.5.2".
warning "react-app-rewire-less > less-loader@4.1.0" has unmet peer dependency "webpack@^2.0.0 || ^3.0.0 || ^4.0.0".
warning " > react-ga@2.7.0" has unmet peer dependency "prop-types@^15.6.0".
warning " > react-router-config@4.4.0-beta.8" has unmet peer dependency "react-router@4.4.0-beta.1".
warning " > react-scripts-ts@2.13.0" has incorrect peer dependency "typescript@2.x".
warning "react-scripts-ts > fork-ts-checker-webpack-plugin@0.2.10" has incorrect peer dependency "typescript@^2.1.0".
warning "react-scripts-ts > ts-jest@20.0.14" has incorrect peer dependency "typescript@2.x".
warning "react-select-2 > manifest-revision-webpack-plugin@0.4.1" has unmet peer dependency "sync-exec@^0.6.2".
warning "react-select-2 > postcss-cssnext@2.11.0" has unmet peer dependency "caniuse-db@^1.0.30000652".
warning "react-select2 > react-select2-wrapper@1.0.3" has incorrect peer dependency "react@^0.14.0 || ^15.0.0-rc || ^15.0.0".
warning "react-select2 > react-select2-wrapper@1.0.3" has incorrect peer dependency "react-dom@^0.14.0 || ^15.0.0-rc || ^15.0.0".
warning " > style-loader@1.3.0" has unmet peer dependency "webpack@^4.0.0 || ^5.0.0".
warning " > webpack-cli@3.3.12" has unmet peer dependency "webpack@4.x.x".
[4/4] Building fresh packages...
[1/12] ⠂ node-sass
[11/12] ⠂ cwebp-bin
[-/12] ⠂ waiting...
[-/12] ⠂ waiting...
error C:\wamp64\www\insurance_site-master\node_modules\node-sass: Command failed.
Exit code: 1
Command: node scripts/build.js
Arguments:
Directory: C:\wamp64\www\insurance_site-master\node_modules\node-sass
Output:
Building: C:\nodejs\node.exe C:\wamp64\www\insurance_site-master\node_modules\node-sass\node_modules\node-gyp\bin\node-gyp.js rebuild --verbose --libsass_ext= --libsass_cflags= --libsass_ldflags= --libsass_library=
gyp info it worked if it ends with ok
gyp verb cli [
gyp verb cli   'C:\\nodejs\\node.exe',
gyp verb cli   'C:\\wamp64\\www\\insurance_site-master\\node_modules\\node-sass\\node_modules\\node-gyp\\bin\\node-gyp.js',
gyp verb cli   'rebuild',
gyp verb cli   '--verbose',
gyp verb cli   '--libsass_ext=',
gyp verb cli   '--libsass_cflags=',
gyp verb cli   '--libsass_ldflags=',
gyp verb cli   '--libsass_library='
gyp verb cli ]
gyp info using node-gyp@3.8.0
gyp info using node@18.16.0 | win32 | x64
gyp verb command rebuild []
gyp verb command clean []
gyp verb clean removing "build" directory
gyp verb command configure []
gyp verb check python checking for Python executable "python2" in the PATH
gyp verb `which` failed Error: not found: python2
gyp verb `which` failed     at getNotFoundError (C:\wamp64\www\insurance_site-master\node_modules\which\which.js:13:12)
gyp verb `which` failed     at F (C:\wamp64\www\insurance_site-master\node_modules\which\which.js:68:19)
gyp verb `which` failed     at E (C:\wamp64\www\insurance_site-master\node_modules\which\which.js:80:29)
gyp verb `which` failed     at C:\wamp64\www\insurance_site-master\node_modules\which\which.js:89:16
gyp verb `which` failed     at C:\wamp64\www\insurance_site-master\node_modules\isexe\index.js:42:5
gyp verb `which` failed     at C:\wamp64\www\insurance_site-master\node_modules\isexe\windows.js:36:5
gyp verb `which` failed     at FSReqCallback.oncomplete (node:fs:208:21)
gyp verb `which` failed  python2 Error: not found: python2
gyp verb `which` failed     at getNotFoundError (C:\wamp64\www\insurance_site-master\node_modules\which\which.js:13:12)
gyp verb `which` failed     at F (C:\wamp64\www\insurance_site-master\node_modules\which\which.js:68:19)
gyp verb `which` failed     at E (C:\wamp64\www\insurance_site-master\node_modules\which\which.js:80:29)
gyp verb `which` failed     at C:\wamp64\www\insurance_site-master\node_modules\which\which.js:89:16
gyp verb `which` failed     at C:\wamp64\www\insurance_site-master\node_modules\isexe\index.js:42:5
gyp verb `which` failed     at C:\wamp64\www\insurance_site-master\node_modules\isexe\windows.js:36:5
gyp verb `which` failed     at FSReqCallback.oncomplete (node:fs:208:21) {
gyp verb `which` failed   code: 'ENOENT'
gyp verb `which` failed }
gyp verb check python checking for Python executable "python" in the PATH
gyp verb `which` succeeded python C:\Python27\python.EXE
gyp verb check python version `C:\Python27\python.EXE -c "import sys; print "2.7.18
gyp verb check python version .%s.%s" % sys.version_info[:3];"` returned: %j
gyp verb get node dir no --target version specified, falling back to host node version: 18.16.0
gyp verb command install [ '18.16.0' ]
gyp verb install input version string "18.16.0"
gyp verb install installing version: 18.16.0
gyp verb install --ensure was passed, so won't reinstall if already installed
gyp verb install version is already installed, need to check "installVersion"
gyp verb got "installVersion" 9
gyp verb needs "installVersion" 9
gyp verb install version is good
gyp verb get node dir target node version installed: 18.16.0
gyp verb build dir attempting to create "build" dir: C:\wamp64\www\insurance_site-master\node_modules\node-sass\build
gyp verb build dir "build" dir needed to be created? C:\wamp64\www\insurance_site-master\node_modules\node-sass\build
gyp verb find vs2017 Found installation at: C:\Program Files\Microsoft Visual Studio\2022\Enterprise
gyp verb find vs2017   - Found Microsoft.VisualStudio.Component.Windows10SDK.19041
gyp verb find vs2017   - Found Microsoft.VisualStudio.Component.VC.Tools.x86.x64
gyp verb find vs2017   - Missing Visual Studio C++ core features (Microsoft.VisualStudio.VC.MSBuild.Base)
gyp verb find vs2017   - Some required components are missing, not using this installation
gyp verb find vs2017 Found installation at: C:\Program Files (x86)\Microsoft Visual Studio\2019\Enterprise
gyp verb find vs2017   - Found Microsoft.VisualStudio.Component.Windows10SDK.19041
gyp verb find vs2017   - Found Microsoft.VisualStudio.VC.MSBuild.Base
gyp verb find vs2017   - Found Microsoft.VisualStudio.Component.VC.Tools.x86.x64
gyp verb find vs2017   - Using this installation with Windows 10 SDK
gyp verb find vs2017 using installation: C:\Program Files (x86)\Microsoft Visual Studio\2019\Enterprise
gyp verb build/config.gypi creating config file
gyp verb build/config.gypi writing out config file: C:\wamp64\www\insurance_site-master\node_modules\node-sass\build\config.gypi
(node:5784) [DEP0150] DeprecationWarning: Setting process.config is deprecated. In the future the property will be read-only.
(Use `node --trace-deprecation ...` to show where the warning was created)
gyp verb config.gypi checking for gypi file: C:\wamp64\www\insurance_site-master\node_modules\node-sass\config.gypi
gyp verb common.gypi checking for gypi file: C:\wamp64\www\insurance_site-master\node_modules\node-sass\common.gypi
gyp verb gyp gyp format was not specified; forcing "msvs"
gyp info spawn C:\Python27\python.EXE
gyp info spawn args [
gyp info spawn args   'C:\\wamp64\\www\\insurance_site-master\\node_modules\\node-sass\\node_modules\\node-gyp\\gyp\\gyp_main.py',
gyp info spawn args   'binding.gyp',
gyp info spawn args   '-f',
gyp info spawn args   'msvs',
gyp info spawn args   '-G',
gyp info spawn args   'msvs_version=2015',
gyp info spawn args   '-I',
gyp info spawn args   'C:\\wamp64\\www\\insurance_site-master\\node_modules\\node-sass\\build\\config.gypi',
gyp info spawn args   '-I',
gyp info spawn args   'C:\\wamp64\\www\\insurance_site-master\\node_modules\\node-sass\\node_modules\\node-gyp\\addon.gypi',
gyp info spawn args   '-I',
gyp info spawn args   'C:\\Users\\cobra\\.node-gyp\\18.16.0\\include\\node\\common.gypi',
gyp info spawn args   '-Dlibrary=shared_library',
gyp info spawn args   '-Dvisibility=default',
gyp info spawn args   '-Dnode_root_dir=C:\\Users\\cobra\\.node-gyp\\18.16.0',
gyp info spawn args   '-Dnode_gyp_dir=C:\\wamp64\\www\\insurance_site-master\\node_modules\\node-sass\\node_modules\\node-gyp',
gyp info spawn args   '-Dnode_lib_file=C:\\Users\\cobra\\.node-gyp\\18.16.0\\<(target_arch)\\node.lib',
gyp info spawn args   '-Dmodule_root_dir=C:\\wamp64\\www\\insurance_site-master\\node_modules\\node-sass',
gyp info spawn args   '-Dnode_engine=v8',
gyp info spawn args   '--depth=.',
gyp info spawn args   '--no-parallel',
gyp info spawn args   '--generator-output',
gyp info spawn args   'C:\\wamp64\\www\\insurance_site-master\\node_modules\\node-sass\\build',
gyp info spawn args   '-Goutput_dir=.'
gyp info spawn args ]
Traceback (most recent call last):
  File "C:\wamp64\www\insurance_site-master\node_modules\node-sass\node_modules\node-gyp\gyp\gyp_main.py", line 16, in <module>
    sys.exit(gyp.script_main())
  File "C:\wamp64\www\insurance_site-master\node_modules\node-sass\node_modules\node-gyp\gyp\pylib\gyp\__init__.py", line 545, in script_main
    return main(sys.argv[1:])
  File "C:\wamp64\www\insurance_site-master\node_modules\node-sass\node_modules\node-gyp\gyp\pylib\gyp\__init__.py", line 538, in main
    return gyp_main(args)
  File "C:\wamp64\www\insurance_site-master\node_modules\node-sass\node_modules\node-gyp\gyp\pylib\gyp\__init__.py", line 514, in gyp_main
    options.duplicate_basename_check)
  File "C:\wamp64\www\insurance_site-master\node_modules\node-sass\node_modules\node-gyp\gyp\pylib\gyp\__init__.py", line 130, in Load
    params['parallel'], params['root_targets'])
  File "C:\wamp64\www\insurance_site-master\node_modules\node-sass\node_modules\node-gyp\gyp\pylib\gyp\input.py", line 2783, in Load
    variables, includes, depth, check, True)
  File "C:\wamp64\www\insurance_site-master\node_modules\node-sass\node_modules\node-gyp\gyp\pylib\gyp\input.py", line 399, in LoadTargetBuildFile
    includes, True, check)
  File "C:\wamp64\www\insurance_site-master\node_modules\node-sass\node_modules\node-gyp\gyp\pylib\gyp\input.py", line 271, in LoadOneBuildFile
    aux_data, includes, check)
  File "C:\wamp64\www\insurance_site-master\node_modules\node-sass\node_modules\node-gyp\gyp\pylib\gyp\input.py", line 308, in LoadBuildFileIncludesIntoDict
    LoadOneBuildFile(include, data, aux_data, None, False, check),
  File "C:\wamp64\www\insurance_site-master\node_modules\node-sass\node_modules\node-gyp\gyp\pylib\gyp\input.py", line 251, in LoadOneBuildFile
    None)
  File "C:\Users\cobra\.node-gyp\18.16.0\include\node\common.gypi", line 1
    e_data_file_flag%': 1
                        ^
SyntaxError: EOL while scanning string literal
gyp ERR! configure error
gyp ERR! stack Error: `gyp` failed with exit code: 1
gyp ERR! stack     at ChildProcess.onCpExit (C:\wamp64\www\insurance_site-master\node_modules\node-sass\node_modules\node-gyp\lib\configure.js:345:16)
gyp ERR! stack     at ChildProcess.emit (node:events:513:28)
gyp ERR! stack     at ChildProcess._handle.onexit (node:internal/child_process:291:12)
gyp ERR! System Windows_NT 10.0.19045
gyp ERR! command "C:\\nodejs\\node.exe" "C:\\wamp64\\www\\insurance_site-master\\node_modules\\node-sass\\node_modules\\node-gyp\\bin\\node-gyp.js" "rebuild" "--verbose" "--libsass_ext=" "--libsass_cflags=" "--libsass_ldflags=" "--libsass_library="
gyp ERR! cwd C:\wamp64\www\insurance_site-master\node_modules\node-sass
gyp ERR! node -v v18.16.0

C:\wamp64\www\insurance_site-master>

I have Node.js version: v18.16.0 installed. Python 2.7.18 is installed on my system as well and added to the PATH. Also, I have Visual Studio 2017/2019/2022 installed.

I have fixed it by downgrading the node to: v16.20.0. But when I run npm start I get another issue:

C:\Users\cobra\Documents\Projects\ReactJS\insurance_site-master>npm start

> egersund-web-site@0.1.0 prestart
> yarn run build

yarn run v1.22.19
$ yarn run build:client && yarn run build:server
$ react-app-rewired build
Creating an optimized production build...
=============

WARNING: You are currently running a version of TypeScript which is not officially supported by typescript-estree.

You may find that it works just fine, or you may not.

SUPPORTED TYPESCRIPT VERSIONS: >=3.2.1 <3.5.0

YOUR TYPESCRIPT VERSION: 3.5.3

Please only submit bug reports when using the officially supported version.

=============
Failed to compile.

C:/Users/cobra/Documents/Projects/ReactJS/insurance_site-master/node_modules/@types/babel__traverse/index.d.ts
TypeScript error in C:/Users/cobra/Documents/Projects/ReactJS/insurance_site-master/node_modules/@types/babel__traverse/index.d.ts(321,9):
Type expected.  TS1110

    319 |     // too complex for TS. So we type it as a general visitor only if the key contains `|`
    320 |     // this is good enough for non-visitor traverse options e.g. `noScope`
  > 321 |     [k: `${string}|${string}`]: VisitNode<S, Node>;
        |         ^
    322 | };
    323 |
    324 | export type VisitNode<S, P extends Node> = VisitNodeFunction<S, P> | VisitNodeObject<S, P>;


error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

Package.json: https://mega.nz/file/4BQlxAIC#vo76cLx6vvHVhVolYGtCFOmClqhb43o9CVNufg3gbhM

I have tried Node v14, v12 but the issue still occurs. Any ideas how to resolve this issue? Thank you.