Category: javascript

WebSocket connection to ‘ws://localhost:8081/debugger-proxy?role=debugger&name=Chrome’ failed:app开发报错WebSocket connection to ‘ws://localhost:8081/debugger-proxy?role=debugger&name=Chrome’ failed:请求帮助111111111111111111111111111111111111111111111111

I have added the API named GooglePlacesAutocomplete after adding that in my file named search place i am getting error named filter

ERROR Warning: TypeError: Cannot read property ‘filter’ of undefined

This error is located at:

   6 |
   7 | export default function SearchPlace() {
>  8 |   const navigation = useNavigation();

I could see the useNavigation and the API has been already imported in my code, but still I could not find where the error persists.

I tried to initialize an empty array as well, but well it didn’t work out.

HTML CSS JAVASCRIPT ARMSTRONG NUMBER

I tried using print list but it wasn’t working in armstrong I tried many times setting up and fixing some error but it just doesn’t works I tried many times setting up and fixing some error but it just doesn’t works

I want to create a CLI dev tool that allows me to inject JavaScript code (e.g., alert("Hello injected")) into any running Next.js app, ideally by running the command nextwithdev dev. The tool should:

• Eventually, people will be able to install it via npm install -g nextwithdev.
• Not require any modifications to the target Next.js app’s codebase, including configuration files like next.config.js, webpack.config.js, or any files inside the app. No config required.
• Inject the JavaScript dynamically into the app when it is running, without requiring changes to the app itself.

Requirements:

1. The tool should inject JavaScript code into the running Next.js app, for example:

   alert("Hello injected");
   

2. The injection should happen without modifying any source code or configuration of the target Next.js app.
3. Ideally, I want to be able to run the tool with nextwithdev dev to start the target Next.js app and inject the JavaScript into it.
4. The tool should work with any Next.js app running locally in dev mode.

What I’ve considered:

I considered proxying the Next.js dev server to intercept and inject the JavaScript/HTML code into the app at runtime, but I’m not sure how to implement this. I could potentially use a proxy server to intercept the app’s requests and inject the script, but I’m unsure how to integrate this seamlessly with the Next.js dev server.

How can I create a CLI tool like this? What is the best way to proxy the Next.js dev server to inject JavaScript without modifying the app’s codebase? Is there an official way to do it without feeling like I am hacking ?

When I try to load the vector map, an error is reported in the console

    const map = new google.maps.Map(container, {
      center: MapCenter,
      minZoom: MinZoom,
      zoom: InitZoom,
      mapId:"xxxxxxxx",
    });

The specific error is as follows: * Uncaught (in promise) Error: ByteString should be constructed with non-empty values*

When I try to use the map version 3.59, it works normally; any version above 3.60 will report an error

I have a NextJS project that uses App Router. To manage the state, I use redux-toolkit.

My server component wrapper code for each page is:

const getSSRResult = async <TArg,>(
    seed: SSRHandlerSeed<TArg>,
): Promise<{ payload: unknown } | undefined> => {
    if (SSRUtil.SSR_FETCH_ENABLED && seed) {
        const { logged } = await SSRUtil.getAuthInfoFromCookie();
        const rsc = await SSRUtil.isRSC();
        if (!logged && !rsc) {
            const handler = getSSRHandlerHubItem(seed.key).handler(seed.arg);
            try {
                const payload = await handler.fetch();
                return { payload };
            } catch (e) {
                const errorData = getErrorData(e);
                LogManager.error(
                    new Date().toLocaleTimeString() +
                        ' ' +
                        'Error fetching SSR data (key=' +
                        seed.key +
                        ')',
                    errorData,
                    e,
                );
            }
        }
    }
    return undefined;
};

const SSRWrapper = async <TArg,>({
    seed,
    children,
}: {
    seed: SSRHandlerSeed<TArg>;
    children: React.ReactNode;
}) => {
    const result = await getSSRResult(seed);
    return (
        <SSRClientWrapper seed={seed} result={result}>
            {children}
        </SSRClientWrapper>
    );
};

export default SSRWrapper;

That calls the internal wrapper client component:

const useDispatch = <TArg, TResult>(params: {
    seed: SSRHandlerSeed<TArg>;
    result: { payload: TResult } | undefined;
}) => {
    const { seed, result } = params;
    const definedRef = React.useRef(false);
    const layoutContext = useLayoutContext();
    const store = useStore();
    const { path } = useMainRouter();
    const afterWait = React.useRef(false);
    let waitDispatch = false;

    if (!definedRef.current && path && layoutContext && result) {
        definedRef.current = true;

        if (path !== layoutContext.pathname) {
            layoutContext.pathname = path;
            const handler = getSSRHandlerHubItem(seed.key).handler(seed.arg);
            if (handler.selectToIgnore) {
                const state = handler.selectToIgnore(store.getState());
                waitDispatch = state?.complete ?? false;
            }
            if (!waitDispatch) {
                handler.dispatch({ store, data: result.payload });
            }
        }
    }

    React.useEffect(() => {
        if (waitDispatch && !afterWait.current && result) {
            afterWait.current = true;
            const handler = getSSRHandlerHubItem(seed.key).handler(seed.arg);
            handler.dispatch({ store, data: result.payload });
        }
    }, [waitDispatch, seed, result, store]);
};

const SSRClientWrapper = <TArg, TResult>({
    seed,
    result,
    children,
}: {
    seed: SSRHandlerSeed<TArg>;
    result: { payload: TResult } | undefined;
    children: React.ReactNode;
}) => {
    useDispatch({ seed, result });
    return <>{children}</>;
};

export default SSRClientWrapper;

For the pages that need SSR, I have definitions like:

//...

const privacyPolicy: SimpleDynamicSSRHandler< 
    void,
    { appInfo: AppInfo; result: GeneralInfo },
    GeneralInfoOuterState
> = () => ({
    fetch: async () => {
        const appInfo = await apiInternalGetAppInfo();
        const result = await apiInternalGetPrivacyPolicy();
        return { appInfo, result };
    },
    dispatch: ({ store, data: { appInfo, result } }) => {
        store.dispatch(retrieveAppInfo.fulfilled(appInfo, nanoid()));
        store.dispatch(fetchPrivacyPolicy.fulfilled(result, nanoid()));
    },
    selectToIgnore: selectPrivacyPolicyInfoState,
});

const termsOfUse: SimpleDynamicSSRHandler<
    void,
    { appInfo: AppInfo; result: GeneralInfo },
    GeneralInfoOuterState
> = () => ({
    fetch: async () => {
        const appInfo = await apiInternalGetAppInfo();
        const result = await apiInternalGetTermsOfUse();
        return { appInfo, result };
    },
    dispatch: ({ store, data: { appInfo, result } }) => {
        store.dispatch(retrieveAppInfo.fulfilled(appInfo, nanoid()));
        store.dispatch(fetchTermsOfUse.fulfilled(result, nanoid()));
    },
    selectToIgnore: selectTermsOfUseInfoState,
});

//...

The server component at the top that represents the page (page.tsx) is like:

const Page: React.FC = async () => ( 
    <SSRWrapper seed={SSRHandlerHub.termsOfUse.seed()}>
        <TermsPage />
    </SSRWrapper>
);

export default Page;

TermsPage is the client component with the actual content of the page (it uses Redux state and selectors to show the page content).

My store is inside the layout.tsx file, common to all pages, because some common code uses Redux, and defining the store in the page would be “too late”.

In the example above, when I enter the PrivacyPolicy page through the URL, everything works fine. If I navigate to TermsOfUse the first time, it logs the error:

store.ts:140 Cannot update a component (Main) while rendering a
different component (SSRClientWrapper). To locate the bad setState()
call inside SSRClientWrapper, follow the stack trace as described in
https://react.dev/link/setstate-in-render

I know this error happens because the handler.dispatch() inside my useDispatch hook runs synchronously during render.

I used the Redux docs at https://redux.js.org/usage/nextjs#loading-initial-data as a reference for using a ref to avoid multiple dispatches.

If I force wait whenever layoutContext.pathname is defined (every moment after the first load), I have no error, and the first load have SSR (so, for SEO purposes and OG links, it works fine), but when the user navigates, he will see a spinner/skeleton in the next page and it will blink showing the content (while the way it is now, with the error logs, the user would see the content right after navigating). Furthermore it would cause a fetch to the API at the client side unnecessarily (the navigation would cause a double fetch).

I tried with useLayoutEffect instead of useEffect, but there was no difference.

It’s important to note that this error occurs because the PREVIOUS page selects a state that is updated when the new page loads. In the case above, PrivacyPolicy uses a selector for the AppInfo state, and TermsOfUse updates it. If I load a page that does not depend on the AppInfo state, and navigate to TermsOfUse, no error happens. In the case above, the Main component in the client component of the PrivacyPolicy page (not included in the code above) has a selector for the AppInfo state.

Is there a way to solve this issue, keeping the old global state with the new updated state right after navigating, without errors?

For now, I use an RSC header in production to determine if the page is being loaded the first time for the user, or if it’s an internal navigation, in which case nothing should be loaded (using fetch) on the server (which is also the case for non-authenticated users). With this, except for the 1st load, I lose the benefit of server cache and showing the page with the entire content to the user, and instead he sees a spinner and after the fetch finishes he sees the content. At least this way, there’s no double fetch (because there’s no fetch on the server). This code is already present in the code blocks I posted above, but I would prefer to not have to skip the fetch at the server side when navigating and, instead, it should show the loaded page directly to the user after navigating.

I have recreated a Netflix-style hover UI project from React to React Native (targeting web). Everything works correctly except for one critical issue: when a movie card’s expanded preview is displayed, the page becomes unscrollable. The same functionality works perfectly in the original React version.React- scrolling while card is popped
React Native: can’t scroll while card is popped, have to move cursor away

React
React Native

Expected Behavior
When the expanded card preview is shown, users should still be able to scroll the page normally (like in the React version).

Actual Behavior
When the expanded card is displayed, page scrolling is completely blocked. Users must move the cursor away from the card to regain scroll functionality.

Here is my full HTML:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Foo</title>
  <script>
    function main() {
      const button = document.getElementById('button')
      button.addEventListener('click', navigate)
    }

    let count = 0

    function navigate() {
      window.history.replaceState(null, '', '#' + count)
      count++
    }

    window.addEventListener('load', main)
  </script>
</head>
<body>
  <button id="button">Click me</button>
</body>
</html>

When I open this with Firefox 143 or Chrome 140 and click the “Click me” button many times, it creates new entries in the browser history for foo.html#1, foo.html#2, etc. Is it possible to prevent the creation of new browser history entries?

I’m going to preface this by saying I’m a highschooler messing around with making websites and making things way too complicated than they should be. My coding knowledge isn’t that far advanced but please don’t try and simplify things if you can’t.

I have an ec2 instance which hosts files containing games and whatnot. For this example, I’m going to have 2 game folders:

site.com/folder1/game.html
site.com/folder2/game.html

On a separate site (google sites) I want to have 2 pages (page1 and page2) reference their respective game. My main problem here is that “site.com” is dynamic in the way that every time I restart the ec2 instance, the url changes. When that happens, I don’t want to go through every page and change the main URL when it leads to the same subfolder. To solve this, I want to have one main file (source.txt or source.html) which references “site.com” as a variable or something for every page.

Example:

<a href=”(site1)/folder1/game.html”Link</a>
<a href=”(site1)/folder2/game.html”Link</a>

Changes to:

<a href=”(site2)/folder1/game.html”Link</a>
<a href=”(site2)/folder2/game.html”Link</a>

Is this possible? However I need to do it, I’d love to know. Thanks in advance

My Replit preview pane doesn’t run the script – console empty despite there being a console.log in it
Opening in a new tab works just fine, but I dont get access to the console.

index.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Fists of Steel</title>
</head>
<body>
    <canvas id="canvas" width='512' height='512'></canvas>
    <script src="script.js"></script>
</body>
</html>

script.js:

const cvs = document.getElementById('canvas');
const ctx = cvs.getContext('2d');

class HitBoxUI {
    constructor(boundingBox) {
        this.c1 = [boundingBox[0], boundingBox[1]];
        this.c2 = [boundingBox[0], boundingBox[1]];
    }
}

ctx.fillStyle = 'rgb(255 0 0)';
ctx.fillRect(0, 0, 100, 100);
console.log('ooga booga')

if I need to add more files, please tell me
thank you in advance

Error:
Access to XMLHttpRequest at 'https://script.google.com/macros/s//exec' from origin 'null' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

App Scripts:

function doGet() {
  return HtmlService.createHtmlOutputFromFile('index')
    .setTitle('PokeQuest DB')
    .setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL);
}


