Open swrichards opened 9 months ago
dthyresson
commented
9 months ago 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
commented
9 months ago @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
commented
9 months ago 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)@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
commented
9 months ago 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
commented
9 months ago @swrichards I just did the following steps:
CLERK_PUBLISHABLE_KEY=pk_test_foobar
CLERK_SECRET_KEY=sk_test_foobar[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
commented
9 months ago 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"
}@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_XMlXJzM9cxDWf7d5ZPLhH2HP3RwDhTAh6DwYjDFfhbThe 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"
}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
commented
9 months ago Should web/src/pages/HomePage.tsx be web/src/pages/HomePage/HomePage.tsx, as in you screenshot?
dthyresson
commented
9 months ago Wow! @swrichards That reproduces!
If I don't have my page inside the folder:
/.../clerk-issue-triage/web/src/pages/HomePage.tsxI 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
commented
9 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 👍 .
dthyresson
commented
9 months ago @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
commented
9 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 👍 .
Thanks again for finding this. I just PR'd small docs fix so hopefully this won't trip people up in future:
swrichards
commented
9 months ago I also believe there is a small typo in the post-setup notes for Clerk: #9661.
Tobbe
commented
8 months ago 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.
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:How do we reproduce the bug?
nvm:nvm useyarn install.envwith dummy values:yarn rw devWhat's your environment? (If it applies)
Are you interested in working on this?