Comments (16)
@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 👍 .
from redwood.
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.
from redwood.
@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.
from redwood.
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)
from redwood.
@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!
from redwood.
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.
from redwood.
@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.
from redwood.
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"
}
from redwood.
@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"
}
from redwood.
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.
from redwood.
Should web/src/pages/HomePage.tsx
be web/src/pages/HomePage/HomePage.tsx
, as in you screenshot?
from redwood.
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.
from redwood.
@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.
from redwood.
@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:
from redwood.
I also believe there is a small typo in the post-setup notes for Clerk: #9661.
from redwood.
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.
from redwood.
Related Issues (20)
- [Bug?]: Developer UX for large applications is poor HOT 3
- feat: Setup GraphQL Trusted Documents with a setup command HOT 2
- [Bug?]: ts/js files placed inside of web/src are getting served instead of serving the proper route HOT 5
- [Docs]: how functions work in a PaaS environments like Render.com HOT 4
- [Docs]: Chapter 5 of the Tutorial uses an old format of Storybook HOT 1
- [Bug?]: `yarn rw test` causes antivirus program to warn me about access to folder on Mac OS HOT 14
- [Docs]: <Set private> is deprecated, used within Router docs HOT 1
- [Docs]: Confusion regarding the SUPERTOKENS_* env variables in generated code HOT 10
- [Bug?]: Generators Cannot read properties of undefined (reading 'startsWith') HOT 5
- [Bug?]: Invalid SDL generated with certain Prisma models that lack editable fields HOT 2
- [Bug?]: Prisma Model with Bytes field fails SDL generation in Service Test template HOT 4
- [Bug]: Cell generation does not support the Custom Prisma Id Field that Scaffolding Supports
- [Bug?]: FastifyError [Error]: The decorator 'urlData' has already been added! HOT 2
- [Docs]: Firebase setup
- [Docs]: Authentication and routes HOT 1
- Change auth impersonation in Studio to not use Request body HOT 1
- Error in Redwood Studio HOT 6
- [Bug]: yarn create redwood-app ... stopped by ERR_IMPORT_ASSERTION_TYPE_MISSING HOT 4
- [Bug?]: url search parameter is erased if originated from outside the app (via redirection) HOT 4
- [Bug?]: the teardown in jest.setup is attempting to delete data from views HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from redwood.