function doPost(request) {
  Logger.log("doPost function triggered.");
  try {
    var requestData = JSON.parse(request.postData.contents);
  } catch (e) {
    Logger.log("Error parsing POST payload: " + e.message);
    return httpResponse(error(400, "invalid_post_payload", {
      payload: request.postData && request.postData.contents,
      type: request.postData && request.postData.type,
      message: e && e.message
    }));
  }

  // Batch or single
  if (Array.isArray(requestData)) {
    Logger.log("Handling batch request with " + requestData.length + " items.");
    var result = requestData.map(handleRequest);
    return httpResponse(result);
  }

  Logger.log("Handling single request.");
  return httpResponse(handleRequest(requestData));
}

function httpResponse(obj) {
  const out = ContentService.createTextOutput(JSON.stringify(obj))
    .setMimeType(ContentService.MimeType.JSON);
  
  // If CORS is enabled in the config, add the access control header.
if (ENABLE_CORS) {
    out.addHttpHeader('Access-Control-Allow-Origin', CORS_ALLOW_ORIGIN);
    out.addHttpHeader('Access-Control-Allow-Methods', 'POST, GET, OPTIONS');
    out.addHttpHeader('Access-Control-Allow-Headers', 'Content-Type, Accept');
  }
  return out;
}

const ENABLE_CORS = true;
const CORS_ALLOW_ORIGIN = "*"; // or your site origin

