redwood: [Bug?]: Build Error "[plugin:vite:esbuild] Transform failed" when Router Page placed in root "web/pages" directory
DT Edits:
See comments below for a reproducible case; does not require any Clerk or auth setup.
–
What’s not working?
Following the steps outlined at https://redwoodjs.com/docs/auth/clerk I received the following error upon running yarn rw dev
:
web | ➜ Local: http://localhost:8910/
web | ➜ Network: http://192.168.1.204:8910/
web | ➜ Network: http://100.84.70.99:8910/
gen | Generating full TypeScript definitions and GraphQL schemas
web | 7:54:37 PM [vite] Internal server error: Transform failed with 1 error:
web | /Users/jd/projects/redwood-clerk/web/src/Routes.tsx:1:820: ERROR: Expected identifier but found "="
web | Plugin: vite:esbuild
web | File: /Users/jd/projects/redwood-clerk/web/src/Routes.tsx:1:0
web |
web | Expected identifier but found "="
web | 1 | import RefreshRuntime from "/@react-refresh";const inWebWorker = typeof WorkerGlobalScope !== 'undefined' && self instanceof WorkerGlobalScope;let prevRefreshReg;let prevRefreshSig;if (import.meta.hot && !inWebWorker) { if (!window.__vite_plugin_react_preamble_installed__) { throw new Error( "@vitejs/plugin-react can't detect preamble. Something is wrong. " + "See https://github.com/vitejs/vite-plugin-react/pull/11#discussion_r430879201" ); } prevRefreshReg = window.$RefreshReg$; prevRefreshSig = window.$RefreshSig$; window.$RefreshReg$ = (type, id) => { RefreshRuntime.register(type, "/Users/jd/projects/redwood-clerk/web/src/Routes.tsx" + " " + id) }; window.$RefreshSig$ = RefreshRuntime.createSignatureFunctionForTransform;}import { lazy } from "react";const = { name: "", prerenderLoader: (name) => ({ default: globalThis.__REDWOOD__PRERENDER_PAGES[name] }), LazyComponent: lazy(() => import( /* webpackChunkName: "" */"./pages/HomePage")) };const FatalErrorPage = { name: "FatalErrorPage", prerenderLoader: (name) => ({ default: globalThis.__REDWOOD__PRERENDER_PAGES[name] }), LazyComponent: lazy(() => import( /* webpackChunkName: "FatalErrorPage" */"./pages/FatalErrorPage/FatalErrorPage")) };const NotFoundPage = { name: "NotFoundPage", prerenderLoader: (name) => ({ default: globalThis.__REDWOOD__PRERENDER_PAGES[name] }), LazyComponent: lazy(() => import( /* webpackChunkName: "NotFoundPage" */"./pages/NotFoundPage/NotFoundPage")) }; // In this file, all Page components from 'src/pages` are auto-imported. Nested
web | | ^
web | 2 | // directories are supported, and should be uppercase. Each subdirectory will be
web | 3 | // prepended onto the component name.
web |
web | at failureErrorWithLog (/Users/jd/projects/redwood-clerk/node_modules/vite/node_modules/esbuild/lib/main.js:1649:15)
web | at /Users/jd/projects/redwood-clerk/node_modules/vite/node_modules/esbuild/lib/main.js:847:29
web | at responseCallbacks.<computed> (/Users/jd/projects/redwood-clerk/node_modules/vite/node_modules/esbuild/lib/main.js:703:9)
web | at handleIncomingPacket (/Users/jd/projects/redwood-clerk/node_modules/vite/node_modules/esbuild/lib/main.js:762:9)
web | at Socket.readFromStdout (/Users/jd/projects/redwood-clerk/node_modules/vite/node_modules/esbuild/lib/main.js:679:7)
web | at Socket.emit (node:events:517:28)
web | at addChunk (node:internal/streams/readable:368:12)
web | at readableAddChunk (node:internal/streams/readable:341:9)
web | at Readable.push (node:internal/streams/readable:278:10)
web | at Pipe.onStreamRead (node:internal/stream_base_commons:190:23)
web | Transform failed with 1 error:
web | /Users/jd/projects/redwood-clerk/web/src/Routes.tsx:1:820: ERROR: Expected identifier but found "="
gen | Done.
api | Building... Took 368 ms
api | Debugger listening on ws://127.0.0.1:18911/974268d6-6b36-4733-87ec-5844610a2220
api | For help, see: https://nodejs.org/en/docs/inspector
api | Starting API Server...
api | Loading server config from /Users/jd/projects/redwood-clerk/api/server.config.js
api |
api | Importing Server Functions...
api | /graphql 198 ms
api | ...Done importing in 199 ms
api | Took 217 ms
api | API listening on http://localhost:8911/
api | GraphQL endpoint at /graphql
api | 19:54:38 🌲 Server listening at http://[::]:8911
How do we reproduce the bug?
- Checkout https://github.com/swrichards/redwoodjs-clerk-test
- If using
nvm
:nvm use
yarn install
- Update
.env
with dummy values:
CLERK_PUBLISHABLE_KEY=pk_test_foobar
CLERK_SECRET_KEY=sk_test_foobar
- Run
yarn rw dev
What’s your environment? (If it applies)
System:
OS: macOS 13.6.2
Shell: 3.2.57 - /bin/bash
Binaries:
Node: 18.19.0 - /private/var/folders/s6/43kpdrt122s1y4_yt7rh8vzw0000gn/T/xfs-9da2b11b/node
Yarn: 3.7.0 - /private/var/folders/s6/43kpdrt122s1y4_yt7rh8vzw0000gn/T/xfs-9da2b11b/yarn
Databases:
SQLite: 3.39.5 - /usr/bin/sqlite3
Browsers:
Safari: 17.1.2
npmPackages:
@redwoodjs/core: 6.5.1 => 6.5.1
Are you interested in working on this?
- I’m interested in working on this
About this issue
- Original URL
- State: open
- Created 7 months ago
- Comments: 16 (16 by maintainers)
Commits related to this issue
- docs: auth - Clerk - Corrects Home Page generation instructions (#9662) See issue https://github.com/redwoodjs/redwood/issues/9658 In the issue above, @swrichards found that if one places a Page.t... — committed to redwoodjs/redwood by dthyresson 7 months ago
- docs: auth - Clerk - Corrects Home Page generation instructions (#9662) See issue https://github.com/redwoodjs/redwood/issues/9658 In the issue above, @swrichards found that if one places a Page.t... — committed to redwoodjs/redwood by dthyresson 7 months ago
@dthyresson thanks for clarifying, looks like it’s a general issue unrelated to Clerk, but also perfectly avoidable using the proper paths / page scaffolding tool. I’ll move on accordingly 👍 .