How to use drizzle-zod generated schemas in Next.JS frontend?

I'm currently using the pages dir in Next.JS and I have a function making an API call. I want to pass the returned body into the generated zod schema using zod and drizzle-zod. The problem is, when I import any created schema, I receive this error:
⨯ ../../node_modules/.pnpm/[email protected]/node_modules/postgres/cjs/src/connection.js:1:0
Module not found: Can't resolve 'net'

https://nextjs.org/docs/messages/module-not-found

Import trace for requested module:
../../node_modules/.pnpm/[email protected]/node_modules/postgres/cjs/src/index.js
../../packages/db/dist/db/client.js
../../packages/db/dist/index.js
./src/pages/manage/classes/index.tsx
⨯ ../../node_modules/.pnpm/[email protected]/node_modules/postgres/cjs/src/connection.js:1:0
Module not found: Can't resolve 'net'

https://nextjs.org/docs/messages/module-not-found

Import trace for requested module:
../../node_modules/.pnpm/[email protected]/node_modules/postgres/cjs/src/index.js
../../packages/db/dist/db/client.js
../../packages/db/dist/index.js
./src/pages/manage/classes/index.tsx
This leads me to believe that I can't use my zod schemas because they depend on the drizzle table created with pgTable, which relies on net. Is there a way around this?
2 Replies
THE MASTER
THE MASTER10mo ago
did u find the answer to this @nico ?
nico
nico10mo ago
My solution was to edit next.config.js with this:
webpack: (config, { isServer }) => {
if (!isServer) {
config.resolve.alias["net"] = false;
config.resolve.alias["tls"] = false;
config.resolve.alias["fs"] = false;
}
return config;
},
webpack: (config, { isServer }) => {
if (!isServer) {
config.resolve.alias["net"] = false;
config.resolve.alias["tls"] = false;
config.resolve.alias["fs"] = false;
}
return config;
},
Want results from more Discord servers?
Add your server