Jquery:

  _post(payload) {
    return $.ajax({
      url: this.scriptURL,
      type: "POST",
      contentType: "text/plain;charset=utf-8",
      data: JSON.stringify(payload)
    }).then(res => {
      // If Apps Script returns a JSON string, parse it; otherwise trust jQuery
      if (typeof res === "string") {
        try { return JSON.parse(res); } catch { return res; }
      }
      return res;
    });
  }

That’s basically the whole setup I have right now, and I can’t figure out why the browser keeps throwing this CORS error whenever I try to talk to the Google Apps Script endpoint. The strange thing is that the requests actually succeed on the server side I can see the data being written to the Google Sheet just fine but in the browser console it still looks like the response is being blocked because of missing CORS headers. I’ve already added Access-Control-Allow-Origin: * and the other usual headers in my httpResponse function, so I assumed that would take care of it, but apparently not.

I’m trying to treat Google Apps Script like a lightweight backend API. The idea is to have a static page hosted on GitHub Pages that can do all of the basic CRUD operations against a Google Sheet. I want to be able to add rows, update existing cells, maybe delete a row, and also read data back, all through jQuery AJAX calls from the frontend.

I’m not sure if the problem is because of how Apps Script handles OPTIONS requests or if it’s because testing locally makes the browser treat the request differently, or if GitHub Pages is going to behave in some other way once it’s deployed (it did before but now its just all broken). Ideally I’d like a setup where my static site can just talk directly to the Apps Script endpoint without needing a proxy api since those are limited or payed.

