Fix Dev Environment Errors & Docker Deployment (#279)

* fix prisma errors
* add new database build process
* fix js widget needing @prisma/client

apps/web/Dockerfile

@@ -7,7 +7,6 @@ COPY . .
 
 RUN pnpm install
 # Build the project
-RUN pnpm dlx prisma generate
 RUN pnpm turbo run build --filter=web...
 
 CMD pnpm dlx prisma migrate deploy && node /app/apps/web/.next/standalone/apps/web/server.js

apps/web/app/api/auth/[...nextauth]/authOptions.ts

@@ -1,7 +1,7 @@
 import { verifyPassword } from "@/lib/auth";
 import { verifyToken } from "@/lib/jwt";
 import { prisma } from "@formbricks/database";
-import { IdentityProvider } from "@prisma/client";
+import type { IdentityProvider } from "@formbricks/database/generated";
 import type { NextAuthOptions } from "next-auth";
 import CredentialsProvider from "next-auth/providers/credentials";
 import GitHubProvider from "next-auth/providers/github";

apps/web/app/environments/[environmentId]/attributes/AttributeActivityTab.tsx

@@ -2,7 +2,7 @@ import { Label } from "@formbricks/ui/Label";
 import { convertDateTimeStringShort } from "@formbricks/lib/time";
 import { capitalizeFirstLetter } from "@/lib/utils";
 import { TagIcon } from "@heroicons/react/24/solid";
-import type { AttributeClass } from "@prisma/client";
+import type { AttributeClass } from "@formbricks/database/generated";
 
 interface EventActivityTabProps {
   attributeClass: AttributeClass;

apps/web/app/environments/[environmentId]/attributes/AttributeDetailModal.tsx

@@ -1,6 +1,6 @@
 import ModalWithTabs from "@/components/shared/ModalWithTabs";
 import { TagIcon } from "@heroicons/react/24/solid";
-import type { AttributeClass } from "@prisma/client";
+import type { AttributeClass } from "@formbricks/database/generated";
 import AttributeActivityTab from "./AttributeActivityTab";
 import AttributeSettingsTab from "./AttributeSettingsTab";
 

apps/web/app/environments/[environmentId]/attributes/AttributeSettingsTab.tsx

@@ -3,7 +3,7 @@ import { Input } from "@formbricks/ui/Input";
 import { Label } from "@formbricks/ui/Label";
 import { useAttributeClasses } from "@/lib/attributeClasses/attributeClasses";
 import { useAttributeClassMutation } from "@/lib/attributeClasses/mutateAttributeClasses";
-import type { AttributeClass } from "@prisma/client";
+import type { AttributeClass } from "@formbricks/database/generated";
 import { useForm } from "react-hook-form";
 
 interface AttributeSettingsTabProps {

apps/web/app/environments/[environmentId]/events/EventDetailModal.tsx

@@ -1,6 +1,6 @@
 import ModalWithTabs from "@/components/shared/ModalWithTabs";
 import { CodeBracketIcon, CursorArrowRaysIcon, SparklesIcon } from "@heroicons/react/24/solid";
-import type { EventClass } from "@prisma/client";
+import type { EventClass } from "@formbricks/database/generated";
 import EventActivityTab from "./EventActivityTab";
 import EventSettingsTab from "./EventSettingsTab";
 

apps/web/lib/populate.ts

@@ -1,4 +1,4 @@
-import { EventType } from "@prisma/client";
+import { EventType } from "@formbricks/database/generated";
 export const populateEnvironment = {
   eventClasses: {
     create: [

apps/web/next.config.js

@@ -2,17 +2,21 @@
 
 const path = require("path");
 const Dotenv = require("dotenv-webpack");
+const { PrismaPlugin } = require("@prisma/nextjs-monorepo-workaround-plugin");
 
 const rootPath = path.join(__dirname, "..", "..");
 
 const { createId } = require("@paralleldrive/cuid2");
 
 const nextConfig = {
-  experimental: {
-    serverComponentsExternalPackages: ["@prisma/client"],
-  },
   output: "standalone",
-  transpilePackages: ["@formbricks/database", "@formbricks/ee", "@formbricks/ui", "@formbricks/lib"],
+  transpilePackages: [
+    "@formbricks/database",
+    "@formbricks/database/generated",
+    "@formbricks/ee",
+    "@formbricks/ui",
+    "@formbricks/lib",
+  ],
   images: {
     remotePatterns: [
       {
@@ -53,12 +57,15 @@ const nextConfig = {
       },
     ];
   },
-  webpack: (config) => {
+  webpack: (config, { isServer }) => {
     config.plugins.push(
       new Dotenv({
         path: path.resolve(rootPath, ".env"),
       })
     );
+    if (isServer) {
+      config.plugins = [...config.plugins, new PrismaPlugin()];
+    }
     return config;
   },
   env: {

apps/web/package.json

@@ -10,6 +10,7 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "@formbricks/database": "workspace:*",
     "@formbricks/ee": "workspace:*",
     "@formbricks/js": "workspace:*",
     "@formbricks/lib": "workspace:*",
@@ -52,9 +53,9 @@
     "typescript": "5.0.4"
   },
   "devDependencies": {
-    "@formbricks/database": "workspace:*",
     "@formbricks/tsconfig": "workspace:*",
     "@formbricks/types": "workspace:*",
+    "@prisma/nextjs-monorepo-workaround-plugin": "^4.14.0",
     "@tailwindcss/forms": "^0.5.3",
     "@tailwindcss/typography": "^0.5.9",
     "@types/bcryptjs": "^2.4.2",

apps/web/pages/api/v1/environments/[environmentId]/product/index.ts

@@ -1,6 +1,6 @@
 import { hasEnvironmentAccess } from "@/lib/api/apiHelper";
 import { prisma } from "@formbricks/database";
-import { EnvironmentType } from "@prisma/client";
+import { EnvironmentType } from "@formbricks/database/generated";
 import { populateEnvironment } from "@/lib/populate";
 import type { NextApiRequest, NextApiResponse } from "next";
 

apps/web/pages/api/v1/environments/find-first.ts

@@ -2,7 +2,7 @@ import { getSessionUser } from "@/lib/api/apiHelper";
 import { populateEnvironment } from "@/lib/populate";
 import { prisma } from "@formbricks/database";
 import type { NextApiRequest, NextApiResponse } from "next";
-import { EnvironmentType } from "@prisma/client";
+import { EnvironmentType } from "@formbricks/database/generated";
 
 export default async function handle(req: NextApiRequest, res: NextApiResponse) {
   // Check Authentication

apps/web/tsconfig.json

@@ -6,7 +6,7 @@
     "baseUrl": ".",
     "paths": {
       "@/*": ["./*"],
-      "@prisma/client/*": ["@formbricks/prisma/client/*"]
+      "@prisma/client/*": ["@formbricks/database/generated/client/*"]
     },
     "plugins": [
       {