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?

  1. Checkout https://github.com/swrichards/redwoodjs-clerk-test
  2. If using nvm: nvm use
  3. yarn install
  4. Update .env with dummy values:
CLERK_PUBLISHABLE_KEY=pk_test_foobar
CLERK_SECRET_KEY=sk_test_foobar
  1. 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

Most upvoted comments

@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 👍 .