Langflow show black screen on launch about langflow HOT 7 OPEN

Hey there, @denzo! I'm here to help you with any bugs, questions, or contributions for Langflow. Let's work together to solve this issue.

To resolve the issue where Langflow shows a black screen on launch with a "Uncaught TypeError: debounce is not a function" error in the console, you need to ensure that the debounce function is correctly imported and used. The lodash package is used for the debounce function in Langflow.

Here is how you can correctly import and use the debounce function from the lodash package:

1. Install the lodash package (if not already installed):

   npm install lodash

2. Import the debounce function in your JavaScript/TypeScript file:

   import { debounce } from 'lodash';

3. Use the debounce function:

   const debouncedFunction = debounce(yourFunction, delay);

Here is an example of how you might use it in a React component:

import React, { useCallback } from 'react';
import { debounce } from 'lodash';

const YourComponent = () => {
  const handleInputChange = useCallback(
    debounce((event) => {
      // Your debounced function logic here
      console.log(event.target.value);
    }, 300),
    []
  );

  return (
    <input type="text" onChange={handleInputChange} />
  );
};

export default YourComponent;

Ensure that you replace yourFunction with the actual function you want to debounce and delay with the debounce delay in milliseconds.

Additionally, you can refer to the src/frontend/src/utils/parameterUtils.ts file in Langflow for an example of how the debounce function is used:

import { debounce } from "lodash";
import { SAVE_DEBOUNCE_TIME } from "../constants/constants";
import { postCustomComponentUpdate } from "../controllers/API";
import { NodeDataType } from "../types/flow";

export const handleUpdateValues = async (name: string, data: NodeDataType) => {
  const code = data.node?.template?.code?.value;
  if (!code) {
    console.error("Code not found in the template");
    return;
  }

  const template = data.node?.template;
  if (!template) {
    console.error("No template found in the node.");
    return;
  }

  try {
    const res = await postCustomComponentUpdate(
      code,
      template,
      name,
      data.node?.template[name]?.value,
    );
    if (res.status === 200 && data.node?.template) {
      return res.data.template;
    }
  } catch (error) {
    console.error("Error occurred while updating the node:", error);
    throw error;
  }
};

export const debouncedHandleUpdateValues = debounce(
  handleUpdateValues,
  SAVE_DEBOUNCE_TIME,
);

By correctly importing and using the debounce function from the lodash package, you should be able to resolve the "Uncaught TypeError: debounce is not a function" error ^[1][2][3].

To continue talking to Dosu, mention @dosu.

from langflow.

I too am facing this issue @denzo

from langflow.

having the same issue, on chrome and brave, the html (in source) tells me that i have to activate javascript (all worked in the previous deploy) working with the railway template

from langflow.

I'm facing the same issue too!

from langflow.

I have the same problem. I installed it WSL and vmware machines. All new builds.

from langflow.

I encountered a similar problem

from langflow.

I guess this is the problem but I have no idea how to solve it. Incredibly frustrating.

In general I am unable to get any v1 pre release version running

from langflow.