issue: Browser console spammed with TypeError: can't access property "scrollHeight", responseContainer is null when navigating away from ask/explain modal as model is responding #5883

Closed
opened 2025-11-11 16:36:54 -06:00 by GiteaMirror · 0 comments
Owner

Originally created by @silentoplayz on GitHub (Jul 27, 2025).

Check Existing Issues

  • I have searched the existing issues and discussions.
  • I am using the latest version of Open WebUI.

Installation Method

Git Clone

Open WebUI Version

v0.6.18 (5fbfe2bdca)

Ollama Version (if applicable)

v0.9.5 (5d8c173529)

Operating System

Ubuntu 24.04.2 LTS

Browser (if applicable)

Mozilla Firefox Debian Package (mozilla-deb - 1.0) v141.0 (64-bit)

Confirmation

  • I have read and followed all instructions in README.md.
  • I am using the latest version of both Open WebUI and Ollama.
  • I have included the browser console logs.
  • I have included the Docker container logs.
  • I have provided every relevant configuration, setting, and environment variable used in my setup.
  • I have clearly listed every relevant configuration, custom setting, environment variable, and command-line option that influences my setup (such as Docker Compose overrides, .env values, browser settings, authentication configurations, etc).
  • I have documented step-by-step reproduction instructions that are precise, sequential, and leave nothing to interpretation. My steps:
  • Start with the initial platform/version/OS and dependencies used,
  • Specify exact install/launch/configure commands,
  • List URLs visited, user input (incl. example values/emails/passwords if needed),
  • Describe all options and toggles enabled or changed,
  • Include any files or environmental changes,
  • Identify the expected and actual result at each stage,
  • Ensure any reasonably skilled user can follow and hit the same issue.

Expected Behavior

The Open WebUI application should gracefully handle navigation to a new chat or conversation while a local model is actively generating a response within the "Ask" or "Explain" modal, without logging persistent errors to the browser console. The previous modal should close without issue, and no errors related to scrollHeight or responseContainer being null should occur.

Actual Behavior

When a local model is actively responding within the "Ask" or "Explain" modal, navigating to a new chat (by clicking "New Chat") causes a TypeError: can't access property "scrollHeight", responseContainer is null to be repeatedly logged (spammed) to the browser console. This error persists until the page is manually refreshed.

Steps to Reproduce

