remix-kit icon indicating copy to clipboard operation
remix-kit copied to clipboard

Updating loader code and refreshing the page does not reflect new changes

Open cliffordfajardo opened this issue 2 years ago • 1 comments

Describe the bug

If you spin up the remix app (Remix App Server template) using npm run vite:dev and make changes to your loader and refresh the page, the new data from the loader is not reflected

Steps to reproduce

  1. Create a new Remix app npx remix-kit@latest install and choose the Remix App Server template
  2. cd my-remix-app
  3. Install remix kit npx remix-kit@latest install
  4. Start remix app using vite npm run vite:dev
  5. Add a loader to routes/index.tsx and return a value
  6. Load the page
  7. Add a new value like 4 to the array and refresh the page, & youll see the server changes are not being reflected

If you use npm run dev (no vite) things work as expected after page reload, so it looks like its the vite dev server

Reproduction

https://user-images.githubusercontent.com/6743796/210302107-c140d11a-74ff-4533-a828-223939cbef0d.mp4

Example Code for routes/index.tsx

routes/index.tsx

import { type LoaderArgs, json } from "@remix-run/node";
import { useLoaderData } from "@remix-run/react";

export async function loader({ request }:LoaderArgs) {
  return json([ 1,2,3, ]) // ❌ after the initial page load, add a 4 inside the array and refresh the page
}

export default function Index() {
  const data = useLoaderData();
  return (
    <div style={{ fontFamily: "system-ui, sans-serif", lineHeight: "1.4", }}>
      <h1>Welcome to Remix</h1>
      <ul>
        {data.map((item:any) => (
          <li style={{color: 'pink'}}>{item}</li>
        ))}
      </ul>
    </div>
  );
}

System Info

System:
    OS: macOS 13.0.1
    CPU: (10) arm64 Apple M1 Pro
    Memory: 189.13 MB / 16.00 GB
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 18.12.0 - ~/.volta/tools/image/node/18.12.0/bin/node
    Yarn: 1.22.19 - ~/.volta/tools/image/yarn/1.22.19/bin/yarn
    npm: 8.19.2 - ~/.volta/tools/image/node/18.12.0/bin/npm
  Browsers:
    Chrome: 108.0.5359.124
    Safari: 16.1
  npmPackages:
    @remix-kit/react: ^0.2.2 => 0.2.2 
    @remix-kit/vite: ^0.2.2 => 0.2.2 
    @remix-run/dev: ^1.9.0 => 1.9.0 
    @remix-run/eslint-config: ^1.9.0 => 1.9.0 
    @remix-run/node: ^1.9.0 => 1.9.0 
    @remix-run/react: ^1.9.0 => 1.9.0 
    @remix-run/serve: ^1.9.0 => 1.9.0

Used Package Manager

npm

Validations

  • [X] Read the Contributing Guidelines.
  • [X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
  • [X] Make sure this is a RemixKit issue and not a Remix specific issue. For example, if it's a Remix related bug, it should likely be reported to remix instead.
  • [X] Check that this is a concrete bug. For Q&A open a GitHub Discussion.

cliffordfajardo avatar Jan 03 '23 04:01 cliffordfajardo

Thanks Clifford! v0.2.3 fixes this for me for existing loaders, though i haven't tested the case of adding entirely new loaders.

jrestall avatar Jan 03 '23 07:01 jrestall