[Bug?]: Build Error "[plugin:vite:esbuild] Transform failed" when Router Page placed in root "web/pages" directory

[swrichards]

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

5. 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

[dthyresson]

Hi @swrichards Thanks much for the excellent details and example app repo! This really helps us triage issues.

I used GitPod to launch your repo and did reproduce:

Using

"@redwoodjs/core": "6.5.1"
"@redwoodjs/auth-clerk-api": "6.5.1",

I'll have to check in with the rest of the Core Team and Clerk to help track down what might be going on.

[dthyresson]

@swrichards I just ad a glance at the code snippet in VSCode and it redlined:

import { lazy } from "react";const = { name: "", prerenderLoader: (name) => (

Notice the const = and no variable name.

I think that's the root cause of the error, but just a guess at the moment.

But something to start investigating.

[dthyresson]

Also, easily reproduces if yarn rw build web:

Error: Command failed with exit code 1: node /workspace/redwoodjs-clerk-test/node_modules/@redwoodjs/vite/bins/rw-vite-build.mjs --webDir="/workspace/redwoodjs-clerk-test/web"
[vite:esbuild] Transform failed with 1 error:
/workspace/redwoodjs-clerk-test/web/src/Routes.tsx:2:6: ERROR: Expected identifier but found "="
file: /workspace/redwoodjs-clerk-test/web/src/Routes.tsx:2:6

Expected identifier but found "="
1  |  import { lazy } from "react";
2  |  const = {
   |        ^
3  |    name: "",
4  |    prerenderLoader: name => ({

/workspace/redwoodjs-clerk-test/node_modules/vite/node_modules/esbuild/lib/main.js:1649
  let error = new Error(`${text}${summary}`);
              ^

Error: Transform failed with 1 error:
/workspace/redwoodjs-clerk-test/web/src/Routes.tsx:2:6: ERROR: Expected identifier but found "="
    at failureErrorWithLog (/workspace/redwoodjs-clerk-test/node_modules/vite/node_modules/esbuild/lib/main.js:1649:15)
    at /workspace/redwoodjs-clerk-test/node_modules/vite/node_modules/esbuild/lib/main.js:847:29
    at responseCallbacks.<computed> (/workspace/redwoodjs-clerk-test/node_modules/vite/node_modules/esbuild/lib/main.js:703:9)
    at handleIncomingPacket (/workspace/redwoodjs-clerk-test/node_modules/vite/node_modules/esbuild/lib/main.js:762:9)
    at Socket.readFromStdout (/workspace/redwoodjs-clerk-test/node_modules/vite/node_modules/esbuild/lib/main.js:679:7)
    at Socket.emit (node:events:514:28)
    at addChunk (node:internal/streams/readable:376:12)
    at readableAddChunk (node:internal/streams/readable:349:9)
    at Readable.push (node:internal/streams/readable:286:10)
    at Pipe.onStreamRead (node:internal/stream_base_commons:190:23) {
  errors: [
    {
      detail: undefined,
      id: '',
      location: {
        column: 6,
        file: '/workspace/redwoodjs-clerk-test/web/src/Routes.tsx',
        length: 1,
        line: 2,
        lineText: 'const = {',
        namespace: '',
        suggestion: ''
      },
      notes: [],
      pluginName: '',
      text: 'Expected identifier but found "="'
    }
  ],
  warnings: [],
  frame: '\n' +
    'Expected identifier but found "="\n' +
    '1  |  import { lazy } from "react";\n' +
    '2  |  const = {\n' +
    '   |        ^\n' +
    '3  |    name: "",\n' +
    '4  |    prerenderLoader: name => ({\n',
  loc: {
    column: 6,
    file: '/workspace/redwoodjs-clerk-test/web/src/Routes.tsx',
    length: 1,
    line: 2,
    lineText: 'const = {',
    namespace: '',
    suggestion: ''
  },
  code: 'PLUGIN_ERROR',
  plugin: 'vite:esbuild',
  hook: 'transform',
  id: '/workspace/redwoodjs-clerk-test/web/src/Routes.tsx',
  watchFiles: [
    '/workspace/redwoodjs-clerk-test/web/src/index.html',
    '\x00vite/modulepreload-polyfill',
    '/workspace/redwoodjs-clerk-test/web/src/entry.client.tsx',
    '/workspace/redwoodjs-clerk-test/node_modules/react/jsx-runtime.js',
    '/workspace/redwoodjs-clerk-test/node_modules/react-dom/client.js',
    '/workspace/redwoodjs-clerk-test/web/src/App.tsx',
    '/workspace/redwoodjs-clerk-test/node_modules/react/cjs/react-jsx-runtime.production.min.js',
    '/workspace/redwoodjs-clerk-test/node_modules/react-dom/index.js',
    '/workspace/redwoodjs-clerk-test/node_modules/react-dom/cjs/react-dom.production.min.js',
    '/workspace/redwoodjs-clerk-test/web/package.json',
    '/workspace/redwoodjs-clerk-test/node_modules/@redwoodjs/web/dist/index.js',
    '/workspace/redwoodjs-clerk-test/node_modules/@redwoodjs/web/apollo/index.js',
    '/workspace/redwoodjs-clerk-test/web/src/pages/FatalErrorPage/FatalErrorPage.tsx',
    '/workspace/redwoodjs-clerk-test/web/src/Routes.tsx',
    '/workspace/redwoodjs-clerk-test/web/src/auth.tsx',
    '/workspace/redwoodjs-clerk-test/web/src/index.css',
    '/workspace/redwoodjs-clerk-test/node_modules/react/index.js',
    '/workspace/redwoodjs-clerk-test/node_modules/@babel/runtime-corejs3/core-js/object/define-property.js',
    '/workspace/redwoodjs-clerk-test/node_modules/@babel/runtime-corejs3/core-js/instance/for-each.js',
    '/workspace/redwoodjs-clerk-test/node_modules/@babel/runtime-corejs3/core-js/object/keys.js',
    '/workspace/redwoodjs-clerk-test/node_modules/@babel/runtime-corejs3/helpers/interopRequireDefault.js',
    '/workspace/redwoodjs-clerk-test/node_modules/@redwoodjs/web/dist/global.web-auto-imports.js',
    '/workspace/redwoodjs-clerk-test/node_modules/@redwoodjs/web/dist/config.js',
    '/workspace/redwoodjs-clerk-test/node_modules/@redwoodjs/web/dist/assetImports.js',
    '/workspace/redwoodjs-clerk-test/node_modules/@redwoodjs/web/dist/components/FatalErrorBoundary.js',
    '/workspace/redwoodjs-clerk-test/node_modules/@redwoodjs/web/dist/components/FetchConfigProvider.js',
    '/workspace/redwoodjs-clerk-test/node_modules/@redwoodjs/web/dist/components/GraphQLHooksProvider.js',
    '/workspace/redwoodjs-clerk-test/node_modules/@redwoodjs/web/dist/components/CellCacheContext.js',
    '/workspace/redwoodjs-clerk-test/node_modules/@redwoodjs/web/dist/components/createCell.js',
    '/workspace/redwoodjs-clerk-test/node_modules/@redwoodjs/web/dist/graphql.js',
    '/workspace/redwoodjs-clerk-test/node_modules/@redwoodjs/web/dist/components/RedwoodProvider.js',
    '/workspace/redwoodjs-clerk-test/node_modules/@redwoodjs/web/dist/components/MetaTags.js',
    '/workspace/redwoodjs-clerk-test/node_modules/react-helmet-async/lib/index.module.js',
    '/workspace/redwoodjs-clerk-test/node_modules/@redwoodjs/web/dist/apollo/index.js',
    '/workspace/redwoodjs-clerk-test/node_modules/react/cjs/react.production.min.js'
  ]
}

Node.js v20.9.0
vite v4.5.1 building for production...
transforming...
✓ 5 modules transformed.
✓ built in 363ms
    at makeError (/workspace/redwoodjs-clerk-test/node_modules/execa/lib/error.js:60:11)
    at handlePromise (/workspace/redwoodjs-clerk-test/node_modules/execa/index.js:118:26)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async _Task.task [as taskFn] (/workspace/redwoodjs-clerk-test/node_modules/@redwoodjs/cli/dist/commands/buildHandler.js:117:9)
    at async _Task.run (/workspace/redwoodjs-clerk-test/node_modules/listr2/dist/index.cjs:2049:11)

[dthyresson]

@dac09 Could you take a quick look at this issue? I'm not 100% sure it's Clerk related or not.

I removed all Clerk packages and removed auth (in a GitPod build) and the error still presented itself on build.

If it is auth/Clerk, then I can help diagnose and work with them, but just want a second look from a vite PoV. Thanks!

[swrichards]

Thanks for the prompt response @dthyresson.

Just to clarify the context of my initial issue: the repo I shared contains no alterations to the generated code from yarn create redwood-app redwoodjs-clerk-test --typescript other than those explicitly listed in the docs. I just quickly went through the steps again locally and was able to reproduce the issue from a fresh project.

[dthyresson]

@swrichards I just did the following steps:

• yarn create redwood-app --ts clerk-issue-triage
• cd clerk-issue-triage
• yarn rw setup auth clerk
• • set .env to

CLERK_PUBLISHABLE_KEY=pk_test_foobar
CLERK_SECRET_KEY=sk_test_foobar

• Set redwood.toml to have

[web]
  title = "Redwood App"
  port = 8910
  apiUrl = "/.redwood/functions" # You can customize graphql and dbauth urls individually too: see https://redwoodjs.com/docs/app-configuration-redwood-toml#api-paths
  includeEnvironmentVariables = [
    "CLERK_PUBLISHABLE_KEY",
  ]

When I run yarn rw build no errors.

When I start the dev server: yarn rw dev

I get a different error:

I assume when you are in dev you are using proper, valid api keys? Just checking.

[dthyresson]

Note, my package versions appear to be same as yours:

"dependencies": {
    "@clerk/clerk-react": "^4",
    "@redwoodjs/auth-clerk-web": "6.5.1",
    "@redwoodjs/forms": "6.5.1",
    "@redwoodjs/router": "6.5.1",
    "@redwoodjs/web": "6.5.1",
    "prop-types": "15.8.1",
    "react": "18.2.0",
    "react-dom": "18.2.0"
  },
  "devDependencies": {
    "@redwoodjs/vite": "6.5.1",
    "@types/react": "18.2.37",
    "@types/react-dom": "18.2.15"
  }

[swrichards]

@dthyresson Following the steps you've just outlined, I am indeed able to run both yarn rw build and yarn rw dev without errors. For reference, you can use the following .env to get well-formed Clerk keys (the underlying Clerk application has since been deleted):

CLERK_PUBLISHABLE_KEY=pk_test_Y3VycmVudC1zd2luZS0xNy5jbGVyay5hY2NvdW50cy5kZXYk
CLERK_SECRET_KEY=sk_test_XMlXJzM9cxDWf7d5ZPLhH2HP3RwDhTAh6DwYjDFfhb

The error appears as soon as I proceed to the next step in the docs, that is to create web/src/pages/HomePage.tsx with the following content:

import { useAuth } from 'src/auth'

const HomePage = () => {
  const { isAuthenticated, signUp } = useAuth()

  return (
    <>
      {/* MetaTags, h1, paragraphs, etc. */}

      <p>{JSON.stringify({ isAuthenticated })}</p>
      <button onClick={signUp}>sign up</button>
    </>
  )
}

With this file present, the error appears in both yarn rw dev and yarn rw build.

EDIT:

The package versions match up too:

  "dependencies": {
    "@clerk/clerk-react": "^4",
    "@redwoodjs/auth-clerk-web": "6.5.1",
    "@redwoodjs/forms": "6.5.1",
    "@redwoodjs/router": "6.5.1",
    "@redwoodjs/web": "6.5.1",
    "prop-types": "15.8.1",
    "react": "18.2.0",
    "react-dom": "18.2.0"
  },
  "devDependencies": {
    "@redwoodjs/vite": "6.5.1",
    "@types/react": "18.2.37",
    "@types/react-dom": "18.2.15"
  }

[dthyresson]

Very strange. I added the HomePage, as you described and see:

The sign up isn't working due to

But I didn't get a build error. Very odd indeed.

[swrichards]

Should web/src/pages/HomePage.tsx be web/src/pages/HomePage/HomePage.tsx, as in you screenshot?

[dthyresson]

Wow! @swrichards That reproduces!

If I don't have my page inside the folder:

/.../clerk-issue-triage/web/src/pages/HomePage.tsx

I get the error:

Expected identifier but found "="
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/dthyresson/Dropbox/Code/throwaways/clerk-issue-triage/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
   |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         ^
2  |  // directories are supported, and should be uppercase. Each subdirectory will be
3  |  // prepended onto the component name.

I always create pages via

yarn rw g page Home /

So I would never have thought to have the page elsewhere.

And I was able to reproduce with Clerk at all:

• yarn create redwood-app --ts page-path
• Manually add a route:

const Routes = () => {
  return (
    <Router>
      <Route path="/" page={HomePage} name="home" />
      <Route notfound page={NotFoundPage} />
    </Router>
  )
}

• Manually add a page -- but in /pages/HomePage.tsx not via generator

And I get the error.

Thanks for noticing that. Now with a reproducible case, I can direct the team to the router or site to see what's the case.

And to fix that documentation as it is incorrect.

[swrichards]

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

[dthyresson]

@Tobbe This turned out not to be an auth issue, but a more general page/routing issue when a page is stored in just the /pages directory.

I am not certain if this is a routing or a vite issue, but assigning you to delegate. Thanks.

[dthyresson]

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

Thanks again for finding this. I just PR'd small docs fix so hopefully this won't trip people up in future:

#9662

[swrichards]

I also believe there is a small typo in the post-setup notes for Clerk: #9661.

[Tobbe]

Sorry I didn't notice this one sooner. The notification got lost in the sea of other GH notifications...

Redwood's automatic lazy loading of pages only works with pages that follow the pages/PageNamePage/PageNamePage.tsx convention. You're free to place your pages anywhere you want, and name them whatever suits you best, but then you're on your own to import them into the router file.

That said, maybe error handling/messaging could be better here, but feels like pretty low priority right now.