orjdev / create-jd-app Goto Github PK

View Code? Open in Web Editor NEW

637.0 12.0 26.0 977 KB

The quickest and most efficient way to start new full stack, type safed Solid web app

TypeScript 93.55% JavaScript 1.67% CSS 4.65% Shell 0.13%

trpc typescript vercel jdev t3 tailwindcss solidstart

create-jd-app's People

Contributors

Stargazers

Watchers

create-jd-app's Issues

pnpm start command not working - Cannot find module

node:internal/errors:484
    ErrorCaptureStackTrace(err);
    ^

Error [ERR_MODULE_NOT_FOUND]: Cannot find module '/Volumes/USER/PROJECT/dist/server.js' imported from /Volumes/USER/PROJECT/node_modules/.pnpm/[email protected]_xynn5awamdy4labhrna6bgjys4/node_modules/solid-start-node/index.js
    at new NodeError (node:internal/errors:393:5)
    at finalizeResolution (node:internal/modules/esm/resolve:323:11)
    at moduleResolve (node:internal/modules/esm/resolve:916:10)
    at defaultResolve (node:internal/modules/esm/resolve:1124:11)
    at nextResolve (node:internal/modules/esm/loader:163:28)
    at ESMLoader.resolve (node:internal/modules/esm/loader:841:30)
    at ESMLoader.getModuleJob (node:internal/modules/esm/loader:424:18)
    at ESMLoader.import (node:internal/modules/esm/loader:525:22)
    at importModuleDynamically (node:internal/modules/esm/translators:110:35)
    at importModuleDynamicallyCallback (node:internal/process/esm_loader:35:14) {
  code: 'ERR_MODULE_NOT_FOUND'
}

My project used to work but then suddenly I got this error. After trying to reinstall the node modules and that not working I tried to recreate the project via the cli. I don't know if there is something wrong on my machine or if there is some sort of bug. Does somebody know what is going on?

System:
Node version: v18.12.0
Package manager: pnpm
Operating system: MacOs

Renaming to t3solid

It's your choice really, but I think adding t3 to it would make it easier for people to discover and understand the underlaying technologies.

Could not resolve ".prisma/client/index-browser"

When you run a new project I get the error

