passlock-dev/passlock

Getting errors when trying to build and run the app locally

Closed this issue · 7 comments

kristianmandrup commented

I'm keen to use this app as the foundation for my AI agent app in Sveltekit, however I'm still "learning the ropes" and having trouble running the shadcn app.

I've tried the following:

$ pnpm -r install
$ pnpm -r build 
$ pnpm --filter sveltekit dev

When I build, I get the following error on an anchor href:

pnpm -r build   
Scope: 6 of 7 workspace projects
apps/sveltekit/preline build$ vite build
[150 lines collapsed]
│                           ^
│ 1036:                       class="inline-block size-[38px] rounded-full"
│ 1037:                       src="https://images.unsplash.com/photo-1670272505340-d906d8d77d03?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=2&w=320&h=320&q=80"
│ 19.58.24 [vite-plugin-svelte] /Users/kristian/repos/personal/svelte-apps/sveltekit-passlock-social-login/apps/sveltekit/preline/src/routes/(app)/app/+page.svelte:1096:20 A11y: '#' is not a valid href attribute
│ 1094:                   <a
│ 1095:                     class="inline-flex items-center gap-x-1 text-sm text-blue-600 decoration-2 hover:underline font-medium dark:text-blue-500"
│ 1096:                     href="#">
│                           ^
│ 1097:                     Edit
│ 1098:                   </a>
└─ Running...
apps/sveltekit/shadcn build$ vite build
│ vite v5.3.4 building SSR bundle for production...
│ transforming...
│ 19.58.24 [vite-plugin-svelte] /Users/kristian/repos/personal/svelte-apps/sveltekit-passlock-social-login/apps/sveltekit/shadcn/src/routes/(other)/+page.svelte:161:11 A11y: '#' is not a valid href attribute
│ 159:       <p class="px-8 text-center text-sm text-muted-foreground">
│ 160:         By creating an account, you agree to our
│ 161:         <a href="#" class="underline underline-offset-4 hover:text-primary">
│                 ^
│ 162:           Terms of Service
│ 163:         </a>
│ 19.58.24 [vite-plugin-svelte] /Users/kristian/repos/personal/svelte-apps/sveltekit-passlock-social-login/apps/sveltekit/shadcn/src/routes/(other)/+page.svelte:165:11 A11y: '#' is not a valid href attribute
│ 163:         </a>
│ 164:         and
│ 165:         <a href="#" class="underline underline-offset-4 hover:text-primary">
│                 ^
│ 166:           Privacy Policy
│ 167:         </a>
│ ✓ 35 modules transformed.
│ x Build failed in 242ms
│ error during build:
│ [vite]: Rollup failed to resolve import "@passlock/sveltekit/superforms" from "/Users/kristian/repos/personal/svelte-apps/sveltekit-passlock-social-login/apps/sveltekit/shadcn/src/routes/(other)/+page.svelte".
│ This is most likely unintended because it can break your application at runtime.
│ If you do want to externalize this module explicitly add it to
│ `build.rollupOptions.external`

Running on latest Mac OSX, versions

$ pnpm -v
9.6.0
$ node -v
v20.11.1
kristianmandrup commented

Additionally the following errors show up in VS Code:

image

thobson commented
kristianmandrup commented

Hi @thobson Thanks for the quick response!!

Regarding the public variables, this is just due to a missing .env file that I need to create: https://learn.svelte.dev/tutorial/env-static-public

The @passlock/sveltekit shows up in the local node_modules folder of the shadcn/sveltekit app, but I guess it is not built so it only has the raw src code, why it can't find it. The anchor issue looks a bit weird.

thobson commented

Can you try this...

Checkout the repo

Edit package.json and remove the @passlock/ overrides so you get something like this:

"pnpm": {
  "overrides": {
    "effect": "^3.4.8",
    "@effect/schema": "^0.68.18",
    "@aws-sdk/lib-dynamodb": "3.395.0",
    "@aws-sdk/client-dynamodb": "3.395.0",
    "@aws-sdk/client-sts": "3.606.0",
    "@aws-sdk/client-sso-oidc": "3.606.0"
  }
}

cd into apps/sveltekit/shadcn

Copy .env.example to .env and fill in the relevant entries (you can skip the Apple and Google stuff for now)

In the apps/sveltekit/shadcn directory:

run pnpm install then
pnpm run dev

Let me know how you get on..

kristianmandrup commented

Thanks, got it working now.
I made the package.json fix as suggested and did a fresh recursive install pnpm install -r
I then went into each of the modules in packages/ and built them in the right order (shared first) with pnpm build
Then I went into apps/sveltekit/shadcn and ran pnpm dev

image

kristianmandrup commented

Next step will be to try with the actual .env settings using real API keys etc. :)

thobson commented

Great. I’m glad it’s working. 💪

You shouldn’t actually need to build the dependencies because it should pull them from NPM. The reason it wasn’t working before was because the workspace package.json had overrides telling pnpm to use the local packages.

Btw I’m working on a new package so in future you’ll be able to create a new app using something like pnpm create @passlock/create-svelte-template.

The current approach is not ideal since moving to a monorepo structure.