[Bug] [web] Dynamic imports cannot be executed on the chat page in my compiled web project

[tiefan]

Search before asking

• I had searched in the issues and found no similar issues.

Operating system information

Linux

Python version information

=3.11

DB-GPT version

main

Related scenes

• Chat Data
• Chat Excel
• Chat DB
• Chat Knowledge
• Model Management
• Dashboard
• Plugins

Installation Information

• Installation From Source

• Docker Installation

• Docker Compose Installation

• Cluster Installation

• AutoDL Image

• Other

Device information

Personal Computer
Deepin 20.9

Models information

Nothing todo with models.

What happened

I just downloaded 0.6.1 release.
I run:
cnpm install
cnmp run compile
cp -rf out/* ../dbgpt/app/static/web

I found that the chat page can not display correctly. The chat history messages did not show on the page.

Then I did some debug work. I modified the following code(in web/new-components/chat/ChatContentContainer.tsx):

import ChatHeader from '@/new-components/chat/header/ChatHeader';
import dynamic from 'next/dynamic';
import React, { forwardRef, useEffect, useImperativeHandle, useRef, useState } from 'react';

const ChatCompletion = dynamic(() => import('@/new-components/chat/content/ChatCompletion'), { ssr: false });

into:

/* eslint-disable */
import ChatHeader from '@/new-components/chat/header/ChatHeader';
import dynamic from 'next/dynamic';
import React, { forwardRef, useEffect, useImperativeHandle, useRef, useState } from 'react';

const ChatCompletion = dynamic(() => import('@/new-components/chat/content/ChatCompletion'), {
  ssr: false,
  loading: () => <div>Loading ChatCompletion...</div>,
  error: error => {
    console.error('Failed to load ChatCompletion:', error);
    return <div>Error loading ChatCompletion</div>;
  },
  load: () => {
    console.log('ChatCompletion has been successfully loaded');
  },
});

Then the page looks as follows:

It seems that there's something wrong with the dynamic import. What should I do?

What you expected to happen

dymaic import @/new-components/chat/content/ChatCompletion

How to reproduce

downloaded 0.6.1 release.
cnpm install
cnmp run compile
cp -rf out/* ../dbgpt/app/static/web

Additional context

I found that if I use 'yarn' instead of 'cnpm', everything works fine.

Are you willing to submit PR?

• Yes I am willing to submit a PR!