So why are the headers I’m setting not actually showing up to the browser, do I need to explicitly implement handling for preflight OPTIONS requests, and is there anything special about calling Apps Script from a static site (whether locally or from GitHub Pages) that I should be aware of? Please help thanks.

I’m utilizing React-Bootstrap Offcanvas as a mobile sidebar to scroll to various portions of the page, however when I click the links on my iPhone they do not work, with some exceptions, and seems to focus on elements behind it. On desktop, when I inspect and change the dimensions everything works fine.

Using onClick event listener to trigger scrollIntoView method via document.getElementById(id).scrollIntoView();

Using chrome browser on both devices. Website is hosted through Github Pages. Website is a personal site I’m using to practice my code and share things I enjoy.

The code is a little large and is linked here: https://github.com/ShaunDM/ShaunDM.github.io

Website here: https://shaundm.github.io/#/

Relevant components:

• src/layout/Layout.js for the offcanvas.
• src/layout/Navbar.js for looking into whether components behind the offcanvas are being affected, specifically the navbar.
• src/sidebar (primarily ./SidebarList.js) for the offcanvas content.
• src/layout/Hit.js and it’s relevant variables/functions in src/layout/Layout.js if you’d like to track events on a mobile device.

Exception 1:

If I activate the Offcanvas and zoom out through pinching, the links work. This doesn’t work if I zoom in. Will often maintain functionality for a few seconds after initial zoom out without having to repeat method.