GET http://localhost:3000/api/trpc/example.hello?batch=1&input=%7B%220%22%3A%7B%22name%22%3A%22from%20tRPC%22%7D%7D
✘ [ERROR] Could not resolve ".prisma/client/index-browser"

    node_modules/@prisma/client/index-browser.js:1:23:
      1 │ const prisma = require('.prisma/client/index-browser')
        ╵                        ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

  The Yarn Plug'n'Play manifest forbids importing ".prisma" here because it's not listed as a
  dependency of this package:

    ../../.pnp.cjs:45:33:
      45 │           "packageDependencies": [
         ╵                                  ^

  You can mark the path ".prisma/client/index-browser" as external to exclude it from the bundle,
  which will remove this error. You can also surround this "require" call with a try/catch block
  to handle this failure at run-time instead of bundle-time.

TypeError: __vite_ssr_import_0__.SolidAuth is not a function

Hello,
I ran npm run dev from npm create jd-app@latest and got the following error.

`? What is the name of the app? my-app
? Will you deploy this project to vercel? If so, how None
? What should we use for this app? AuthJS, Prisma, TailwindCSS, tRPC
cd my-app
npm run push // pushes db to Prisma
npm run dev

npm run push
prisma db push
npm run dev

8:22:44 [vite] Error when evaluating SSR module /src/routes/api/auth/[...solidauth].ts?pick=GET:
|- TypeError: vite_ssr_import_0.SolidAuth is not a function
at eval (C:/project/my-app/src/routes/api/auth/[...solidauth].ts?pick=GET:10:27)
at async instantiateModule (file:///C:/project/my-app/node_modules/vinxi/node_modules/vite/dist/node/chunks/dep-bb8a8339.js:56052:9)

[h3] [unhandled] TypeError: vite_ssr_import_0.SolidAuth is not a function
at eval (C:/project/my-app/src/routes/api/auth/[...solidauth].ts?pick=GET:10:27)
at async instantiateModule (file:///C:/project/my-app/node_modules/vinxi/node_modules/vite/dist/node/chunks/dep-bb8a8339.js:56052:9) {
cause: TypeError: vite_ssr_import_0.SolidAuth is not a function
at eval (C:/project/my-app/src/routes/api/auth/[...solidauth].ts?pick=GET:10:27)
at async instantiateModule (file:///C:/project/my-app/node_modules/vinxi/node_modules/vite/dist/node/chunks/dep-bb8a8339.js:56052:9),
statusCode: 500,
fatal: false,
unhandled: true,
statusMessage: undefined,
data: undefined
}`

Resolutions Errors

Mutliple resolution errors

Could not resolve "mock-aws-s3" (coming from @mapbox/node-pre)
Same thing for other requires coming from node-pre-gyp

Externalizing Prisma

I was impacted by this issue solidjs/solid-start#398

You might want to add these lines when installing Prisma:

import solid from "solid-start/vite";
import { defineConfig } from "vite";
import dotenv from "dotenv";

export default defineConfig(() => {
  dotenv.config();
  return {
    plugins: [solid({ ssr: true })],
+    ssr: {
+      external: ["@prisma/client"],
+    },
  };
});

As I'm not sure how to handle that, I will not create a PR for this one.

Remove tRPC v9 option

v10 is good. no need for v9

When generating TRPC app, it uses a dependency that is not open-source (source available anywhere)

The dependency used by the generated code, @solid-mediakit/trpc is not found in space nor time.

This is similar to the archived https://github.com/OrJDev/solid-trpc.

So where is this dependency found? It is private source unless the https://www.npmjs.com/package/@solid-mediakit/trpc?activeTab=readme points to a Github that is visible.

What's the deal here?

Can't import serverEnv from anything imported client-side (e.g. Co-located PRPC query + resolver)

If you do this you will get the error "Invalid environment variables" as the client doesn't share the same environment.
I did find a few solutions to this, but they're not perfect and I'm not sure if I'm missing something obvious.

Use isServer to conditionally populate the environment variables and then just lie to TypeScript at the type.
e.g. export let serverEnv: ServerSchema = null as unknown as ServerSchema; if (isServer) { ... populate serverEnv }
A big issue with this is that it still exposes your server environment keys in your client bundle (similar issue to t3-oss/t3-env#30)
Do the same as for step 1, then also define your schema as a TypeScript type only and define it again as a Zod object inside an isServer guard. (This is what I'm currently using but it doesn't feel that clean)
Use Vite / TypeScript imports to change the import for the client bundle (As described in vitejs/vite#4172 (comment))

Not working in Mono/Turborepo

Hi,
I've got the following error when trying to use Solid Start with SSR in my Turborepo

An unhandled error occured: TypeError: __vite_ssr_import_3__.getRequestEvent is not a function
    at MetaProvider (...project\node_modules\.pnpm\@[email protected][email protected]\node_modules\@solidjs\meta\dist\index.jsx:147:16)
    at Proxy.createComponent (file:///...project/node_modules/.pnpm/[email protected]/node_modules/solid-js/dist/server.js:349:15)
    at get children [as children] (...project\node_modules\.pnpm\[email protected]_@[email protected]_@[email protected][email protected]_solid-start-node@_rjluhh2athxyzueup5iy4wratm\node_modules\solid-start\entry-server\StartServer.tsx:86:16)
    at file:///...project/node_modules/.pnpm/[email protected]/node_modules/solid-js/dist/server.js:216:35
    at file:///...project/node_modules/.pnpm/[email protected]/node_modules/solid-js/dist/server.js:179:49
    at createMemo (file:///...project/node_modules/.pnpm/[email protected]/node_modules/solid-js/dist/server.js:95:9)
    at children (file:///...project/node_modules/.pnpm/[email protected]/node_modules/solid-js/dist/server.js:179:16)
    at file:///...project/node_modules/.pnpm/[email protected]/node_modules/solid-js/dist/server.js:216:14
    at createMemo (file:///...project/node_modules/.pnpm/[email protected]/node_modules/solid-js/dist/server.js:95:9)
    at provider (file:///...project/node_modules/.pnpm/[email protected]/node_modules/solid-js/dist/server.js:211:12)
    at Proxy.createComponent (file:///...project/node_modules/.pnpm/[email protected]/node_modules/solid-js/dist/server.js:349:15)
    at StartServer (...project\node_modules\.pnpm\[email protected]_@[email protected]_@[email protected][email protected]_solid-start-node@_rjluhh2athxyzueup5iy4wratm\node_modules\solid-start\entry-server\StartServer.tsx:81:3)
    at Proxy.createComponent (file:///...project/node_modules/.pnpm/[email protected]/node_modules/solid-js/dist/server.js:349:15)
    at ...project\apps\backend-ssr\src\entry-server.tsx:8:21
    at ...project\node_modules\.pnpm\[email protected]_@[email protected]_@[email protected][email protected]_solid-start-node@_rjluhh2athxyzueup5iy4wratm\node_modules\solid-start\server\render.ts:63:50
    at file:///...project/node_modules/.pnpm/[email protected]/node_modules/solid-js/web/dist/server.js:254:34
    at createRoot (file:///...project/node_modules/.pnpm/[email protected]/node_modules/solid-js/dist/server.js:58:14)
    at renderToStream (file:///...project/node_modules/.pnpm/[email protected]/node_modules/solid-js/web/dist/server.js:252:14)
    at Proxy.renderToStringAsync (file:///...project/node_modules/.pnpm/[email protected]/node_modules/solid-js/web/dist/server.js:114:24)
    at ...project\node_modules\.pnpm\[email protected]_@[email protected]_@[email protected][email protected]_solid-start-node@_rjluhh2athxyzueup5iy4wratm\node_modules\solid-start\server\render.ts:63:24
    at ...project\node_modules\.pnpm\[email protected]_@[email protected]_@[email protected][email protected]_solid-start-node@_rjluhh2athxyzueup5iy4wratm\node_modules\solid-start\server\middleware.ts:90:28
    at ...project\node_modules\.pnpm\[email protected]_@[email protected]_@[email protected][email protected]_solid-start-node@_rjluhh2athxyzueup5iy4wratm\node_modules\solid-start\api\middleware.ts:38:18
    at ...project\node_modules\.pnpm\[email protected]_@[email protected]_@[email protected][email protected]_solid-start-node@_rjluhh2athxyzueup5iy4wratm\node_modules\solid-start\entry-server\StartServer.tsx:50:7
    at devFetch (file:///...project/node_modules/.pnpm/[email protected]_@[email protected]_@[email protected][email protected]_solid-start-node@_rjluhh2athxyzueup5iy4wratm/node_modules/solid-start/dev/server.js:111:18)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async startHandler (file:///...project/node_modules/.pnpm/[email protected]_@[email protected]_@[email protected][email protected]_solid-start-node@_rjluhh2athxyzueup5iy4wratm/node_modules/solid-start/dev/server.js:134:20)

I'm using pnpm (nothing else quite workes with my turborepo setup), and installed the latest version of create-jd-app.
This happens regardless of the configuration of create-jd-app. Doesn't matter if I'm using the vercel adapter or not. Also doesn't matter if I choose to install any of the additional packages like trpc.

When disabling ssr in the vite.config.ts, I get a similar error in the client console: Uncaught SyntaxError: ambiguous indirect export: getRequestEvent

I've had a ton of problems with solidstart in a turbo repo in general, but I've got working envs with the 2.30 solid-start version.
I tried to update as I get renderToString timed out on every first(?) request/coldstart.

Tailwind classes not applied after save on dev

For some reason the app is not applying new tailwind classes when saving a file, it needs to reload the whole page for changes to be visible

Getting started, couple of issues 👀

Hello, I tried to initialize an app using this starter kit and got a few issues, would love some guidance! Not sure what I'm doing wrong!

I started a new project with the following config:

Deploy on vercel? None
What should we use?
- NextAuth
- Prisma
- Tailwind
- tRPC

After that I did:

npm run push
npm run build
npm run start   (I'm aware this is not the dev flow)

I got hit with this error:

> start
> solid-start start --port 3000

 solid-start start
 version  0.2.18
 adapter  node


  ➜  Page Routes:
     └─ http://localhost:3000/

  ➜  API Routes:
     ┌─  http://localhost:3000/api/auth/*solidauth GET | POST
     └─  http://localhost:3000/api/trpc/:trpc GET | POST

file:///private/var/folders/dv/2y16mb5d4xx4z2nbsg57mmbh0000gn/T/tmp.W0vnpZtg/my-app/dist/server.js:47022
                import_path2.default.join(__dirname, "../query-engine-darwin");
                                          ^

ReferenceError: __dirname is not defined in ES module scope
This file is being treated as an ES module because it has a '.js' file extension and '/private/var/folders/dv/2y16mb5d4xx4z2nbsg57mmbh0000gn/T/tmp.W0vnpZtg/my-app/package.json' contains "type": "module". To treat it as a CommonJS script, rename it to use the '.cjs' file extension.
    at file:///private/var/folders/dv/2y16mb5d4xx4z2nbsg57mmbh0000gn/T/tmp.W0vnpZtg/my-app/dist/server.js:47022:29
    at requireRuntime (file:///private/var/folders/dv/2y16mb5d4xx4z2nbsg57mmbh0000gn/T/tmp.W0vnpZtg/my-app/dist/server.js:59687:3)
    at file:///private/var/folders/dv/2y16mb5d4xx4z2nbsg57mmbh0000gn/T/tmp.W0vnpZtg/my-app/dist/server.js:59717:7
    at requireClient$1 (file:///private/var/folders/dv/2y16mb5d4xx4z2nbsg57mmbh0000gn/T/tmp.W0vnpZtg/my-app/dist/server.js:59902:3)
    at requireClient (file:///private/var/folders/dv/2y16mb5d4xx4z2nbsg57mmbh0000gn/T/tmp.W0vnpZtg/my-app/dist/server.js:59913:7)
    at file:///private/var/folders/dv/2y16mb5d4xx4z2nbsg57mmbh0000gn/T/tmp.W0vnpZtg/my-app/dist/server.js:59918:21
    at ModuleJob.run (node:internal/modules/esm/module_job:193:25)
    at async Promise.all (index 0)
    at async ESMLoader.import (node:internal/modules/esm/loader:530:24)

Did some digging and was able to fix it following this comment solidjs/solid-start#398 (comment)

Now npm run build and npm run start work fine, however, something is off as my requests take 7 seconds (on dev they are mostly instant).

I haven't touched any of the code yet:

❯ time curl localhost:3000 >/dev/null
  % Total    % Received % Xferd  Average Speed   Time    Time     Time  Current
                                 Dload  Upload   Total   Spent    Left  Speed
100  3562    0  3562    0     0    498      0 --:--:--  0:00:07 --:--:--   723
curl localhost:3000 > /dev/null  0.00s user 0.00s system 0% cpu 7.148 total

Thank you so much for this awesome setup! I'm just not sure what I'm doing wrong 😅

Latest Version of Tanstack Solid Query Breaking CreateJD

Steps to repdroduce:

Run through install steps
Install with TRPC and SSR
Run npm install
Run dev

Results:

It would seem there is an issue with the alpha version used for Tanstack Solid Query. Rolling back to 4.29 works fine.

build gets stuck while deploying on vercel with pnpm

When trying to deploy to vercel with pnpm, the build process gets stuck indefinitely

Query Client not exported

So I've just created a base app with trpc enabled and I'm getting an error saying.

I think the new QueryClient should either be trpc.useContext() or QueryClient from @tanstack/solid-query

Uncaught ReferenceError: global is not defined

Uncaught ReferenceError: global is not defined
    at db.ts:9:3

Im getting this error on the client on every page load.
This is probably on my end but I was wondering if anyone got any idea why this is?

Start script fails to run when using prisma.

Prisma `__dirname is not defined` when running `pnpm start`

Tested with both npm and pnpm. I also tried removing the postinstall script. That did not resolve the issue.

To Reproduce

pnpm  create jd-app@latest
# name does not matter
# select No when asked if you will be deploying to vercel
# select prisma
cd my-app
pnpm push
pnpm build
pnpm start

Full stdout: sourcebin link
Also attached below
error.txt

Manual Fix

I was able to fix this simply by adding the following to server.js near the top (before the first var is declared.):

const __dirname = dirname(fileURLToPath(import.meta.url));

My Specs:

Macbook Pro Intel
OS: Ventura 13.0.1
Node: v19.1.0
uname -a: Darwin Elis-MacBook-Pro.local 22.1.0 Darwin Kernel Version 22.1.0: Sun Oct 9 20:14:54 PDT 2022; root:xnu-8792.41.9~2/RELEASE_X86_64 x86_64

TSError: Prisma types referenced even when unselected

Problem:
The api route [...solidauth].ts has typescript errors upon creation

Steps to reproduce:
create a new jd application with the following settings (maybe flexible):

Vercel
SolidAuth
TailwindCSS
(notably, Prisma is not selected)

head over to src/routes/api/auth/[...solidauth].ts. Notice that the first line imports the type User from prisma, even though prisma is not installed.

Rate limiter in non-tRPC mode as middleware

Right now, when creating a template with a rate limiter without tRPC, the limit.ts GET endpoint is created. The file has the basic template to get started, but I'm not sure if that is sensible to create rate limiter as an endpoint.

My idea is to use Solid Start middleware for this usecase: https://start.solidjs.com/advanced/middleware
We probably want rate limiter to affect every route, as we do with the tRPC case, when we add it to the procedure.

I can file a PR if that sounds good to you, what do you think? @OrJDev

Account model missing `expires_in`

Created a project today choosing Prisma and (Next)Auth and immediately ran into difficulties trying to set up Google & Discord providers (didn't try any others).

Upon successful authentication on the provider side, I would receive the following error:

Click for error

AdapterError: 
Invalid `p.account.create()` invocation in
/node_modules/@next-auth/prisma-adapter/dist/index.js:19:42
16 },

17 updateUser: ({ id, ...data }) => p.user.update({ where: { id }, data }),

18 deleteUser: (id) => p.user.delete({ where: { id } }),

→ 19 linkAccount: (data) => p.account.create({

data: {

provider: 'discord',

type: 'oauth',

providerAccountId: '...',

access_token: '...',

expires_in: 604800,

~~~~~~~~~~

refresh_token: '...',

scope: 'email identify',

token_type: 'bearer',

userId: '...'

}

})
Unknown arg expires_in in data.expires_in for type AccountUncheckedCreateInput. Did you mean expires_at? Available args:

type AccountUncheckedCreateInput {

id?: String

userId: String

type: String

provider: String

providerAccountId: String

refresh_token?: String | Null

access_token?: String | Null

expires_at?: Int | Null

token_type?: String | Null

scope?: String | Null

id_token?: String | Null

session_state?: String | Null

}

at acc. (file:///node_modules/@auth/core/lib/init.js:133:31)

at async handleLogin (file:///node_modules/@auth/core/lib/callback-handler.js:172:13)

at async Module.callback (file:///node_modules/@auth/core/lib/routes/callback.js:46:50)

at async AuthInternal (file:///node_modules/@auth/core/lib/index.js:52:38)

at async Auth (file:///node_modules/@auth/core/index.js:95:30)

at async file:///node_modules/@auth/solid-start/index.js:39:17

at async Object.GET [as handler] (file:///node_modules/@auth/solid-start/index.js:61:14)

at async eval (/node_modules/solid-start/api/middleware.ts:23:16)

at async eval (/node_modules/solid-start/entry-server/StartServer.tsx:41:12)

at async devFetch (file:///node_modules/solid-start/dev/server.js:46:12)

at async startHandler (file:///node_modules/solid-start/dev/server.js:115:20)

[auth][error][AdapterError]: Read more at https://errors.authjs.dev#adaptererror

The error seems to suggest that the Prisma Account model is missing the expires_in column, which is included in the auth object returned from the provider and used to create the new record. Instead, the model is only set up with an expires_at column.

I fixed it by simply creating a migration to add the missing column. I'm guessing a similar fix for the repo itself would be to add that column to the model linked above.

It's puzzling though because the model is defined the same way in create-t3-app but it works fine there 🤨 So maybe some discrepancy between next auth & solid auth?

Application not starting

I created a new project with node 18.14.0

? Will you deploy this project to vercel? If so, how None

✔ Copied template files to /Users/neolivz/Work/rnd/t3/solid-dummy-flight
? What should we use for this app? AuthJS, TailwindCSS, tRPC
? Do you want to use SSR with tRPC? Yes

When I run npm run dev I get error

TypeError: Cannot read properties of undefined (reading 'type')
    at QueryObserver.onQueryUpdate (/node_modules/solid-trpc/dist/index.js:2573:16)
    at file:///Users/neolivz/Work/rnd/t3/solid-dummy-flight/node_modules/@tanstack/query-core/build/lib/query.mjs:389:18
    at Array.forEach (<anonymous>)
    at file:///Users/neolivz/Work/rnd/t3/solid-dummy-flight/node_modules/@tanstack/query-core/build/lib/query.mjs:388:23
    at Object.batch (file:///Users/neolivz/Work/rnd/t3/solid-dummy-flight/node_modules/@tanstack/query-core/build/lib/notifyManager.mjs:18:16)
    at #dispatch (file:///Users/neolivz/Work/rnd/t3/solid-dummy-flight/node_modules/@tanstack/query-core/build/lib/query.mjs:387:19)
    at Query.fetch (file:///Users/neolivz/Work/rnd/t3/solid-dummy-flight/node_modules/@tanstack/query-core/build/lib/query.mjs:238:21)
    at #executeFetch (/node_modules/solid-trpc/dist/index.js:2341:38)
    at QueryObserver.onSubscribe (/node_modules/solid-trpc/dist/index.js:2227:27)
    at QueryObserver.subscribe (/node_modules/solid-trpc/dist/index.js:1343:10)
    at createServerSubscriber (/node_modules/solid-trpc/dist/index.js:3090:21)
    at eval (/node_modules/solid-trpc/dist/index.js:3136:23)
    at new Promise (<anonymous>)
    at __vite_ssr_import_1__.createResource.initialValue (/node_modules/solid-trpc/dist/index.js:3134:12)
    at load (file:///Users/neolivz/Work/rnd/t3/solid-dummy-flight/node_modules/solid-js/dist/server.js:488:11)
    at Proxy.createResource (file:///Users/neolivz/Work/rnd/t3/solid-dummy-flight/node_modules/solid-js/dist/server.js:516:42)
    at createBaseQuery (/node_modules/solid-trpc/dist/index.js:3133:30)
    at createQuery (/node_modules/solid-trpc/dist/index.js:3220:10)
    at Object.useQuery (/node_modules/solid-trpc/dist/index.js:3398:12)
    at eval (/node_modules/solid-trpc/dist/index.js:1269:26)
    at Object.apply (/node_modules/solid-trpc/dist/index.js:646:14)
    at Home (/src/routes/index.tsx:25:58)
    at Proxy.createComponent (file:///Users/neolivz/Work/rnd/t3/solid-dummy-flight/node_modules/solid-js/dist/server.js:310:15)
    at shared.element.component.element.element [as outlet] (/node_modules/@solidjs/router/dist/routing.js:87:43)
    at get children [as children] (/node_modules/@solidjs/router/dist/components.jsx:102:22)
    at file:///Users/neolivz/Work/rnd/t3/solid-dummy-flight/node_modules/solid-js/dist/server.js:213:35
    at file:///Users/neolivz/Work/rnd/t3/solid-dummy-flight/node_modules/solid-js/dist/server.js:174:49
    at createMemo (file:///Users/neolivz/Work/rnd/t3/solid-dummy-flight/node_modules/solid-js/dist/server.js:83:9)
    at children (file:///Users/neolivz/Work/rnd/t3/solid-dummy-flight/node_modules/solid-js/dist/server.js:174:16)
    at file:///Users/neolivz/Work/rnd/t3/solid-dummy-flight/node_modules/solid-js/dist/server.js:213:14
    at createMemo (file:///Users/neolivz/Work/rnd/t3/solid-dummy-flight/node_modules/solid-js/dist/server.js:83:9)
    at provider (file:///Users/neolivz/Work/rnd/t3/solid-dummy-flight/node_modules/solid-js/dist/server.js:209:12)
    at Proxy.createComponent (file:///Users/neolivz/Work/rnd/t3/solid-dummy-flight/node_modules/solid-js/dist/server.js:310:15)
    at children (/node_modules/@solidjs/router/dist/components.jsx:99:46)
    at Show (file:///Users/neolivz/Work/rnd/t3/solid-dummy-flight/node_modules/solid-js/dist/server.js:375:68)
    at Proxy.createComponent (file:///Users/neolivz/Work/rnd/t3/solid-dummy-flight/node_modules/solid-js/dist/server.js:310:15)
    at Routes (/node_modules/@solidjs/router/dist/components.jsx:94:32)
    at Proxy.createComponent (file:///Users/neolivz/Work/rnd/t3/solid-dummy-flight/node_modules/solid-js/dist/server.js:310:15)
    at get children [as children] (/src/root.tsx:53:56)
    at get children [as children] (/node_modules/solid-start/error-boundary/ErrorBoundary.tsx:32:20)
    at error (file:///Users/neolivz/Work/rnd/t3/solid-dummy-flight/node_modules/solid-js/dist/server.js:412:41)
    at catchError (file:///Users/neolivz/Work/rnd/t3/solid-dummy-flight/node_modules/solid-js/dist/server.js:141:12)
    at file:///Users/neolivz/Work/rnd/t3/solid-dummy-flight/node_modules/solid-js/dist/server.js:412:12
    at createMemo (file:///Users/neolivz/Work/rnd/t3/solid-dummy-flight/node_modules/solid-js/dist/server.js:83:9)
    at ErrorBoundary (file:///Users/neolivz/Work/rnd/t3/solid-dummy-flight/node_modules/solid-js/dist/server.js:410:3)
    at Proxy.createComponent (file:///Users/neolivz/Work/rnd/t3/solid-dummy-flight/node_modules/solid-js/dist/server.js:310:15)
    at ErrorBoundary (/node_modules/solid-start/error-boundary/ErrorBoundary.tsx:15:32)
    at Proxy.createComponent (file:///Users/neolivz/Work/rnd/t3/solid-dummy-flight/node_modules/solid-js/dist/server.js:310:15)
    at get children [as children] (/src/root.tsx:51:52)
    at file:///Users/neolivz/Work/rnd/t3/solid-dummy-flight/node_modules/solid-js/dist/server.js:616:39
    ```

No QueryClient set, use QueryClientProvider when using tRPC in server action

Setup

Will you deploy this project to vercel? If so, how None
What should we use for this app? tRPC
Do you want to use SSR with tRPC? Yes

Description

When I try to use tRPC on the server I get the following error

Error: No QueryClient set, use QueryClientProvider to set one
    at useQueryClient (/node_modules/.pnpm/[email protected]_@[email protected]_@[email protected]_@trpc+serve_rgpicpkohfucgjiz66s4i2bely/node_modules/solid-trpc/dist/index.js:3050:11)
    at eval (/node_modules/.pnpm/[email protected]_@[email protected]_@[email protected]_@trpc+serve_rgpicpkohfucgjiz66s4i2bely/node_modules/solid-trpc/dist/index.js:3080:57)
    at Proxy.createMemo (file:///home/user/dev/test/node_modules/.pnpm/[email protected]/node_modules/solid-js/dist/server.js:83:9)
    at createBaseQuery (/node_modules/.pnpm/[email protected]_@[email protected]_@[email protected]_@trpc+serve_rgpicpkohfucgjiz66s4i2bely/node_modules/solid-trpc/dist/index.js:3080:40)
    at createQuery (/node_modules/.pnpm/[email protected]_@[email protected]_@[email protected]_@trpc+serve_rgpicpkohfucgjiz66s4i2bely/node_modules/solid-trpc/dist/index.js:3220:10)
    at Object.useQuery (/node_modules/.pnpm/[email protected]_@[email protected]_@[email protected]_@trpc+serve_rgpicpkohfucgjiz66s4i2bely/node_modules/solid-trpc/dist/index.js:3398:12)
    at eval (/node_modules/.pnpm/[email protected]_@[email protected]_@trpc+clie
[email protected]_@trpc+serve_rgpicpkohfucgjiz66s4i2bely/node_modules/solid-trpc/dist/index.js:1269:26)
    at Object.apply (/node_modules/.pnpm/[email protected]_@[email protected]_@[email protected]_@trpc+serve_rgpicpkohfucgjiz66s4i2bely/node_modules/solid-trpc/dist/index.js:646:14)
    at Object.$$serverHandler0 (/src/routes/index.tsx:29:60)
    at execute (/node_modules/.pnpm/[email protected]_@[email protected]_@[email protected][email protected][email protected][email protected]/node_modules/solid-start/server/server-functions/server.ts:198:37)
    at Object.fn (/node_modules/.pnpm/[email protected]_@[email protected]_@[email protected][email protected][email protected][email protected]/node_modules/solid-start/server/server-functions/server.ts:210:12)
    at Module.handleServerRequest (/node_modules/.pnpm/[email protected]_@[email protected]_@[email protected][email protected][email protected][email protected]/node_modules/solid-start/server/server-functions/server.ts:173:34)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async eval (/node_modules/.pnpm/[email protected]_@[email protected]_@[email protected][email protected][email protected][email protected]/node_modules/solid-start/server/middleware.ts:41:30)
    at async eval (/node_modules/.pnpm/[email protected]_@[email protected]_@[email protected][email protected][email protected][email protected]/node_modules/solid-start/api/middleware.ts:33:12)
    at async eval (/node_modules/.pnpm/[email protected]_@[email protected]_@[email protected][email protected][email protected][email protected]/node_modules/solid-start/entry-server/StartServer.tsx:45:12)
    at async devFetch (file:///home/user/dev/test/node_modules/.pnpm/[email protected]_@[email protected]_@[email protected][email protected][email protected][email protected]/node_modules/solid-start/dev/server.js:46:12)
    at async startHandler (file:///home/user/dev/test/node_modules/.pnpm/[email protected]_@[email protected]_@[email protected][email protected][email protected][email protected]/node_modules/solid-start/dev/server.js:115:20)

Code Snippet

import { type VoidComponent } from 'solid-js';
import { redirect } from 'solid-start';
import { createServerAction$ } from 'solid-start/server';

import { trpc } from '~/utils/trpc';

const Home: VoidComponent = () => {
  // const hello = trpc.example.hello.useQuery(() => ({ name: 'from tRPC' }));

  const [_, { Form }] = createServerAction$(async (formData: FormData) => {
    try {
      const hello = trpc.example.hello.useQuery(() => ({ name: 'from tRPC' }));
      console.log(hello?.data);
    } catch (error) {
      console.log(error);
    }

    const name = formData.get('name');
    console.log(name);

    return redirect('/');
  });

  return (
    <main>
      {/* <p>{hello.data ?? 'Loading tRPC query'}</p> */}
      <Form>
        <input type="text" name="name" />
        <input type="submit">Submit</input>
      </Form>
    </main>
  );
};

export default Home;

Is there a step I am missing?

query client should not be shared between requests

As far as I'm aware, sharing an instance of QueryClient could result in leaking of user-specific data to other requests, since the cache is shared (correct me if I'm wrong).

The official tanstack example also re-creates the client on every request.

Suggested fix: update src/app.tsx to:

export default function App() {
  const queryClient = new QueryClient({
    // ...
  });

  // ...
}

unable to initialise - Command failed: npm install on installing vite

hi! i would love to check out this project but i'm unable to get it running. i'm on linux (ubuntu 20.04), node v16.17.0 and npm 8.15.0. when i run the init script, i'm getting an error related to npm install on vite package.

full output:

> npm create jd-app@latest

? What is the name of the app? solid-230225
? Do you want to overwrite this directory? Yes
✔ Emptied directory
? Will you deploy this project to vercel? If so, how None

✔ Copied template files to /home/r/workspace/solid-230225
? What should we use for this app? Prisma, TailwindCSS, tRPC
? Do you want to use SSR with tRPC? Yes

✔ Initialized 3 installers
✔ Modified project

Using NPM as package manager
✖ Couldn't install template dependencies: Command failed: npm install
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR! 
npm ERR! While resolving: solid-230225@undefined
npm ERR! Found: [email protected]
npm ERR! node_modules/vite
npm ERR!   dev vite@"^4.1.2" from the root project
npm ERR!   peer vite@"*" from [email protected]
npm ERR!   node_modules/solid-start-aws
npm ERR!     peerOptional solid-start-aws@"*" from [email protected]
npm ERR!     node_modules/solid-start
npm ERR!       solid-start@"^0.2.21" from the root project
npm ERR!       8 more (solid-start-aws, solid-start-cloudflare-pages, ...)
npm ERR!   6 more (solid-start-cloudflare-pages, ...)
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer vite@"^3.1.8" from [email protected]
npm ERR! node_modules/solid-start
npm ERR!   solid-start@"^0.2.21" from the root project
npm ERR!   peer solid-start@"*" from [email protected]
npm ERR!   7 more (solid-start-cloudflare-pages, ...)
npm ERR! 
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR! 
npm ERR! See /home/r/.npm/eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/r/.npm/_logs/2023-02-25T21_10_07_529Z-debug-0.log

npm ERR! code 1
npm ERR! path /home/r/workspace
npm ERR! command failed
npm ERR! command sh /tmp/npx-7d52fba7.sh

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/r/.npm/_logs/2023-02-25T21_09_56_287Z-debug-0.log

Allow users to load their own installers

So if you took a look at the code you could see that jd installers are very flexible and easy to modify / create

Installer for example

import { IInstaller } from "create-jd-app/types";

const config: IInstaller = (ctx) => ({
  files: [
    // copy from /files/entryClient.txt to the user-project/src/entry-client.tsx
    {
      path: `${__dirname}/files/entryClient.txt`,
      to: `${ctx.userDir}/src/entry-client.tsx`,
    },
  ],
  // this installer includes npm packages, and can use the context to change pkgs / versions
    "examplePackageName": {
      customVersion:
        ctx.installers.includes("dependOn") ? "1.0.0" : "latest",
    }
  },
});

export default config;

so I was wondering wether I should allow users to load their own installers,

How would it work

Creating A Project

npm create jd-app@latest

And custom installers (user's installers) should appear here aswell

Managing Installers

npx create-jd-app@latest -s

and then installers menu will pop up and user can choose where should jd-app import his installers from, ofc manage which ones will be ignored and maybe more cool things.

`useSession` doesn't work with CSR

Expectation: The app tells me that I'm logged in as a user by showing me "Logged in as XXXX"
Situation: Username is blank.

Steps to reproduce

Create new project with auth and prisma selected.
Add discord client id and secret into .env file.
Click log out.
Click log in and go through Discord's OAuth client.
Arriving at localhost:3000, the username is missing.

It seems like sessionData() isn't working as expected. Is this an issue with @auth/solid-start from the Auth.js library? Any help would be appreciated.

npm install error

Hi, when I try to npm install,
I got the following error

npm create jd-app@latest

? What is the name of the app? test-app
? Will you deploy this project to vercel? If so, how None

? What should we use for this app? AuthJS, Prisma, TailwindCSS, tRPC
√ Initialized 4 installers
√ Modified project

Using NPM as package manager
√ Installed dependencies
√ Ran queued commands

    cd test-app
    npm run push    // pushes db to Prisma
    npm run dev

cd test-app

npm install

npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR!
npm ERR! While resolving: [email protected]
npm ERR! Found: [email protected]
npm ERR! node_modules/solid-start
npm ERR! solid-start@"^0.3.7" from the root project
npm ERR! peer solid-start@"^0.3.7" from @solid-mediakit/[email protected]
npm ERR! node_modules/@solid-mediakit/auth
npm ERR! @solid-mediakit/auth@"^1.0.3" from the root project
npm ERR! 2 more (@solid-mediakit/trpc, solid-start-node)
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer solid-start@"^0.2.1" from [email protected]
npm ERR! node_modules/solid-start-trpc
npm ERR! solid-start-trpc@"^0.0.16" from the root project
npm ERR!
npm ERR! Conflicting peer dependency: [email protected]
npm ERR! node_modules/solid-start
npm ERR! peer solid-start@"^0.2.1" from [email protected]
npm ERR! node_modules/solid-start-trpc
npm ERR! solid-start-trpc@"^0.0.16" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.

Private procedures throwing unauthorized issue

Hi, I am facing some issues when trying to use the private procedures for my trpc procedures, I am new to the t3 stack and I can't seem to get this to work, whenever I call private procedures, they fail to get the session and crash my application

I am not sure if I am calling it wrongly or not but I assume that it should work as long as I am logged in, tried wrapping it inside a as well, please guide me 🙏🏼

I had been able to replicate this on postgres and on sqlite

clone a new example app from the create-jd-app
call a private procedure like the one in the example

const secret = trpc.example.secret.useQuery();
...
<div>{secret.data}</div>

it breaks the page and the console shows the unauthorized 401 error

data: {
    code: 'UNAUTHORIZED',
    httpStatus: 401,
    stack: 'TRPCError: You are not authorized to access this resource\n

Broken CLI

I'm getting error messages when I use the CLI.

node:internal/modules/cjs/loader:1146
  throw err;
  ^

Error: Cannot find module 'prettier'
Require stack:
- /tmp/bunx-1000-create-jd-app@latest/node_modules/create-jd-app/dist/utils/files.js
- /tmp/bunx-1000-create-jd-app@latest/node_modules/create-jd-app/dist/helpers/solid.js
- /tmp/bunx-1000-create-jd-app@latest/node_modules/create-jd-app/dist/utils/project.js
- /tmp/bunx-1000-create-jd-app@latest/node_modules/create-jd-app/dist/index.js
    at Module._resolveFilename (node:internal/modules/cjs/loader:1143:15)
    at Module._load (node:internal/modules/cjs/loader:984:27)
    at Module.require (node:internal/modules/cjs/loader:1231:19)
    at require (node:internal/modules/helpers:179:18)
    at Object.<anonymous> (/tmp/bunx-1000-create-jd-app@latest/node_modules/create-jd-app/dist/utils/files.js:42:36)
    at Module._compile (node:internal/modules/cjs/loader:1369:14)
    at Module._extensions..js (node:internal/modules/cjs/loader:1427:10)
    at Module.load (node:internal/modules/cjs/loader:1206:32)
    at Module._load (node:internal/modules/cjs/loader:1022:12)
    at Module.require (node:internal/modules/cjs/loader:1231:19) {
  code: 'MODULE_NOT_FOUND',
  requireStack: [
    '/tmp/bunx-1000-create-jd-app@latest/node_modules/create-jd-app/dist/utils/files.js',
    '/tmp/bunx-1000-create-jd-app@latest/node_modules/create-jd-app/dist/helpers/solid.js',
    '/tmp/bunx-1000-create-jd-app@latest/node_modules/create-jd-app/dist/utils/project.js',
    '/tmp/bunx-1000-create-jd-app@latest/node_modules/create-jd-app/dist/index.js'
  ]
}

Error: "route.outlet is not a function" on creating a new jd app

Hello, I just created a new jd app, and when running "npm run dev", a server launches, but the website has a big error saying "route.outlet is not a function". What does this mean? Did I install something incorrectly?

(solid query/trpc) does not hydrate properly

The trpc resolver is getting double-fetched, once on the server during SSR and once on client hydration.

Steps to reproduce:

update src/server/trpc/router/example.ts to:

  hello: procedure.input(z.object({ name: z.string() })).query(({ input }) => {
    const num = Math.random();
    console.log("hi", num);
    return `Hello ${input.name} ${num}`;
  }),

run the app
observe the SSR random number being displayed on page load and getting changed after a split-second.

Might be a tanstack query problem (their start example works properly, but is a couple start versions behind and updating it yields errors, so I gave up)

[Question] Using within createServerData$

Hey, I'm relatively new to meta-frameworks. From the documentation, https://start.solidjs.com/core-concepts/data-loading, it seems like there's a way to directly fetch the data on the server before even rendering (This should reduce the network calls).

Specifically:

import { For, createResource } from "solid-js";
import { useRouteData } from "solid-start";
import { createServerData$ } from "solid-start/server";
 
type Student = { name: string; house: string; }
 
export function routeData() {
  return createServerData$(() => hogwarts.students.list());
}
 
export default function Page() {
  const students = useRouteData<typeof routeData>();
 
  return (
    <ul>
      <For each={students()}>
        {(student) => <li>{student.name}</li>}
      </For>
    </ul>
  );
}

I would like to use the trpc call directly without the react-query layer ontop of it. So instead of:

  const { data, isLoading, error } = trpc.example.students.useQuery();

I would like to use the server fetching method, something like this:

import { For, createResource } from "solid-js";
import { useRouteData } from "solid-start";
import { createServerData$ } from "solid-start/server";
 
type Student = { name: string; house: string; }
 
export function routeData() {
  return createServerData$(() => trpc.example.students.query(() => ({
    name: "from tRPC",
  })));
}
 
export default function Page() {
  const students = useRouteData<typeof routeData>();
 
  return (
    <ul>
      <For each={students()}>
        {(student) => <li>{student.name}</li>}
      </For>
    </ul>
  );
}

How do i achieve this?

Allow user to create app in the directory they are currently in

It would be nice to be able to create the app in the directory you are currently in by specifying (.) as the project name. Many CLI apps allow this and it has become habit of mine to create the directory for my projects before running any cli commands in them.

And thanks for the hard work! You've saved me and many others hours in scaffolding time.

Include user.id on session

create-t3-app extends NextAuth's session to include the user's id. I think this project should consider doing the same.

t3-oss/create-t3-app#176
https://github.com/t3-oss/create-t3-app/pull/180/files

Unexpected token < in JSON at position 0

From what I can tell this an issue from release v0.1.25 up to the latest (at the time of creating this: v0.1.27)

? What is the name of the app? my-app
? Will you deploy this project to vercel? If so, how None
? What should we use for this app? TailwindCSS, tRPC
? Do you want to use SSR with tRPC? Yes

cd my-app
npm run dev

Then open http://127.0.0.1:3000/ in browser

You will then be presented with an error saying:
TRPCClientError: Unexpected token < in JSON at position 0 at Function.from (file:///***/node_modules/@trpc/client/dist/transformResult-6fb67924.mjs:13:16) at file:///***/node_modules/@trpc/client/dist/links/httpBatchLink.mjs:200:64 at processTicksAndRejections (node:internal/process/task_queues:96:5) { meta: undefined, shape: undefined, data: undefined, [cause]: SyntaxError: Unexpected token < in JSON at position 0 at JSON.parse (<anonymous>) at parseJSONFromBytes (***\node_modules\undici\lib\fetch\body.js:572:15) at successSteps (***\node_modules\undici\lib\fetch\body.js:512:23) at ***\node_modules\undici\lib\fetch\util.js:814:56 at node:internal/process/task_queues:141:7 at AsyncResource.runInAsyncScope (node:async_hooks:203:9) at AsyncResource.runMicrotask (node:internal/process/task_queues:138:8) at processTicksAndRejections (node:internal/process/task_queues:96:5) }

From my investigation this is due to a change in directory:
From: src\routes\api\trpc\[trpc].ts
To: src\routes\api\[trpc].ts

I was able to fix the issue in the generated project by making the following change:
File: src\utils\trpc.ts
Line: 19
From: "url: ${getBaseUrl()}/api/trpc,"
To: "url: ${getBaseUrl()}/api,"

The changes required to this repo are:
src\installers\tRPC\files\utils.txt (line 16): url: ${getBaseUrl()}/api/trpc, => url: ${getBaseUrl()}/api,
src\installers\tRPC\files\ssr-utils.txt (line 19): url: ${getBaseUrl()}/api/trpc, => url: ${getBaseUrl()}/api,

VITE_SESSION_SECRET

Thank you for this great utility!

In utils/auth.ts, you use:

secrets: [clientEnv.VITE_SESSION_SECRET],

According to the security notes in https://vitejs.dev/guide/env-and-mode.html#env-files:

Since any variables exposed to your Vite source code will end up in your client bundle, VITE_* variables should not contain any sensitive information.

Isn't it concerning or did I misunderstand something?

Add solid auth as an addon

Recently started working on authentication for solidStart

https://twitter.com/orjdevv/status/1593273214167400448?s=46&t=nMJTR7ksqsTGj85OB-0cMQ

Once its ready it will be added as an addon to create jd app

tRPC SSR adapter doesn't work in vercel production enviornment.

It's unclear whether the problem lies with the create jd-app or tRPC, but the tRPC server-side rendering (SSR) feature functions properly only in a local development environment. However, it fails to operate when deployed to Vercel.

route.outlet is not a function

I initialized a project with trpc, tailwind and AuthJS but when I try starting it with npm run dev I got the following error

AuthJs on Cloudflare Workers

This isn't an issue exactly, but I had to do some dumb hacky shit to get SolidStart+AuthJs+CloudflareWorkers working, so I created a minimal example repo to demo the process here https://github.com/AlexErrant/SolidStart_AuthJs_CloudflareWorkers

The hacks stemmed mostly from how Cloudflare Workers don't use process.env to inject environment variables, but instead puts them on the fetch parameter.

(Solid Start uses "Module Worker" syntax on Cloudflare Workers, which is important to know when trying to retrieve your secrets.)

Feel free to close since I have no thoughts on how to improve either CreateJDApp or AuthJs's SolidStart package (though NGL, export const POST = (x: PageEvent) => SolidAuth(authOpts(x.env)).POST(x) makes me roll my eyes).

trpc query options works not as expected 🧐

Hey! First of all, thank you for your template 🙌

I think this is more related to the tRPC + Tanstack Query adapter for solid, but in your doc for solid-trpc here it shows how to use the enabled property with a get method. I tried it but I got a TS error and a runtime error.

So from this that doesn't work

 const secret = trpc.example.secret.useQuery(undefined, {
    get enabled() {
      return !!session()
    },
  })

I did that, and it's working great

  const secret = trpc.example.secret.useQuery(undefined, () => ({
    enabled: !!session(),
  }))

The only issue I found is that refetchOnWindowFocus: true, doesn't work...
I didn't found anything about why, maybe you know? Or maybe this stack is not bullet proof or so for side projects? 🤷‍♂️

Thank's in advance 🙌