Search code examples
node.jsnpmbuildremix.run

remix - npm run dev stuck on built

When I run npm run dev on a remix project (default template used), I am noticing that my build gets stuck on the step of built. Version of remix used,

 "@remix-run/node": "^2.5.1",
 "@remix-run/react": "^2.5.1",
 "@remix-run/serve": "^2.5.1",

Commands I tried,

npm run dev

> dev
> remix dev --manual


 💿  remix dev

 info  building...
 info  built (578ms)

I have also tried using npx after removing my build and cache folders, tried changing the port thinking this may be an issue but I still see the same problem.

npx remix dev --manual  --port 5001

 💿  remix dev

 info  building...
 info  built (539ms)

Would also like to point out that the package.json script was a default one which was working earlier.

Default scripts from remix,

 "scripts": {
    "build": "remix build",
    "dev": "remix dev --manual",
    "lint": "eslint --ignore-path .gitignore --cache --cache-location ./node_modules/.cache/eslint .",
    "start": "remix-serve ./build/index.js",
  },

It recently stopped connecting to prisma and after I terminated the build and tried running the same default command, remix fails to build and start the project. Can anyone provide some pointers? thanks.

Solution

  • After spending a lot of time I realized that I was trying to call the prisma functions directly. Instead Remix have a concept of loaders to load anything from the backend.

    Here is what I have done to resolve this,

    imports are important,

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

    First need to create a function called loader,

    export async function loader() {
  return json(await db.note.findMany());
}

    then calling the following in whichever component I needed,

    const notes = useLoaderData<typeof loader>();

    This allowed me to successfully call my helper db.server file to retrieve data.