Exception 1 in action, can see highlight of elements behind click

Exception 2:

On one of my pages I have a sidebar that contains multiple lists of links. It’ll navigate the horizontal scroll, but not the document’s y axis, unless you use exception 1. Page: https://shaundm.github.io/#/portfolio

Exception 2 in action

I’ve implemented a component that will render either “Hit” or “No hit” that I use to track triggers of events on a mobile device. When I click the link it registers as being fired. When I use it to track onFocus, onFocusCapture, onTouchStart, and/or onTouchStartCapture of the elements behind the Offcanvas it doesn’t register despite the elements being highlighted afterward as if they are being focused.

Can see trigger of link click event here. The trigger of events regarding elements behind offcanvas are in the prior gifs. Also can see zoom in not working.

Be aware that not all of the pages render a sidebar, Home and Contact Me. There will be no triple bar icon on the navbar.

The current version of the code has set up to change based on if a link is clicked or not.

• I’ve tried implementing z-index:9999 for the sidebar, and 0 for , #root, and the container I surround all my code with except the offcanvas.
• Setting the sidebar’s position to relative instead of fixed and set relative to the above mentioned elements, while maintaining z-index above.
• I’ve moved the offcanvas sidebar as a direct child of .
• I’ve double checked on my desktop browser that the sidebar is not being overlapped, by the elements behind using inspect and it doesn’t seem to be the case.
• I’ve tried eliminating custom css for the offcanvas.
• I’ve tried surrounding the document.getElementById(id).scrollIntoView(); method with setTimeOut, which seemed to fix others with similar issues.
• I’ve tried utilizing e.preventDefault() prior to triggering scrollIntoView().

I have a custom component wrapper around a react-select, but I’ve also noticed this same behavior in the react-select by itself as well. The behavior occurs when using react-select whenever the React state is updated, whether by the onChange function passed to the Select or by anything else.

When the Select component is outside of the React state, if I select an option and then reopen the Select, the selected option will be focused and keyboard navigation proceeds from the selected option. However, if the React state changes (thereby triggering a re-render), reopening the Select results in the first option being focused instead of the selected option.

I’ve tried passing both value and defaultValue to the Select, but neither seem to have had any effect on the focused option.

A basic TypeScript example using options from the react-select website:

import Select from "react-select";

type ColorOption = {
    value: string, label: string, color: string
};

export const DemoComponent = 

    const [selectedColor, setSelectedColor] = useState<ColorOption>();

    const colorOptions: ColorOption[] = [
        { value: 'ocean', label: 'Ocean', color: '#00B8D9' },
        { value: 'blue', label: 'Blue', color: '#0052CC' },
        { value: 'purple', label: 'Purple', color: '#5243AA' },
        { value: 'red', label: 'Red', color: '#FF5630' },
        { value: 'orange', label: 'Orange', color: '#FF8B00' }
    ];

    return <Select 
        options={colorOptions} 
        defaultValue={selectedColor} 
        onChange={(e) => {setSelectedColor(e)}} 
    />;
}

initial open

If I select Purple here and then reopen the Select, I would expect it to focus Purple and for the keyboard to navigate from there, which is what happens if the onChange function is removed and no re-render occurs. But instead, it focuses the first option.

open after select

