feat: upgraded remix compiler to remix vite

[tarungupta9]

Migrating from Classic Remix Compiler to Remix Vite

[tarungupta9]

facing issues while running validate as npx cypress run command is failing with an error ReferenceError: exports is not defined in ES module scope

Tried updating tsconfig.json by following cypress-io/cypress#23552 (comment) but couldn't make it work. Will check again

[Apsysikal]

I've migrated an Indie Stack application to vite.
I'd recommend first moving to ESM and then afterwards migrating to vite. Makes it easier to know where the error is from 😅

Regarding your issue I ended up switching to tsx instead of ts-node as I couldn't get it to work with ts-node.
Using tsx I modified the file cypress/support/commands.ts according to this:

-cy.exec(
-  `npx ts-node -r tsconfig-paths/register ./cypress/support/create-user.ts "${email}"`,
-).then(({ stdout }) => {
-  const cookieValue = stdout
-    .replace(/.*<cookie>(?<cookieValue>.*)<\/cookie>.*/s, "$<cookieValue>")
-    .trim();
-  cy.setCookie("__session", cookieValue);
-});
+cy.exec(`tsx ./cypress/support/create-user.ts "${email}"`).then(
+  ({ stdout }) => {
+    const cookieValue = stdout
+      .replace(/.*<cookie>(?<cookieValue>.*)<\/cookie>.*/s, "$<cookieValue>")
+      .trim();
+    cy.setCookie("__session", cookieValue);
+  },
+);

-cy.exec(
-  `npx ts-node -r tsconfig-paths/register ./cypress/support/delete-user.ts "${email}"`,
-);
+cy.exec(`tsx ./cypress/support/delete-user.ts "${email}"`);

And package.json

"scripts": {
    "build": "remix vite:build",
    "dev": "binode --import ./mocks/index.js -- @remix-run/dev:remix vite:dev",
    "format": "prettier --write .",
    "lint": "eslint --cache --cache-location ./node_modules/.cache/eslint .",
    "setup": "prisma generate && prisma migrate deploy && prisma db seed",
    "start": "remix-serve ./build/server/index.js",
    "start:mocks": "binode --import ./mocks/index.js -- @remix-run/serve:remix-serve ./build/server/index.js",
    "test": "vitest",
    "test:e2e:dev": "start-server-and-test dev http://localhost:3000 \"npx cypress open\"",
    "pretest:e2e:run": "npm run build",
    "test:e2e:run": "cross-env PORT=8811 start-server-and-test start:mocks http://localhost:8811 \"npx cypress run\"",
    "typecheck": "tsc && tsc -p cypress",
    "validate": "run-p \"test -- --run\" lint typecheck test:e2e:run",
    "prisma:studio": "prisma studio",
    "optimize:images": "tsx app/optimize-images.ts"
  },

[tarungupta9]

@Apsysikal, thanks for the input. I tried tsx and still getting zsh:1: command not found: tsx

[tarungupta9]

Could you confirm what shell are you using? I read there's some issue with zsh in particular with Cypress

cypress-io/cypress#6081

[tarungupta9]

[Apsysikal]

I also got an error (different one) but fixed it on my end. I used bash. The changes made (should also probably update the comment) are:

cypress/support/create-user.ts

-// npx ts-node -r tsconfig-paths/register ./cypress/support/create-user.ts username@example.com,
+// npx tsx ./cypress/support/create-user.ts username@example.com,

cypress/support/delete-user.ts

-// npx ts-node -r tsconfig-paths/register ./cypress/support/delete-user.ts username@example.com,
+// npx tsx ./cypress/support/delete-user.ts username@example.com,

-import { PrismaClientKnownRequestError } from "@prisma/client/runtime";
+import { Prisma } from "@prisma/client";

-error instanceof PrismaClientKnownRequestError &&
+error instanceof Prisma.PrismaClientKnownRequestError &&

You should also add tsx to the devDependencies.

package.json

+"tsx": "^4.9.1",

[Apsysikal]

I think with the proposed changes it should also work on your system.
I could to the run npm run setup and npm run validate commands afterwards without any errors.

I saw that the remix.init/index.js still uses ts-node but i don't know that file. I guess swapping everything from ts-node ... to tsx ... and testing if it works should be fine? Also after that ts-node could be removed from the dependencies.

[Apsysikal]

Alternatively we could also do:

import stylesheet from "~/tailwind.css?url";

export const links: LinksFunction = () => [
  { rel: "stylesheet", href: stylesheet }
];

I don't know if there is a preferred way though. I just used it like that.

[Apsysikal]

If we want to use 'tsx' this could also just be moved to it. So it would become:

"seed": "tsx prisma/seed.ts"

[Apsysikal]

I also got an error (different one) but fixed it on my end. I used bash. The changes made (should also probably update the comment) are:

cypress/support/create-user.ts

-// npx ts-node -r tsconfig-paths/register ./cypress/support/create-user.ts username@example.com,
+// npx tsx ./cypress/support/create-user.ts username@example.com,

cypress/support/delete-user.ts

-// npx ts-node -r tsconfig-paths/register ./cypress/support/delete-user.ts username@example.com,
+// npx tsx ./cypress/support/delete-user.ts username@example.com,

-import { PrismaClientKnownRequestError } from "@prisma/client/runtime";
+import { Prisma } from "@prisma/client";

-error instanceof PrismaClientKnownRequestError &&
+error instanceof Prisma.PrismaClientKnownRequestError &&

You should also add tsx to the devDependencies.

package.json

+"tsx": "^4.9.1",