-
Notifications
You must be signed in to change notification settings - Fork 307
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
feat: upgraded remix compiler to remix vite #274
base: main
Are you sure you want to change the base?
Conversation
"start": "remix-serve ./build/index.js", | ||
"start:mocks": "binode --require ./mocks -- @remix-run/serve:remix-serve ./build/index.js", | ||
"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 https://localhost:3000 \"npx cypress open\"", | ||
"pretest:e2e:run": "npm run build", |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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 https://localhost:3000 \"npx cypress open\"",
"pretest:e2e:run": "npm run build",
"test:e2e:run": "cross-env PORT=8811 start-server-and-test start:mocks https://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"
},
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@Apsysikal, thanks for the input. I tried tsx
and still getting zsh:1: command not found: tsx
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Could you confirm what shell are you using? I read there's some issue with zsh in particular with Cypress
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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 [email protected],
+// npx tsx ./cypress/support/create-user.ts [email protected],
cypress/support/delete-user.ts
-// npx ts-node -r tsconfig-paths/register ./cypress/support/delete-user.ts [email protected],
+// npx tsx ./cypress/support/delete-user.ts [email protected],
-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",
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.
{ rel: "stylesheet", href: stylesheet }, | ||
...(cssBundleHref ? [{ rel: "stylesheet", href: cssBundleHref }] : []), | ||
]; | ||
import "~/tailwind.css"; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.
@@ -89,6 +88,6 @@ | |||
"node": ">=18.0.0" | |||
}, | |||
"prisma": { | |||
"seed": "ts-node -r tsconfig-paths/register prisma/seed.ts" | |||
"seed": "ts-node-esm -r tsconfig-paths/register prisma/seed.ts" |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
If we want to use 'tsx' this could also just be moved to it. So it would become:
"seed": "tsx prisma/seed.ts"
"start": "remix-serve ./build/index.js", | ||
"start:mocks": "binode --require ./mocks -- @remix-run/serve:remix-serve ./build/index.js", | ||
"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 https://localhost:3000 \"npx cypress open\"", | ||
"pretest:e2e:run": "npm run build", |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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 [email protected],
+// npx tsx ./cypress/support/create-user.ts [email protected],
cypress/support/delete-user.ts
-// npx ts-node -r tsconfig-paths/register ./cypress/support/delete-user.ts [email protected],
+// npx tsx ./cypress/support/delete-user.ts [email protected],
-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",
Migrating from Classic Remix Compiler to Remix Vite