I’m using bootstrap multiselect (https://github.com/davidstutz/bootstrap-multiselect – current version) in a form. On desktop it’s working fine, but on mobile or if I use the Responsive Design Mode in Firefox or the Toggle Device Emulation in Chrome dev tool, I’m getting an error:

Unable to preventDefault inside passive event listener invocation.

and the select behavior is not working as expected on mobile. I have this error with the default, but also with my custom config:

// Multiselect Config
const opts_template = {
    button: '<button type="button" class="multiselect dropdown-toggle" data-toggle="dropdown"><span class="multiselect-selected-text"></span><i class="fa fa-caret-down" aria-hidden="true"></i></button>',
    filter: '<div class="multiselect-filter"><div class="input-group"><span class="input-group-btn"><button class="btn btn-default btn-multisearch" type="button" disabled><i class="fa fa-sm fa-search"></i></button></span><input type="search" class="multiselect-search form-control" /><span class="input-group-btn"><button class="btn btn-default multiselect-clear-filter" type="button"><i class="fa fa-sm fa-times"></i></button></span></div></div>',
};

// Multiselect Select One Mininum
function multiSelectOneMin(val) {
    if(val.multiselect){
        var $element = val.multiselect.$select;
    } else {
        var $element = $(val.element);
    }
    let $click = val.click ? val.click : '';
    if($element.val().length == 0) {
        $element.multiselect('select', $click);
    }
}

const opts_basic_one_min = {
    nonSelectedText: 'Select',
    maxHeight: 250,
    buttonWidth: '100%',
    templates: opts_template,
    onChange: function(element, checked) {
        multiSelectOneMin({ multiselect: this, element: null, values: this.$select.val(), click: element.val() });
    }
};

$('#subjectContact').multiselect(opts_basic_one_min);

Here is the live form: https://www.qumundo.com/contact/

How can I fix this error on mobile?

I’ve tried deactivating the event.preventDefault() as suggested in some posts:

https://github.com/davidstutz/bootstrap-multiselect/blob/aade5e6f6a55add71c2ba42348cfe72ea51b563b/dist/js/bootstrap-multiselect.js#L795

//event.preventDefault();

but then all the mobile attempts seem to work but not the desktop attempts.

I’ve also noticed that with deactvitating //event.preventDefault(); the multiselect .onChange() is running:

Desktop: 2 times; Mobile: 3 times

If I activate it:

Desktop: 1 time; Mobile: 2 times (including the error)

I’ve also noticed a difference in the Copy Selector and Copy Styles of an option select:

Desktop:

#form-group-subject > span > div > div.multiselect-container.dropdown-menu > button.multiselect-option.dropdown-item.active > span > label
document.querySelector("#form-group-subject > span > div > div.multiselect-container.dropdown-menu > button.multiselect-option.dropdown-item.active > span > label")

Mobile:

#form-group-subject > span > div > div > button.multiselect-option.dropdown-item.active > span > label
document.querySelector("#form-group-subject > span > div > div > button.multiselect-option.dropdown-item.active > span > label")

I’ve also tried:

//$('#subjectContact').multiselect(opts_basic_one_min).change(function(e) { e.preventDefault(); });

I’ve also tried

document.addEventListener('touchstart', function(event) {
    event.preventDefault();
    console.log('touchstart event');
}, { passive: false } );

Desktop seems to work, but on mobile I can’t open the bootstrap multiselect anymore.

jQuery v3.7.1

I have a hook that checks if the theme is dark or light:

"use client";

import { useEffect, useState } from "react";

function useDarkMode() {
  const [isDarkMode, setIsDarkMode] = useState(false);

  useEffect(() => {
    console.warn("checked");
  }, []);

  useEffect(() => {
    let observer: MutationObserver | null = null;

    const init = () => {
      const themeDiv = document.getElementById("theme");
      if (!themeDiv) {
        console.warn("#theme not found");
        return;
      }

      const update = () => setIsDarkMode(themeDiv.classList.contains("dark"));

      observer = new MutationObserver(update);
      observer.observe(themeDiv, {
        attributes: true,
        attributeFilter: ["class"],
      });

      // Initial check
      update();
    };

    // Delay to ensure DOM is ready
    requestAnimationFrame(init);

    return () => observer?.disconnect();
  }, []);

  return isDarkMode;
}

export default useDarkMode;

I use it inside my DotGrid component with is from react-bites
Link to react bites component.

Inside const DotGrid I added:

const isDarkMode = useDarkMode();
console.log("is Dark Mode", isDarkMode);

The mode is always false because useEffect won’t run. The DotGrid has use client at the top of component.

I can’t get the useEffect running, console.log do not displays. Both are use client components. What are the reason and how to fix it?

I expect console.log from useEffect to be displayed.