CODEWITHSUNDEEP
componentsqwik
jlsdev
jlsdev

Reputation: 11

Qwik: changes not reflected after Vite page reload

I am writing an application with Qwik.

Although one of my components renders without any errors, I found that if I used a signal to perform a conditional rendering (in this case, tooltipVisible) in my code, any changes in my application are not being reflected after a page reload. Then I need to type 'npm start' after each update.

After removing the conditional rendering statement, the changes are properly reflected.

What am I doing wrong?

This is the code of my component:

import { component$, useSignal, $ } from "@builder.io/qwik";
import { useContext } from "@builder.io/qwik";
import { enrContext } from "~/root";
import { useElectionSettings } from "~/routes/index";

export const FavoriteRacesCounter = component$(() => {
  const tooltipVisible = useSignal(false);
  const toggleTooltip = $(() => {
    console.log("tooltipVisible: " + tooltipVisible.value);
    tooltipVisible.value = !tooltipVisible.value;
  });
  const electionSettings = useElectionSettings();
  const context = useContext(enrContext);
  return (
    <div class="flex relative">
      <button class="flex" onClick$={toggleTooltip}>
        <div class="material-icons">star</div> ({context.favorite_races.length})
      </button>
      { tooltipVisible.value ?
      <div class="absolute flex flex-col right-12 -top-3/4 w-80 border p-5 rounded z-20 bg-white">
        <h2 class="flex self-center underline mb-3">My Favorite Races</h2>
        {context.favorite_races.length > 0 ? (
          <ul class="list-disc ml-2">
            {context.favorite_races.map((contest, index) => (
              <li key={index}>{contest}</li>
            ))}
          </ul>
        ) : (
          <p class="text-gray-500">
            {electionSettings.value.pagesettings.web.nofavorites}
          </p>
        )}
      </div>
      : '' }
    </div>
  );
});

Thanks a lot :)

Upvotes: 0

Views: 532

Answers (1)

vishnu
vishnu

Reputation: 549

I had a similar issue. After making any changes to the code it was not reflected on the browser. I had to restart every time hard(npm start).

What worked for me was changing vite version from 4.3.9(I was using this) to 4.4.6

Upvotes: 0

Related Questions