Giter VIP home page Giter VIP logo

Comments (16)

swrichards avatar swrichards commented on June 11, 2024 1

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

dthyresson avatar dthyresson commented on June 11, 2024

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:

image

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.

dthyresson avatar dthyresson commented on June 11, 2024

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

dthyresson avatar dthyresson commented on June 11, 2024

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.

dthyresson avatar dthyresson commented on June 11, 2024

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

swrichards avatar swrichards commented on June 11, 2024

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.

dthyresson avatar dthyresson commented on June 11, 2024

@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:

image

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

from redwood.

dthyresson avatar dthyresson commented on June 11, 2024

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.

swrichards avatar swrichards commented on June 11, 2024

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

dthyresson avatar dthyresson commented on June 11, 2024

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

image

The sign up isn't working due to

image

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

from redwood.

swrichards avatar swrichards commented on June 11, 2024

Screenshot 2023-12-12 at 16 48 30

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

from redwood.

dthyresson avatar dthyresson commented on June 11, 2024

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.

dthyresson avatar dthyresson commented on June 11, 2024

@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 avatar dthyresson commented on June 11, 2024

@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

from redwood.

swrichards avatar swrichards commented on June 11, 2024

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

from redwood.

Tobbe avatar Tobbe commented on June 11, 2024

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)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo 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.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.