fix build errors

apps/studio-next/next.config.js

@@ -1,3 +1,6 @@
+const crawlers = require('crawler-user-agents');
+
+const crawlerPattern = crawlers.map(crawler => crawler.pattern).join('|');
 /** @type {import('next').NextConfig} */
 const nextConfig = {
   webpack: (
@@ -45,7 +48,7 @@ const nextConfig = {
           {
             type: "header",
             key: "User-Agent",
-            value: "(redditbot|facebookexternalhit|Slackbot|Twitterbot|whatsapp)"
+            value: crawlerPattern
           },
         ],
       },

apps/studio-next/package.json

@@ -16,31 +16,33 @@
     "@asyncapi/protobuf-schema-parser": "^3.2.8",
     "@asyncapi/react-component": "^1.2.2",
     "@asyncapi/specs": "^6.5.4",
+    "@codemirror/view": "^6.26.3",
     "@ebay/nice-modal-react": "^1.2.10",
     "@headlessui/react": "^1.7.4",
     "@hookstate/core": "^4.0.0-rc21",
     "@monaco-editor/react": "^4.4.6",
-    "@tippyjs/react": "^4.2.6",
-    "js-base64": "^3.7.3",
-    "js-file-download": "^0.4.12",
-    "js-yaml": "^4.1.0",
-    "monaco-editor": "0.34.1",
-    "monaco-yaml": "4.0.2",
-    "react-hot-toast": "2.4.0",
-    "react-icons": "^4.6.0",
-    "reactflow": "^11.2.0",
     "@stoplight/yaml": "^4.3.0",
-    "@codemirror/view": "^6.26.3",
+    "@tippyjs/react": "^4.2.6",
     "@types/node": "20.4.6",
     "@types/react": "18.2.18",
     "@types/react-dom": "18.2.7",
     "autoprefixer": "10.4.14",
     "codemirror": "^6.0.1",
+    "crawler-user-agents": "^1.0.142",
     "eslint-config-next": "13.4.12",
+    "js-base64": "^3.7.3",
+    "js-file-download": "^0.4.12",
+    "js-yaml": "^4.1.0",
+    "monaco-editor": "0.34.1",
+    "monaco-yaml": "4.0.2",
     "next": "14.2.3",
     "postcss": "8.4.31",
     "react": "18.2.0",
     "react-dom": "18.2.0",
+    "react-hot-toast": "2.4.0",
+    "react-icons": "^4.6.0",
+    "reactflow": "^11.2.0",
+    "sharp": "^0.33.4",
     "tailwindcss": "3.3.3",
     "tippy.js": "^6.3.7",
     "typescript": "5.1.6",

apps/studio-next/src/middleware.ts

@@ -1,13 +1,8 @@
 import { NextRequest, NextResponse, userAgent } from "next/server";
+import crawlers from 'crawler-user-agents';
 
 export async function middleware(request: NextRequest) {
-  const userAgents = [
-    "redditbot",
-    "facebookexternalhit",
-    "Slackbot",
-    "Twitterbot",
-    "whatsapp",
-  ];
+  const userAgents = crawlers.map(crawler => crawler.pattern);
   const requestInfo = userAgent(request);
   const res = NextResponse.next();
   for (const ua of userAgents) {