resolve module paths in a proper way

.gitignore

@@ -1,6 +1,7 @@
 # editor
 .idea
 .vscode
+.vim
 
 # dependencies
 **/node_modules

packages/components/src/utils.ts

@@ -199,27 +199,6 @@ export function handleErrorMessage(error: any): string {
     return errorMessage
 }
 
-/**
- * Returns the path of node modules package
- * @param {string} packageName
- * @returns {string}
- */
-export const getNodeModulesPackagePath = (packageName: string): string => {
-    const checkPaths = [
-        path.join(__dirname, '..', 'node_modules', packageName),
-        path.join(__dirname, '..', '..', 'node_modules', packageName),
-        path.join(__dirname, '..', '..', '..', 'node_modules', packageName),
-        path.join(__dirname, '..', '..', '..', '..', 'node_modules', packageName),
-        path.join(__dirname, '..', '..', '..', '..', '..', 'node_modules', packageName)
-    ]
-    for (const checkPath of checkPaths) {
-        if (fs.existsSync(checkPath)) {
-            return checkPath
-        }
-    }
-    return ''
-}
-
 /**
  * Get input variables
  * @param {string} paramValue

packages/server/src/NodesPool.ts

@@ -1,7 +1,6 @@
 import { IComponentNodes, IComponentCredentials } from './Interface'
 import path from 'path'
 import { Dirent } from 'fs'
-import { getNodeModulesPackagePath } from './utils'
 import { promises } from 'fs'
 import { ICommonObject } from 'flowise-components'
 import logger from './utils/logger'
@@ -24,7 +23,7 @@ export class NodesPool {
      * Initialize nodes
      */
     private async initializeNodes() {
-        const packagePath = getNodeModulesPackagePath('flowise-components')
+        const packagePath = path.dirname(require.resolve('flowise-components/package.json'))
         const nodesPath = path.join(packagePath, 'dist', 'nodes')
         const nodeFiles = await this.getFiles(nodesPath)
         return Promise.all(
@@ -81,7 +80,7 @@ export class NodesPool {
      * Initialize credentials
      */
     private async initializeCredentials() {
-        const packagePath = getNodeModulesPackagePath('flowise-components')
+        const packagePath = path.dirname(require.resolve('flowise-components/package.json'))
         const nodesPath = path.join(packagePath, 'dist', 'credentials')
         const nodeFiles = await this.getFiles(nodesPath)
         return Promise.all(

packages/server/src/index.ts

@@ -1,25 +1,25 @@
-import express from 'express'
-import { Request, Response } from 'express'
-import path from 'path'
 import cors from 'cors'
-import http from 'http'
+import express, { Request, Response } from 'express'
 import basicAuth from 'express-basic-auth'
+import { buildRoot } from 'flowise-ui'
+import http from 'http'
+import path from 'path'
 import { Server } from 'socket.io'
 import { DataSource } from 'typeorm'
-import { IChatFlow } from './Interface'
-import { getNodeModulesPackagePath, getEncryptionKey } from './utils'
-import logger, { expressRequestLogger } from './utils/logger'
+import { CachePool } from './CachePool'
+import { ChatflowPool } from './ChatflowPool'
 import { getDataSource } from './DataSource'
+import { IChatFlow } from './Interface'
 import { NodesPool } from './NodesPool'
 import { ChatFlow } from './database/entities/ChatFlow'
-import { ChatflowPool } from './ChatflowPool'
-import { CachePool } from './CachePool'
-import { initializeRateLimiter } from './utils/rateLimit'
+import errorHandlerMiddleware from './middlewares/errors'
+import flowiseApiV1Router from './routes'
+import { getEncryptionKey } from './utils'
+import { getAllowedIframeOrigins, getCorsOptions, sanitizeMiddleware } from './utils/XSS'
 import { getAPIKeys } from './utils/apiKey'
-import { sanitizeMiddleware, getCorsOptions, getAllowedIframeOrigins } from './utils/XSS'
+import logger, { expressRequestLogger } from './utils/logger'
+import { initializeRateLimiter } from './utils/rateLimit'
 import { Telemetry } from './utils/telemetry'
-import flowiseApiV1Router from './routes'
-import errorHandlerMiddleware from './middlewares/errors'
 import { validateAPIKey } from './utils/validateKey'
 
 declare global {
@@ -215,11 +215,9 @@ export class App {
         // Serve UI static
         // ----------------------------------------
 
-        const packagePath = getNodeModulesPackagePath('flowise-ui')
-        const uiBuildPath = path.join(packagePath, 'build')
-        const uiHtmlPath = path.join(packagePath, 'build', 'index.html')
+        const uiHtmlPath = path.join(buildRoot, 'index.html')
 
-        this.app.use('/', express.static(uiBuildPath))
+        this.app.use('/', express.static(buildRoot))
 
         // All other requests not handled will return React app
         this.app.use((req: Request, res: Response) => {

packages/server/src/utils/index.ts

@@ -88,19 +88,10 @@ export const getUserHome = (): string => {
  * @returns {string}
  */
 export const getNodeModulesPackagePath = (packageName: string): string => {
-    const checkPaths = [
-        path.join(__dirname, '..', 'node_modules', packageName),
-        path.join(__dirname, '..', '..', 'node_modules', packageName),
-        path.join(__dirname, '..', '..', '..', 'node_modules', packageName),
-        path.join(__dirname, '..', '..', '..', '..', 'node_modules', packageName),
-        path.join(__dirname, '..', '..', '..', '..', '..', 'node_modules', packageName)
-    ]
-    for (const checkPath of checkPaths) {
-        if (fs.existsSync(checkPath)) {
-            return checkPath
-        }
-    }
-    return ''
+    const packagePath = require.resolve(packageName)
+
+    console.log({ packagePath })
+    return packagePath
 }
 
 /**

packages/ui/main.js

@@ -0,0 +1,2 @@
+const path = require('path')
+exports.buildRoot = path.resolve(__dirname, 'build')

packages/ui/package.json

@@ -7,6 +7,14 @@
         "name": "HenryHeng",
         "email": "[email protected]"
     },
+    "type": "commonjs",
+    "exports": {
+        ".": {
+            "types": "./types.d.ts",
+            "default": "./main.js"
+        }
+    },
+    "types": "./types.d.ts",
     "dependencies": {
         "@codemirror/lang-javascript": "^6.2.1",
         "@codemirror/lang-json": "^6.0.1",

packages/ui/src/hooks/useApi.jsx

@@ -1,6 +1,6 @@
 import { useState } from 'react'
 
-export default (apiFunc) => {
+export default function useApi(apiFunc) {
     const [data, setData] = useState(null)
     const [error, setError] = useState(null)
     const [loading, setLoading] = useState(false)

packages/ui/types.d.ts

@@ -0,0 +1 @@
+export declare const buildRoot: string