seb Posts - Answer Overflow

seb

Explore posts from servers

•Created by seb on 4/10/2024 in #support

Understanding Solid Reactivity Lint Error

In the following component I get this lint warning:

The reactive variable 'handleContextMenuCommand' should be used within JSX, a tracked scope (like createEffect), or inside an event handler function, or else changes will be ignored  solid/reactivity

The reactive variable 'handleContextMenuCommand' should be used within JSX, a tracked scope (like createEffect), or inside an event handler function, or else changes will be ignored  solid/reactivity

But I am using it inside of an event handler function. Is this a misunderstanding on my part of how reactivity works or does the linter just not recognize that the chrome.runtime.onMessage global used by Chrome extensions can register event listeners? Here's a stripped down example of my code:

export const ExampleComponent: Component = () => {
  const [isLoading, setIsLoading] = createSignal(false);

  const handleContextMenuCommand = async (message: string) => {
    setIsLoading(true);
    await fetch('/example', { body: { message }});
    setIsLoading(false);
  }

  // this line results in a lint error:
  chrome.runtime.onMessage.addListener(handleContextMenuCommand);

  onCleanup(() => {
    chrome.runtime.onMessage.removeListener(handleContextMenuCommand);
  });

  return <div>Example</div>
};

export const ExampleComponent: Component = () => {
  const [isLoading, setIsLoading] = createSignal(false);

  const handleContextMenuCommand = async (message: string) => {
    setIsLoading(true);
    await fetch('/example', { body: { message }});
    setIsLoading(false);
  }

  // this line results in a lint error:
  chrome.runtime.onMessage.addListener(handleContextMenuCommand);

  onCleanup(() => {
    chrome.runtime.onMessage.removeListener(handleContextMenuCommand);
  });

  return <div>Example</div>
};

If this code is incorrect, what's the right way to handle it?

7 replies

SSolidJS

•Created by seb on 12/23/2022 in #support

Including solidjs router creates multiple instances of solid

I'm trying to add @solidjs/router to a project. But as soon as I import it and add the minimal setup, I get the following warning in my browser console:

You appear to have multiple instances of Solid. This can lead to unexpected behavior.

You appear to have multiple instances of Solid. This can lead to unexpected behavior.

Removing @solidjs/router resolves the issue. My imports look like this:

import { Component } from 'solid-js';
import { render } from 'solid-js/web';
import { A, Routes, Route, Router } from '@solidjs/router';

import { Component } from 'solid-js';
import { render } from 'solid-js/web';
import { A, Routes, Route, Router } from '@solidjs/router';

I had a hunch it was a peer-dependency issue, since @solidjs/router specifies [email protected] while I had [email protected] installed, but downgrading to 1.5.3 didn't end up fixing this issue. Also relevant to note that I'm using vite with vite-plugin-solid and pnpm. Any idea what I could be doing wrong here?

5 replies

Gaming

Programming