Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
4 tasks done
cliffordfajardo opened this issue Jan 3, 2023 · 1 comment
Open
4 tasks done
Labels
bug Something isn't working

Comments

@cliffordfajardo
Copy link
Collaborator

cliffordfajardo commented Jan 3, 2023

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

001-vite-server-not-working.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

  • Read the Contributing Guidelines.
  • Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
  • 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.
  • Check that this is a concrete bug. For Q&A open a GitHub Discussion.
@cliffordfajardo cliffordfajardo added the bug Something isn't working label Jan 3, 2023
@jrestall
Copy link
Owner

jrestall commented Jan 3, 2023

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

No branches or pull requests

2 participants