React quickstart breaks on `npm run dev:frontend` | Convex Community | Page 1

orchid dragon Dec 6, 2024, 1:29 AM

#

I ran npm create convex@latest and then npm run dev but I'm getting an error.

% npm run dev:frontend

> my-project@0.0.0 dev:frontend
> vite --open

Port 5173 is in use, trying another one...
Port 5174 is in use, trying another one...

  VITE v5.4.11  ready in 138 ms

  ➜  Local:   http://localhost:5175/
  ➜  Network: use --host to expose
  ➜  press h + enter to show help
file:///Users/me/Documents/Code/my-project/tailwind.config.js:77
  plugins: [require("tailwindcss-animate")],
           ^

ReferenceError: require is not defined
    at file:///Users/me/Documents/Code/my-project/tailwind.config.js:77:12
    at ModuleJobSync.runSync (node:internal/modules/esm/module_job:395:35)
    at ModuleLoader.importSyncForRequire (node:internal/modules/esm/loader:329:47)
    at loadESMFromCJS (node:internal/modules/cjs/loader:1414:24)
    at Module._compile (node:internal/modules/cjs/loader:1547:5)
    at Object..js (node:internal/modules/cjs/loader:1677:16)
    at Module.load (node:internal/modules/cjs/loader:1318:32)
    at Function._load (node:internal/modules/cjs/loader:1128:12)
    at TracingChannel.traceSync (node:diagnostics_channel:322:14)
    at wrapModuleLoad (node:internal/modules/cjs/loader:219:24)
    at Module.require (node:internal/modules/cjs/loader:1340:12)
    at require (node:internal/modules/helpers:138:16)
    at /Users/me/Documents/Code/my-project/node_modules/tailwindcss/lib/lib/load-config.js:54:27
    at loadConfig (/Users/me/Documents/Code/my-project/node_modules/tailwindcss/lib/lib/load-config.js:58:6)
    at getTailwindConfig (/Users/me/Documents/Code/my-project/node_modules/tailwindcss/lib/lib/setupTrackingContext.js:71:116)
    at /Users/me/Documents/Code/my-project/node_modules/tailwindcss/lib/lib/setupTrackingContext.js:100:92
    at /Users/me/Documents/Code/my-project/node_modules/tailwindcss/lib/processTailwindFeatures.js:46:11
    at plugins (/Users/me/Documents/Code/my-project/node_modules/tailwindcss/lib/plugin.js:38:69)
    at LazyResult.runOnRoot (/Users/me/Documents/Code/my-project/node_modules/postcss/lib/lazy-result.js:329:16)
    at LazyResult.runAsync (/Users/me/Documents/Code/my-project/node_modules/postcss/lib/lazy-result.js:258:26)
    at LazyResult.async (/Users/me/Documents/Code/my-project/node_modules/postcss/lib/lazy-result.js:160:30)
    at LazyResult.then (/Users/me/Documents/Code/my-project/node_modules/postcss/lib/lazy-result.js:404:17)

Node.js v22.12.0

drowsy bearBOT Dec 6, 2024, 1:29 AM

#

Thanks for posting in #1088161997662724167.
Reminder: If you have a Convex Pro account, use the Convex Dashboard to file support tickets.

    - Provide context: What are you trying to achieve, what is the end-user interaction, what are you seeing? (full error message, command output, etc.)
    - Use [search.convex.dev](https://search.convex.dev) to search Docs, Stack, and Discord all at once.
    - Additionally, you can post your questions in the Convex Community's #1228095053885476985 channel to receive a response from AI.
    - Avoid tagging staff unless specifically instructed.

    Thank you!

orchid dragon Dec 6, 2024, 1:44 AM

#

AI solved this for me.
One option is to rename tailwind.config.js to tailwind.config.cjs.
Another is to change require to import.
There might be other solutions too. Can we get one of these changes into the template?

granite oxide Dec 6, 2024, 1:52 AM

#

On it, thanks @orchid dragon!

#

oh @orchid dragon which template is this, how did you answer the questions?

#

Also what version of Node.js are you using?

orchid dragon Dec 6, 2024, 1:56 AM

#

React (Vite)

#

Node.js v22.12.0

#

with Convex Auth, but no Github or Resend

#

Also I set the SITE_URL to http://localhost:5002 but that doesn't seem to be being honored

granite oxide Dec 6, 2024, 1:59 AM

#

where are you setting it?

orchid dragon Dec 6, 2024, 2:00 AM

#

it asks

#

You chose Convex Auth as the auth solution. This command will walk you through setting up the required Convex environment variables
i Step 1: Configure SITE_URL
? Enter the URL of your local web server (e.g. http://localhost:1234) http://localhost:5002
✔ Successfully set SITE_URL to http://localhost:5002 (on dev deployment hushed-chipmunk-750)

granite oxide Dec 6, 2024, 2:01 AM

#

and when you run npx convex env list it's the wrong value?

#

or view it from npx convex dashboard -> Settings -> Environment Variables

orchid dragon Dec 6, 2024, 2:02 AM

#

no, I just mean it ends up running dev on vite's default port anyway

granite oxide Dec 6, 2024, 2:02 AM

#

ah got it, yeah you're just configuring the convex backend there, not the frontend vite server

#

you'll need to also change this line in package.json "dev:frontend": "vite --open", to add a flag for the port you want

orchid dragon Dec 6, 2024, 2:05 AM

#

hm, this auth is useless if I don't configure resend or github, I see.

granite oxide Dec 6, 2024, 2:05 AM

#

Hm I can't repro your tailwind issue even with Node.js 22

#

You can configure a password strategy without email

#

Did you make any other changes to this project? I agree this looks wrong unless tailwind does something unusual to load its config file but I can't trigger this error

orchid dragon Dec 6, 2024, 3:43 AM

#

no changes

#

just ran npm run dev:frontend

granite oxide Dec 6, 2024, 4:19 AM

#

orchid dragon Dec 14, 2024, 8:48 AM

#

Well it always happens for me.

verbal bay Dec 14, 2024, 4:58 PM

#

I've run into the tailwind thing too

#

seeing if I can still repro

verbal bay Dec 14, 2024, 6:13 PM

#

@granite oxide this does not happen with node 22.0.0, but does happen with 22 latest, so something broke in between. What's really crazy is it doesn't happen in 23 🤷‍♂️

verbal bay Dec 14, 2024, 6:37 PM

#

nope, it breaks in a v22 minor/patch and is fixed in a v23 minor/patch. Wonder why the fix wasn't backported.

#

https://github.com/get-convex/template-react-vite-shadcn/pull/2

#React quickstart breaks on `npm run dev:frontend`