search

VictorS67 / encre

MIT License
3 stars 1 forks source link

[BUG] Encre UI: Import `getRecordId()` and `extMap` from `internal` package cause blank page after build #113

Closed VictorS67 closed 3 weeks ago

VictorS67 commented 3 weeks ago

What happened?

When I run yarn workspace @encrejs/web start:browser and open http://localhost:3001/, I can only see blank page (500 Internal Error).

I found out that the error occurs because I import getRecordId() and extMap from internal/src/types/encre, where those are imported from @encrejs/api. I assume these imports brings some node-specific package into the React App. Please see the error message from console in below.

What was the expected behavior?

The pages should be rendered correctly. Currently, my workaround is mock getRecordId() and extMap in the React App. (see fakeId() in app/src/utils/fakeId, and expMap in app/src/components/descriptors/ImageDescriptor or app/src/components/descriptors/FileDescriptor or app/src/components/AudioVisualizer). But I'm expected better solution than this.

Describe your environment

MacOS 10.14.6

Node version: v20.15.0

Relevant log output

8:49:12 a.m. [vite] ✨ new dependencies optimized: @encrejs/core/events/embeddings/openai, @encrejs/core/events/input/load/docs, @encrejs/core/events/input/load/msgs, @encrejs/core/events/input/load/prompts, @encrejs/core/events/input/load/rules, @encrejs/core/events/input/load/vectorstore, @encrejs/core/events/output/provide, @encrejs/core/events/inference/chat/llms/openai, @encrejs/core/events/inference/chat/chatlms/openai, @encrejs/core/events/inference/chat/llms/gemini, @encrejs/core/events/inference/chat/chatlms/gemini, @encrejs/core/events/inference/retrieve/embedding/vectorstore, @encrejs/core/events/inference/validate/guardrails, @encrejs/core/events/inference/validate/validator, @encrejs/core/studio/graph, @encrejs/core/studio/condition, @encrejs/core/studio/input, @encrejs/core/studio/ui, @encrejs/core/studio/data, @encrejs/core/studio/processor, @encrejs/core/studio/scheduler, @encrejs/core/studio/nodes/base, @encrejs/core/studio/guardrails/base, @encrejs/core/studio/utils/coerce, @encrejs/core/studio/utils/display, @encrejs/core/studio/utils/load, @encrejs/core/studio/utils/save, @encrejs/core/studio/registration/guardrails, @encrejs/core/studio/registration/nodes, @encrejs/core/studio/nodes/inference/chat/chatlm, @encrejs/core/studio/nodes/inference/chat/llm, @encrejs/core/studio/nodes/inference/validate, @encrejs/core/studio/nodes/input/loader, @encrejs/core/studio/nodes/input/message, @encrejs/core/studio/nodes/input/prompt, @encrejs/core/studio/nodes/input/splitter, @encrejs/core/studio/nodes/utility/graph, @encrejs/core/studio/nodes/utility/if, @encrejs/core/studio/nodes/utility/input, @encrejs/core/studio/guardrails/data/array, @encrejs/core/studio/guardrails/data/boolean, @encrejs/core/studio/guardrails/data/number, @encrejs/core/studio/guardrails/data/object, @encrejs/core/studio/guardrails/data/string, @encrejs/core/utils/nanoid
8:49:12 a.m. [vite] ✨ optimized dependencies changed. reloading
8:49:13 a.m. [vite] Pre-transform error: Failed to resolve import "chromadb-default-embed" from "node_modules/.vite/deps/chunk-H74S34X7.js?v=135fc4c3". Does the file exist?
8:49:13 a.m. [vite] Pre-transform error: Failed to resolve import "chromadb-default-embed" from "node_modules/.vite/deps/chunk-H74S34X7.js?v=135fc4c3". Does the file exist? (x2)
8:49:13 a.m. [vite] Pre-transform error: Failed to resolve import "chromadb-default-embed" from "node_modules/.vite/deps/chunk-H74S34X7.js?v=135fc4c3". Does the file exist? (x3)
8:49:13 a.m. [vite] Pre-transform error: Failed to resolve import "chromadb-default-embed" from "node_modules/.vite/deps/chunk-H74S34X7.js?v=135fc4c3". Does the file exist? (x4)
8:49:13 a.m. [vite] Pre-transform error: Failed to resolve import "chromadb-default-embed" from "node_modules/.vite/deps/chunk-H74S34X7.js?v=135fc4c3". Does the file exist? (x5)
8:49:13 a.m. [vite] Pre-transform error: Failed to resolve import "chromadb-default-embed" from "node_modules/.vite/deps/chunk-H74S34X7.js?v=135fc4c3". Does the file exist? (x6)
8:49:13 a.m. [vite] Pre-transform error: Failed to resolve import "chromadb-default-embed" from "node_modules/.vite/deps/chunk-H74S34X7.js?v=135fc4c3". Does the file exist? (x7)
8:49:13 a.m. [vite] Pre-transform error: Failed to resolve import "chromadb-default-embed" from "node_modules/.vite/deps/chunk-H74S34X7.js?v=135fc4c3". Does the file exist? (x8)
8:49:13 a.m. [vite] Pre-transform error: Failed to resolve import "chromadb-default-embed" from "node_modules/.vite/deps/chunk-H74S34X7.js?v=135fc4c3". Does the file exist? (x9)
8:49:13 a.m. [vite] Pre-transform error: Failed to resolve import "chromadb-default-embed" from "node_modules/.vite/deps/chunk-H74S34X7.js?v=135fc4c3". Does the file exist? (x10)
8:49:13 a.m. [vite] Pre-transform error: Failed to resolve import "chromadb-default-embed" from "node_modules/.vite/deps/chunk-H74S34X7.js?v=135fc4c3". Does the file exist? (x11)
8:49:13 a.m. [vite] Pre-transform error: Failed to resolve import "chromadb-default-embed" from "node_modules/.vite/deps/chunk-H74S34X7.js?v=135fc4c3". Does the file exist? (x12)
8:49:13 a.m. [vite] Pre-transform error: Failed to resolve import "chromadb-default-embed" from "node_modules/.vite/deps/chunk-H74S34X7.js?v=135fc4c3". Does the file exist? (x13)
8:49:13 a.m. [vite] Pre-transform error: Failed to resolve import "chromadb-default-embed" from "node_modules/.vite/deps/chunk-H74S34X7.js?v=135fc4c3". Does the file exist? (x14)
8:49:13 a.m. [vite] Pre-transform error: Failed to resolve import "chromadb-default-embed" from "node_modules/.vite/deps/chunk-H74S34X7.js?v=135fc4c3". Does the file exist? (x15)
8:49:14 a.m. [vite] Pre-transform error: Failed to resolve import "chromadb-default-embed" from "node_modules/.vite/deps/chunk-H74S34X7.js?v=135fc4c3". Does the file exist? (x16)
8:49:14 a.m. [vite] Pre-transform error: Failed to resolve import "chromadb-default-embed" from "node_modules/.vite/deps/chunk-H74S34X7.js?v=135fc4c3". Does the file exist? (x17)
8:49:17 a.m. [vite] Pre-transform error: Failed to resolve import "chromadb-default-embed" from "node_modules/.vite/deps/chunk-H74S34X7.js?v=135fc4c3". Does the file exist? (x18)
8:49:17 a.m. [vite] Pre-transform error: Failed to resolve import "chromadb-default-embed" from "node_modules/.vite/deps/chunk-H74S34X7.js?v=135fc4c3". Does the file exist? (x19)
8:49:17 a.m. [vite] Pre-transform error: Failed to resolve import "chromadb-default-embed" from "node_modules/.vite/deps/chunk-H74S34X7.js?v=135fc4c3". Does the file exist? (x20)
8:49:17 a.m. [vite] Pre-transform error: Failed to resolve import "chromadb-default-embed" from "node_modules/.vite/deps/chunk-H74S34X7.js?v=135fc4c3". Does the file exist? (x21)
8:49:17 a.m. [vite] Pre-transform error: Failed to resolve import "chromadb-default-embed" from "node_modules/.vite/deps/chunk-H74S34X7.js?v=135fc4c3". Does the file exist? (x22)
8:49:17 a.m. [vite] Pre-transform error: Failed to resolve import "chromadb-default-embed" from "node_modules/.vite/deps/chunk-H74S34X7.js?v=135fc4c3". Does the file exist? (x23)
8:49:17 a.m. [vite] Pre-transform error: Failed to resolve import "chromadb-default-embed" from "node_modules/.vite/deps/chunk-H74S34X7.js?v=135fc4c3". Does the file exist? (x24)
8:49:17 a.m. [vite] Pre-transform error: Failed to resolve import "chromadb-default-embed" from "node_modules/.vite/deps/chunk-H74S34X7.js?v=135fc4c3". Does the file exist? (x25)
8:49:17 a.m. [vite] Pre-transform error: Failed to resolve import "chromadb-default-embed" from "node_modules/.vite/deps/chunk-H74S34X7.js?v=135fc4c3". Does the file exist? (x26)
8:49:17 a.m. [vite] Pre-transform error: Failed to resolve import "chromadb-default-embed" from "node_modules/.vite/deps/chunk-H74S34X7.js?v=135fc4c3". Does the file exist? (x27)
8:49:17 a.m. [vite] Pre-transform error: Failed to resolve import "chromadb-default-embed" from "node_modules/.vite/deps/chunk-H74S34X7.js?v=135fc4c3". Does the file exist? (x28)
8:49:17 a.m. [vite] Pre-transform error: Failed to resolve import "chromadb-default-embed" from "node_modules/.vite/deps/chunk-H74S34X7.js?v=135fc4c3". Does the file exist? (x29)
8:49:18 a.m. [vite] Internal server error: Failed to resolve import "chromadb-default-embed" from "node_modules/.vite/deps/chunk-H74S34X7.js?v=135fc4c3". Does the file exist?
  Plugin: vite:import-analysis
  File: /Users/shijiakai/Downloads/encre/packages/app/node_modules/.vite/deps/chunk-H74S34X7.js?v=135fc4c3:3068:41
  3070|    static async import() {
  3071|      try {
  3072|        const { pipeline } = await import("chromadb-default-embed");
     |                                          ^
  3073|        return { pipeline };
  3074|      } catch (e) {
      at TransformPluginContext._formatError (file:///Users/shijiakai/Downloads/encre/node_modules/vite/dist/node/chunks/dep-C1-ZB6nQ.js:49746:41)
      at TransformPluginContext.error (file:///Users/shijiakai/Downloads/encre/node_modules/vite/dist/node/chunks/dep-C1-ZB6nQ.js:49741:16)
      at normalizeUrl (file:///Users/shijiakai/Downloads/encre/node_modules/vite/dist/node/chunks/dep-C1-ZB6nQ.js:64326:23)
      at async file:///Users/shijiakai/Downloads/encre/node_modules/vite/dist/node/chunks/dep-C1-ZB6nQ.js:64458:39
      at async Promise.all (index 7)
      at async TransformPluginContext.transform (file:///Users/shijiakai/Downloads/encre/node_modules/vite/dist/node/chunks/dep-C1-ZB6nQ.js:64385:7)
      at async PluginContainer.transform (file:///Users/shijiakai/Downloads/encre/node_modules/vite/dist/node/chunks/dep-C1-ZB6nQ.js:49587:18)
      at async loadAndTransform (file:///Users/shijiakai/Downloads/encre/node_modules/vite/dist/node/chunks/dep-C1-ZB6nQ.js:52409:27)
      at async viteTransformMiddleware (file:///Users/shijiakai/Downloads/encre/node_modules/vite/dist/node/chunks/dep-C1-ZB6nQ.js:62168:24)

Relevant screenshots

Screenshot of the web console when blank page occurs:

Screen Shot 2024-09-11 at 08 51 09

Code of Conduct

VictorS67 commented 3 weeks ago

Current solution for importing getRecordId() from backend is never import that to frontend.

The function is re-structured in the @encrejs/web so that it is the same as getRecordId() in the backend:

utils/fakeId.ts:

import { customAlphabet } from 'nanoid';

import { RecordId } from 'internal/src/types/encre';

export function fakeId(length: number): string {
  const _alphabet =
    '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ_abcdefghijklmnopqrstuvwxyz@';
  const nanoid = customAlphabet(_alphabet, 17);

  return nanoid() as RecordId;
}
VictorS67 commented 3 weeks ago

Another issue from importing extMap from backend is now fixed. DO NOT import any constant from the backend.