Squirble
Squirble•3w ago

React quickstart breaks on `npm run dev:frontend`

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
% 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
15 Replies
Convex Bot
Convex Bot•3w ago
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 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!
Squirble
SquirbleOP•3w ago
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?
ballingt
ballingt•3w ago
On it, thanks @Squirble! oh @Squirble which template is this, how did you answer the questions? Also what version of Node.js are you using?
Squirble
SquirbleOP•3w ago
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
ballingt
ballingt•3w ago
where are you setting it?
Squirble
SquirbleOP•3w ago
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)
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)
ballingt
ballingt•3w ago
and when you run npx convex env list it's the wrong value? or view it from npx convex dashboard -> Settings -> Environment Variables
Squirble
SquirbleOP•3w ago
no, I just mean it ends up running dev on vite's default port anyway
ballingt
ballingt•3w ago
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
Squirble
SquirbleOP•3w ago
hm, this auth is useless if I don't configure resend or github, I see.
ballingt
ballingt•3w ago
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
Squirble
SquirbleOP•3w ago
no changes just ran npm run dev:frontend
ballingt
ballingt•3w ago
No description
Squirble
SquirbleOP•2w ago
Well it always happens for me.
erquhart
erquhart•2w ago
I've run into the tailwind thing too seeing if I can still repro @ballingt 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 🤷‍♂️ 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 This may or may not be the desired approach, it's just the one I'd take.

Did you find this page helpful?