This issue is reproduced on a local development environment setup for Open WebUI.

  1. Prerequisites:

    • Operating System: Ubuntu 24.04.2 LTS
    • Python: 3.11 or higher (e.g., 3.11.x)
    • Node.js: 22.10 or higher
    • IDE: VSCode (recommended, used for this setup)
    • Conda (recommended for backend environment)
  2. Clone the Repository:

    • Open a terminal (e.g., VSCode integrated terminal).
    • Navigate to your desired directory.
    • Run:
      git clone https://github.com/open-webui/open-webui.git
      cd open-webui
      
  3. Frontend Setup:

    • Copy the example environment file:
      cp -RPp .env.example .env
      
    • (No custom changes made to .env for reproduction, default settings are used.)
    • Install frontend dependencies (from open-webui directory):
      npm install
      
    • Start the frontend development server (from open-webui directory):
      npm run dev
      
    • Open your web browser and navigate to http://localhost:5173. You should see the frontend waiting for the backend. Keep this terminal running.
  4. Backend Setup:

    • Open a new terminal instance (e.g., VSCode's "Terminal > New Terminal").
    • Navigate to the backend directory in this new terminal:
      cd backend
      
    • Create and activate a Conda environment:
      conda create --name open-webui python=3.11
      conda activate open-webui
      
    • Install backend dependencies (with Conda environment activated, from backend directory):
      pip install -r requirements.txt -U
      
    • Start the backend development server (from backend directory):
      sh dev.sh
      
    • Wait for the backend server to start successfully.
  5. Access Open WebUI and Observe Issue:

    • Go back to your browser tab (e.g., http://localhost:5173).
    • Refresh the page. The full Open WebUI application should now be running.
    • Log in (if prompted).
    • Start a new chat with a local model.
    • After the model has finished providing a response to your query, double-click anywhere on text within its response to reveal the "Ask"/"Explain" modal.
    • Select either option ("Ask" or "Explain"), type out a query, and then send it. The query should be complex enough for the model to not respond with a simple sentence or phrase (e.g., a multi-paragraph response is ideal) to ensure the model is actively responding for a noticeable duration.
    • Crucially: As the model is responding in this modal, click on the New Chat button located at the top-left side of the UI.
    • Open up the browser console (usually F12 key on the keyboard) and observe the console for the repeated TypeError.

Logs & Screenshots

Uncaught (in promise) TypeError: can't access property "scrollHeight", responseContainer is null
    autoScroll FloatingButtons.svelte:35
    processStream FloatingButtons.svelte:107
    askHandler FloatingButtons.svelte:119
    click_handler_2 FloatingButtons.svelte:296
    listen dom.js:361
    listen_dev dev.js:133
    mount FloatingButtons.svelte:587
    update FloatingButtons.svelte:287
    update FloatingButtons.svelte:822
    update scheduler.js:119
    flush scheduler.js:79
    promise callback*schedule_update scheduler.js:20
    make_dirty Component.js:81
    ctx Component.js:139
    click_handler FloatingButtons.svelte:1076
    listen dom.js:361
    listen_dev dev.js:133
    mount FloatingButtons.svelte:731
    mount FloatingButtons.svelte:259
    mount FloatingButtons.svelte:814
    m svelte-hooks.js:291
    mount_component Component.js:44
    mount ContentRenderer.svelte:81
    mount ContentRenderer.svelte:178
    m svelte-hooks.js:291
    mount_component Component.js:44
    mount ResponseMessage.svelte:1955
    mount ResponseMessage.svelte:1600
    mount ResponseMessage.svelte:6143
    mount ResponseMessage.svelte:6386
    m svelte-hooks.js:291
    mount_component Component.js:44
    mount Message.svelte:278
    mount Message.svelte:71
    mount Message.svelte:438
    m svelte-hooks.js:291
    mount_component Component.js:44
    mount Messages.svelte:397
    mount Messages.svelte:566
    mount Messages.svelte:98
    mount Messages.svelte:711
    m svelte-hooks.js:291
    mount_component Component.js:44
    mount Chat.svelte:872
    mount Chat.svelte:1100
14 FloatingButtons.svelte:35:4

Screenshot

Image

Additional Information

This error appears to stem from an attempt to access scrollHeight on a responseContainer that has become null, likely because the component responsible for the modal's auto-scrolling is trying to update while the modal itself (and its DOM elements) has been unmounted due to the navigation. The issue consistently reproduces with local models and persists, spamming the console until a full page refresh. This behavior suggests a need for better cleanup or conditional rendering logic when modals or components are unmounted mid-operation.

Originally created by @silentoplayz on GitHub (Jul 27, 2025). ### Check Existing Issues - [x] I have searched the existing issues and discussions. - [x] I am using the latest version of Open WebUI. ### Installation Method Git Clone ### Open WebUI Version v0.6.18 (https://github.com/open-webui/open-webui/commit/5fbfe2bdcadf5f157926f6551891e4dc0802b9f3) ### Ollama Version (if applicable) v0.9.5 (https://github.com/ollama/ollama/commit/5d8c1735296299c3d81bb40f00038398dc729579) ### Operating System Ubuntu 24.04.2 LTS ### Browser (if applicable) Mozilla Firefox Debian Package (mozilla-deb - 1.0) v141.0 (64-bit) ### Confirmation - [x] I have read and followed all instructions in `README.md`. - [x] I am using the latest version of **both** Open WebUI and Ollama. - [x] I have included the browser console logs. - [x] I have included the Docker container logs. - [x] I have **provided every relevant configuration, setting, and environment variable used in my setup.** - [x] I have clearly **listed every relevant configuration, custom setting, environment variable, and command-line option that influences my setup** (such as Docker Compose overrides, .env values, browser settings, authentication configurations, etc). - [x] I have documented **step-by-step reproduction instructions that are precise, sequential, and leave nothing to interpretation**. My steps: - Start with the initial platform/version/OS and dependencies used, - Specify exact install/launch/configure commands, - List URLs visited, user input (incl. example values/emails/passwords if needed), - Describe all options and toggles enabled or changed, - Include any files or environmental changes, - Identify the expected and actual result at each stage, - Ensure any reasonably skilled user can follow and hit the same issue. ### Expected Behavior The Open WebUI application should gracefully handle navigation to a new chat or conversation while a local model is actively generating a response within the "Ask" or "Explain" modal, without logging persistent errors to the browser console. The previous modal should close without issue, and no errors related to `scrollHeight` or `responseContainer` being null should occur. ### Actual Behavior When a local model is actively responding within the "Ask" or "Explain" modal, navigating to a new chat (by clicking "New Chat") causes a `TypeError: can't access property "scrollHeight", responseContainer is null` to be repeatedly logged (spammed) to the browser console. This error persists until the page is manually refreshed. ### Steps to Reproduce This issue is reproduced on a local development environment setup for Open WebUI. 1. **Prerequisites:** * Operating System: Ubuntu 24.04.2 LTS * Python: 3.11 or higher (e.g., 3.11.x) * Node.js: 22.10 or higher * IDE: VSCode (recommended, used for this setup) * Conda (recommended for backend environment) 2. **Clone the Repository:** * Open a terminal (e.g., VSCode integrated terminal). * Navigate to your desired directory. * Run: ```bash git clone https://github.com/open-webui/open-webui.git cd open-webui ``` 3. **Frontend Setup:** * Copy the example environment file: ```bash cp -RPp .env.example .env ``` * (No custom changes made to `.env` for reproduction, default settings are used.) * Install frontend dependencies (from `open-webui` directory): ```bash npm install ``` * Start the frontend development server (from `open-webui` directory): ```bash npm run dev ``` * Open your web browser and navigate to `http://localhost:5173`. You should see the frontend waiting for the backend. Keep this terminal running. 4. **Backend Setup:** * Open a **new** terminal instance (e.g., VSCode's "Terminal > New Terminal"). * Navigate to the backend directory in this new terminal: ```bash cd backend ``` * Create and activate a Conda environment: ```bash conda create --name open-webui python=3.11 conda activate open-webui ``` * Install backend dependencies (with Conda environment activated, from `backend` directory): ```bash pip install -r requirements.txt -U ``` * Start the backend development server (from `backend` directory): ```bash sh dev.sh ``` * Wait for the backend server to start successfully. 5. **Access Open WebUI and Observe Issue:** * Go back to your browser tab (e.g., `http://localhost:5173`). * Refresh the page. The full Open WebUI application should now be running. * Log in (if prompted). * Start a new chat with a local model. * After the model has finished providing a response to your query, double-click anywhere on text within its response to reveal the "Ask"/"Explain" modal. * Select either option ("Ask" or "Explain"), type out a query, and then send it. The query should be complex enough for the model to not respond with a simple sentence or phrase (e.g., a multi-paragraph response is ideal) to ensure the model is actively responding for a noticeable duration. * **Crucially:** As the model is *responding* in this modal, click on the `New Chat` button located at the top-left side of the UI. * Open up the browser console (usually `F12` key on the keyboard) and observe the console for the repeated `TypeError`. ### Logs & Screenshots ```js Uncaught (in promise) TypeError: can't access property "scrollHeight", responseContainer is null autoScroll FloatingButtons.svelte:35 processStream FloatingButtons.svelte:107 askHandler FloatingButtons.svelte:119 click_handler_2 FloatingButtons.svelte:296 listen dom.js:361 listen_dev dev.js:133 mount FloatingButtons.svelte:587 update FloatingButtons.svelte:287 update FloatingButtons.svelte:822 update scheduler.js:119 flush scheduler.js:79 promise callback*schedule_update scheduler.js:20 make_dirty Component.js:81 ctx Component.js:139 click_handler FloatingButtons.svelte:1076 listen dom.js:361 listen_dev dev.js:133 mount FloatingButtons.svelte:731 mount FloatingButtons.svelte:259 mount FloatingButtons.svelte:814 m svelte-hooks.js:291 mount_component Component.js:44 mount ContentRenderer.svelte:81 mount ContentRenderer.svelte:178 m svelte-hooks.js:291 mount_component Component.js:44 mount ResponseMessage.svelte:1955 mount ResponseMessage.svelte:1600 mount ResponseMessage.svelte:6143 mount ResponseMessage.svelte:6386 m svelte-hooks.js:291 mount_component Component.js:44 mount Message.svelte:278 mount Message.svelte:71 mount Message.svelte:438 m svelte-hooks.js:291 mount_component Component.js:44 mount Messages.svelte:397 mount Messages.svelte:566 mount Messages.svelte:98 mount Messages.svelte:711 m svelte-hooks.js:291 mount_component Component.js:44 mount Chat.svelte:872 mount Chat.svelte:1100 14 FloatingButtons.svelte:35:4 ``` ### Screenshot <img width="2560" height="1259" alt="Image" src="https://github.com/user-attachments/assets/847dfdbd-e18e-4df4-a3b3-eae2e6eb6d40" /> ### Additional Information This error appears to stem from an attempt to access `scrollHeight` on a `responseContainer` that has become `null`, likely because the component responsible for the modal's auto-scrolling is trying to update while the modal itself (and its DOM elements) has been unmounted due to the navigation. The issue consistently reproduces with local models and persists, spamming the console until a full page refresh. This behavior suggests a need for better cleanup or conditional rendering logic when modals or components are unmounted mid-operation.
GiteaMirror added the bug label 2025-11-11 16:36:54 -06:00
Sign in to join this conversation.
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: github-starred/open-webui#5883