There are abnormalities when opening the self-built application (web page) in WeCom #8483

Closed
opened 2026-02-21 18:25:54 -05:00 by yindo · 12 comments
Owner

Originally created by @psups1987 on GitHub (Feb 20, 2025).

Originally assigned to: @crazywoola on GitHub.

Self Checks

  • This is only for bug report, if you would like to ask a question, please head to Discussions.
  • I have searched for existing issues search for existing issues, including closed ones.
  • I confirm that I am using English to submit this report (我已阅读并同意 Language Policy).
  • [FOR CHINESE USERS] 请务必使用英文提交 Issue,否则会被关闭。谢谢!:)
  • Please do not modify this template :) and fill in all the required fields.

Dify version

0.15.3

Cloud or Self Hosted

Self Hosted (Docker)

Steps to reproduce

When opening the released web page version of the chat AI application on the mobile WeCom, the first start page can be displayed normally, but when clicking "start", an error will be reported: "Application error: a client-side exception has occurred (see the browser console for more information)".

Image
Image

✔️ Expected Behavior

have a normal conversation

Actual Behavior

response:Application error: a client-side exception has occurred (see
the browser console for more information).

Originally created by @psups1987 on GitHub (Feb 20, 2025). Originally assigned to: @crazywoola on GitHub. ### Self Checks - [x] This is only for bug report, if you would like to ask a question, please head to [Discussions](https://github.com/langgenius/dify/discussions/categories/general). - [x] I have searched for existing issues [search for existing issues](https://github.com/langgenius/dify/issues), including closed ones. - [x] I confirm that I am using English to submit this report (我已阅读并同意 [Language Policy](https://github.com/langgenius/dify/issues/1542)). - [x] [FOR CHINESE USERS] 请务必使用英文提交 Issue,否则会被关闭。谢谢!:) - [x] Please do not modify this template :) and fill in all the required fields. ### Dify version 0.15.3 ### Cloud or Self Hosted Self Hosted (Docker) ### Steps to reproduce When opening the released web page version of the chat AI application on the mobile WeCom, the first start page can be displayed normally, but when clicking "start", an error will be reported: "Application error: a client-side exception has occurred (see the browser console for more information)". ![Image](https://github.com/user-attachments/assets/de96e726-d7df-44f3-a90a-c7eceb81a52b) ![Image](https://github.com/user-attachments/assets/6400dd3c-8807-4b20-b78f-88b41bbda878) ### ✔️ Expected Behavior have a normal conversation ### ❌ Actual Behavior response:Application error: a client-side exception has occurred (see the browser console for more information).
yindo added the 🐞 bug label 2026-02-21 18:25:54 -05:00
yindo closed this issue 2026-02-21 18:25:54 -05:00
Author
Owner

@dosubot[bot] commented on GitHub (Feb 20, 2025):

I found a similar open issue that might be relevant to your problem. The suggested solution is to update the Next.js version, as the error could be due to compatibility issues between the mermaid library and the outdated Next.js version (14.2.24) being used. Updating Next.js to a more recent version might resolve the issue, as newer versions often include fixes for such compatibility problems. Additionally, ensure that all dependencies, including mermaid, are updated to their latest versions [1].

To continue talking to Dosu, mention @dosu.


Help Dosu learn! Give it feedback: Great Response | Irrelevant Answer | Incorrect Sources | Too Verbose | Hallucination | Bug Report | Other

@dosubot[bot] commented on GitHub (Feb 20, 2025): <!-- Answer --> I found a similar open issue that might be relevant to your problem. The suggested solution is to update the Next.js version, as the error could be due to compatibility issues between the `mermaid` library and the outdated Next.js version (14.2.24) being used. Updating Next.js to a more recent version might resolve the issue, as newer versions often include fixes for such compatibility problems. Additionally, ensure that all dependencies, including `mermaid`, are updated to their latest versions <sup>[[1]](https://github.com/langgenius/dify/issues/14126)</sup>. <!-- Dosu Comment Footer --> *To continue talking to [Dosu](https://dosu.dev), mention @dosu.* --- <sup>Help Dosu learn! Give it feedback: [Great Response](https://app.dosu.dev/response-feedback/d79ee8a5-4dc1-47a6-a2d5-4d6f114c3c86?feedback_type=great_response) | [Irrelevant Answer](https://app.dosu.dev/response-feedback/d79ee8a5-4dc1-47a6-a2d5-4d6f114c3c86?feedback_type=irrelevant_answer) | [Incorrect Sources](https://app.dosu.dev/response-feedback/d79ee8a5-4dc1-47a6-a2d5-4d6f114c3c86?feedback_type=incorrect_sources) | [Too Verbose](https://app.dosu.dev/response-feedback/d79ee8a5-4dc1-47a6-a2d5-4d6f114c3c86?feedback_type=too_verbose) | [Hallucination](https://app.dosu.dev/response-feedback/d79ee8a5-4dc1-47a6-a2d5-4d6f114c3c86?feedback_type=hallucination) | [Bug Report](https://app.dosu.dev/response-feedback/d79ee8a5-4dc1-47a6-a2d5-4d6f114c3c86?feedback_type=bug_report) | [Other](https://app.dosu.dev/response-feedback/d79ee8a5-4dc1-47a6-a2d5-4d6f114c3c86?feedback_type=other)</sup>
Author
Owner

@crazywoola commented on GitHub (Feb 20, 2025):

We have a similar problem https://github.com/langgenius/dify/issues/14129#issuecomment-2673183080

Can you check this to see if this works.

Also can you verify if this page works in v0.15.2

From the provided image, it seems to be a different error.

@crazywoola commented on GitHub (Feb 20, 2025): We have a similar problem https://github.com/langgenius/dify/issues/14129#issuecomment-2673183080 Can you check this to see if this works. Also can you verify if this page works in v0.15.2 From the provided image, it seems to be a different error.
Author
Owner

@psups1987 commented on GitHub (Feb 21, 2025):

We have a similar problem #14129 (comment)

Can you check this to see if this works.

Also can you verify if this page works in v0.15.2

From the provided image, it seems to be a different error.

In version 0.15.2, the enterprise WeChat on Android phones can be used for normal chat conversations. However, when the enterprise WeChat is opened on an iPhone, a white screen interface appears.

@psups1987 commented on GitHub (Feb 21, 2025): > We have a similar problem [#14129 (comment)](https://github.com/langgenius/dify/issues/14129#issuecomment-2673183080) > > Can you check this to see if this works. > > Also can you verify if this page works in v0.15.2 > > From the provided image, it seems to be a different error. In version 0.15.2, the enterprise WeChat on Android phones can be used for normal chat conversations. However, when the enterprise WeChat is opened on an iPhone, a white screen interface appears.
Author
Owner

@crazywoola commented on GitHub (Feb 21, 2025):

Might related to this:

https://github.com/langgenius/dify/blob/c0d0c63592bba0de5a8319376a53f3116dfa3193/web/app/components/base/chat/utils.ts#L103-L106

See this page as well https://caniuse.com/?search=toReversed

@psups1987

@dosubot Help me to fix this

@crazywoola commented on GitHub (Feb 21, 2025): Might related to this: https://github.com/langgenius/dify/blob/c0d0c63592bba0de5a8319376a53f3116dfa3193/web/app/components/base/chat/utils.ts#L103-L106 See this page as well https://caniuse.com/?search=toReversed @psups1987 @dosubot Help me to fix this
Author
Owner

@dosubot[bot] commented on GitHub (Feb 21, 2025):

The issue with the white screen on iPhones in Dify version 0.15.2 could be related to the toReversed method in the utils.ts file. This method requires browser support, which might not be available on the iPhone's browser, leading to the problem.

To fix this, you can implement a TypeScript polyfill for the toReversed method:

  1. Create a new file array.polyfill.ts in the /web/app/components/base/chat directory with the following code:
interface Array<T> {
  toReversed(): T[];
}
if (!Array.prototype.toReversed) {
  Array.prototype.toReversed = function<T>(): T[] {
    const reversedArray = [...this];
    reversedArray.reverse();
    return reversedArray;
  };
}
  1. Import this polyfill in utils.ts by adding:
import './array.polyfill';
  1. If you are using Docker, rebuild the web image and update your docker-compose.yaml to use the new image.

This should address the compatibility issue and potentially resolve the white screen problem on the iPhone [1].

To continue talking to Dosu, mention @dosu.


Help Dosu learn! Give it feedback: Great Response | Irrelevant Answer | Incorrect Sources | Too Verbose | Hallucination | Bug Report | Other

@dosubot[bot] commented on GitHub (Feb 21, 2025): <!-- Answer --> The issue with the white screen on iPhones in Dify version 0.15.2 could be related to the `toReversed` method in the `utils.ts` file. This method requires browser support, which might not be available on the iPhone's browser, leading to the problem. To fix this, you can implement a TypeScript polyfill for the `toReversed` method: 1. Create a new file `array.polyfill.ts` in the `/web/app/components/base/chat` directory with the following code: ```typescript interface Array<T> { toReversed(): T[]; } if (!Array.prototype.toReversed) { Array.prototype.toReversed = function<T>(): T[] { const reversedArray = [...this]; reversedArray.reverse(); return reversedArray; }; } ``` 2. Import this polyfill in `utils.ts` by adding: ```typescript import './array.polyfill'; ``` 3. If you are using Docker, rebuild the web image and update your `docker-compose.yaml` to use the new image. This should address the compatibility issue and potentially resolve the white screen problem on the iPhone <sup>[[1]](https://github.com/langgenius/dify/issues/13402)</sup>. <!-- Dosu Comment Footer --> *To continue talking to [Dosu](https://dosu.dev), mention @dosu.* --- <sup>Help Dosu learn! Give it feedback: [Great Response](https://app.dosu.dev/response-feedback/ef86c312-8980-4b4c-bbba-c65392de1526?feedback_type=great_response) | [Irrelevant Answer](https://app.dosu.dev/response-feedback/ef86c312-8980-4b4c-bbba-c65392de1526?feedback_type=irrelevant_answer) | [Incorrect Sources](https://app.dosu.dev/response-feedback/ef86c312-8980-4b4c-bbba-c65392de1526?feedback_type=incorrect_sources) | [Too Verbose](https://app.dosu.dev/response-feedback/ef86c312-8980-4b4c-bbba-c65392de1526?feedback_type=too_verbose) | [Hallucination](https://app.dosu.dev/response-feedback/ef86c312-8980-4b4c-bbba-c65392de1526?feedback_type=hallucination) | [Bug Report](https://app.dosu.dev/response-feedback/ef86c312-8980-4b4c-bbba-c65392de1526?feedback_type=bug_report) | [Other](https://app.dosu.dev/response-feedback/ef86c312-8980-4b4c-bbba-c65392de1526?feedback_type=other)</sup>
Author
Owner

@psups1987 commented on GitHub (Feb 21, 2025):

Might related to this:

dify/web/app/components/base/chat/utils.ts

Lines 103 to 106 in c0d0c63

const stack = tree.toReversed().map(rootNode => ({
node: rootNode,
path: [rootNode],
}))
See this page as well https://caniuse.com/?search=toReversed

@psups1987

@dosubot Help me to fix this

After adding this code in version 0.15.2, the enterprise WeChat and the browser on Apple mobile phones still display a white screen, while Android mobile phones can display it normally.
After adding this code in version 0.15.3, the situation is the same as that in version 0.15.2.

@psups1987 commented on GitHub (Feb 21, 2025): > Might related to this: > > [dify/web/app/components/base/chat/utils.ts](https://github.com/langgenius/dify/blob/c0d0c63592bba0de5a8319376a53f3116dfa3193/web/app/components/base/chat/utils.ts#L103-L106) > > Lines 103 to 106 in [c0d0c63](/langgenius/dify/commit/c0d0c63592bba0de5a8319376a53f3116dfa3193) > > const stack = tree.toReversed().map(rootNode => ({ > node: rootNode, > path: [rootNode], > })) > See this page as well https://caniuse.com/?search=toReversed > > [@psups1987](https://github.com/psups1987) > > @dosubot Help me to fix this After adding this code in version 0.15.2, the enterprise WeChat and the browser on Apple mobile phones still display a white screen, while Android mobile phones can display it normally. After adding this code in version 0.15.3, the situation is the same as that in version 0.15.2.
Author
Owner

@dosubot[bot] commented on GitHub (Feb 21, 2025):

If the polyfill for the toReversed method did not resolve the white screen issue on Apple devices and enterprise WeChat, it might be necessary to investigate other potential causes. Here are a few steps you can take:

  1. Check for Other Compatibility Issues: Ensure that there are no other JavaScript features or methods being used that might not be supported by the browsers in question. You can use tools like Can I use to verify compatibility.

  2. Console Errors: Look for any other errors in the browser console that might provide more insight into what is causing the white screen. This can help identify if there are other issues at play.

  3. Update Dependencies: Make sure all dependencies, including libraries like mermaid, are updated to their latest versions, as they might contain fixes for compatibility issues.

  4. Test with Simplified Code: Try isolating the problematic code by creating a minimal version of the application to see if the issue persists. This can help determine if the problem is with the specific code or a broader compatibility issue.

  5. Cross-Browser Testing: Test the application on different browsers and devices to see if the issue is specific to certain environments.

If these steps do not resolve the issue, it might be helpful to review the specific code and configurations used in the application to identify any other potential causes.

To continue talking to Dosu, mention @dosu.


Help Dosu learn! Give it feedback: Great Response | Irrelevant Answer | Incorrect Sources | Too Verbose | Hallucination | Bug Report | Other

@dosubot[bot] commented on GitHub (Feb 21, 2025): <!-- Answer --> If the polyfill for the `toReversed` method did not resolve the white screen issue on Apple devices and enterprise WeChat, it might be necessary to investigate other potential causes. Here are a few steps you can take: 1. **Check for Other Compatibility Issues**: Ensure that there are no other JavaScript features or methods being used that might not be supported by the browsers in question. You can use tools like [Can I use](https://caniuse.com/) to verify compatibility. 2. **Console Errors**: Look for any other errors in the browser console that might provide more insight into what is causing the white screen. This can help identify if there are other issues at play. 3. **Update Dependencies**: Make sure all dependencies, including libraries like `mermaid`, are updated to their latest versions, as they might contain fixes for compatibility issues. 4. **Test with Simplified Code**: Try isolating the problematic code by creating a minimal version of the application to see if the issue persists. This can help determine if the problem is with the specific code or a broader compatibility issue. 5. **Cross-Browser Testing**: Test the application on different browsers and devices to see if the issue is specific to certain environments. If these steps do not resolve the issue, it might be helpful to review the specific code and configurations used in the application to identify any other potential causes. <!-- Dosu Comment Footer --> *To continue talking to [Dosu](https://dosu.dev), mention @dosu.* --- <sup>Help Dosu learn! Give it feedback: [Great Response](https://app.dosu.dev/response-feedback/72d40a62-7f5d-4383-a432-1444b4838c2d?feedback_type=great_response) | [Irrelevant Answer](https://app.dosu.dev/response-feedback/72d40a62-7f5d-4383-a432-1444b4838c2d?feedback_type=irrelevant_answer) | [Incorrect Sources](https://app.dosu.dev/response-feedback/72d40a62-7f5d-4383-a432-1444b4838c2d?feedback_type=incorrect_sources) | [Too Verbose](https://app.dosu.dev/response-feedback/72d40a62-7f5d-4383-a432-1444b4838c2d?feedback_type=too_verbose) | [Hallucination](https://app.dosu.dev/response-feedback/72d40a62-7f5d-4383-a432-1444b4838c2d?feedback_type=hallucination) | [Bug Report](https://app.dosu.dev/response-feedback/72d40a62-7f5d-4383-a432-1444b4838c2d?feedback_type=bug_report) | [Other](https://app.dosu.dev/response-feedback/72d40a62-7f5d-4383-a432-1444b4838c2d?feedback_type=other)</sup>
Author
Owner

@Moudicat commented on GitHub (Feb 25, 2025):

I encountered the same issue. If you're building the project yourself, you can modify the next.config.js file by adding the transpilePackages property to resolve this issue:

const nextConfig = {
  transpilePackages: ['@tanstack/react-query', '@tanstack/query-core', 'mermaid', 'marked'],
  // ....
};
@Moudicat commented on GitHub (Feb 25, 2025): I encountered the same issue. If you're building the project yourself, you can modify the `next.config.js` file by adding the `transpilePackages` property to resolve this issue: ```js const nextConfig = { transpilePackages: ['@tanstack/react-query', '@tanstack/query-core', 'mermaid', 'marked'], // .... }; ```
Author
Owner

@psups1987 commented on GitHub (Feb 25, 2025):

It's okay now. Thank you so much. Great! Great! Great!

I encountered the same issue. If you're building the project yourself, you can modify the next.config.js file by adding the transpilePackages property to resolve this issue:

const nextConfig = {
transpilePackages: ['@tanstack/react-query', '@tanstack/query-core', 'mermaid', 'marked'],
// ....
};

It's okay now. Thank you so much. Great! Great! Great!

@psups1987 commented on GitHub (Feb 25, 2025): It's okay now. Thank you so much. Great! Great! Great! > I encountered the same issue. If you're building the project yourself, you can modify the `next.config.js` file by adding the `transpilePackages` property to resolve this issue: > > const nextConfig = { > transpilePackages: ['@tanstack/react-query', '@tanstack/query-core', 'mermaid', 'marked'], > // .... > }; It's okay now. Thank you so much. Great! Great! Great!
Author
Owner

@psups1987 commented on GitHub (Feb 25, 2025):

If the polyfill for the toReversed method did not resolve the white screen issue on Apple devices and enterprise WeChat, it might be necessary to investigate other potential causes. Here are a few steps you can take:

  1. Check for Other Compatibility Issues: Ensure that there are no other JavaScript features or methods being used that might not be supported by the browsers in question. You can use tools like Can I use to verify compatibility.
  2. Console Errors: Look for any other errors in the browser console that might provide more insight into what is causing the white screen. This can help identify if there are other issues at play.
  3. Update Dependencies: Make sure all dependencies, including libraries like mermaid, are updated to their latest versions, as they might contain fixes for compatibility issues.
  4. Test with Simplified Code: Try isolating the problematic code by creating a minimal version of the application to see if the issue persists. This can help determine if the problem is with the specific code or a broader compatibility issue.
  5. Cross-Browser Testing: Test the application on different browsers and devices to see if the issue is specific to certain environments.

If these steps do not resolve the issue, it might be helpful to review the specific code and configurations used in the application to identify any other potential causes.

To continue talking to Dosu, mention @dosu.

Help Dosu learn! Give it feedback: Great Response | Irrelevant Answer | Incorrect Sources | Too Verbose | Hallucination | Bug Report | Other

Image

When clicking the "Regenerate" function, the error "TypeError: (0 , g.isValidGeneratedAnswer) is not a function" occurs. At the same time, the streaming output on the mobile device side will no longer work.

@psups1987 commented on GitHub (Feb 25, 2025): > If the polyfill for the `toReversed` method did not resolve the white screen issue on Apple devices and enterprise WeChat, it might be necessary to investigate other potential causes. Here are a few steps you can take: > > 1. **Check for Other Compatibility Issues**: Ensure that there are no other JavaScript features or methods being used that might not be supported by the browsers in question. You can use tools like [Can I use](https://caniuse.com/) to verify compatibility. > 2. **Console Errors**: Look for any other errors in the browser console that might provide more insight into what is causing the white screen. This can help identify if there are other issues at play. > 3. **Update Dependencies**: Make sure all dependencies, including libraries like `mermaid`, are updated to their latest versions, as they might contain fixes for compatibility issues. > 4. **Test with Simplified Code**: Try isolating the problematic code by creating a minimal version of the application to see if the issue persists. This can help determine if the problem is with the specific code or a broader compatibility issue. > 5. **Cross-Browser Testing**: Test the application on different browsers and devices to see if the issue is specific to certain environments. > > If these steps do not resolve the issue, it might be helpful to review the specific code and configurations used in the application to identify any other potential causes. > > _To continue talking to [Dosu](https://dosu.dev), mention [@dosu](https://github.com/dosu)._ > > Help Dosu learn! Give it feedback: [Great Response](https://app.dosu.dev/response-feedback/72d40a62-7f5d-4383-a432-1444b4838c2d?feedback_type=great_response) | [Irrelevant Answer](https://app.dosu.dev/response-feedback/72d40a62-7f5d-4383-a432-1444b4838c2d?feedback_type=irrelevant_answer) | [Incorrect Sources](https://app.dosu.dev/response-feedback/72d40a62-7f5d-4383-a432-1444b4838c2d?feedback_type=incorrect_sources) | [Too Verbose](https://app.dosu.dev/response-feedback/72d40a62-7f5d-4383-a432-1444b4838c2d?feedback_type=too_verbose) | [Hallucination](https://app.dosu.dev/response-feedback/72d40a62-7f5d-4383-a432-1444b4838c2d?feedback_type=hallucination) | [Bug Report](https://app.dosu.dev/response-feedback/72d40a62-7f5d-4383-a432-1444b4838c2d?feedback_type=bug_report) | [Other](https://app.dosu.dev/response-feedback/72d40a62-7f5d-4383-a432-1444b4838c2d?feedback_type=other) ![Image](https://github.com/user-attachments/assets/cd938a20-6fb4-493d-aeed-1ecb345abbb8) When clicking the "Regenerate" function, the error "TypeError: (0 , g.isValidGeneratedAnswer) is not a function" occurs. At the same time, the streaming output on the mobile device side will no longer work.
Author
Owner

@ycccc93 commented on GitHub (Feb 27, 2025):

I encountered the same issue. If you're building the project yourself, you can modify the next.config.js file by adding the transpilePackages property to resolve this issue:

const nextConfig = {
transpilePackages: ['@tanstack/react-query', '@tanstack/query-core', 'mermaid', 'marked'],
// ....
};

How to do it specifically? I'm a novice and don't quite understand. Add this code to next.config.js under the web, and then the program will automatically recognize it. Do you still need to build it?

@ycccc93 commented on GitHub (Feb 27, 2025): > I encountered the same issue. If you're building the project yourself, you can modify the `next.config.js` file by adding the `transpilePackages` property to resolve this issue: > > const nextConfig = { > transpilePackages: ['@tanstack/react-query', '@tanstack/query-core', 'mermaid', 'marked'], > // .... > }; How to do it specifically? I'm a novice and don't quite understand. Add this code to next.config.js under the web, and then the program will automatically recognize it. Do you still need to build it?
Author
Owner

@Moudicat commented on GitHub (Mar 24, 2025):

I encountered the same issue. If you're building the project yourself, you can modify the next.config.js file by adding the transpilePackages property to resolve this issue:
const nextConfig = {
transpilePackages: ['@tanstack/react-query', '@tanstack/query-core', 'mermaid', 'marked'],
// ....
};

How to do it specifically? I'm a novice and don't quite understand. Add this code to next.config.js under the web, and then the program will automatically recognize it. Do you still need to build it?

sorry for the late reply. Yes, you need to rebuild manually

@Moudicat commented on GitHub (Mar 24, 2025): > > I encountered the same issue. If you're building the project yourself, you can modify the `next.config.js` file by adding the `transpilePackages` property to resolve this issue: > > const nextConfig = { > > transpilePackages: ['@tanstack/react-query', '@tanstack/query-core', 'mermaid', 'marked'], > > // .... > > }; > > How to do it specifically? I'm a novice and don't quite understand. Add this code to next.config.js under the web, and then the program will automatically recognize it. Do you still need to build it? sorry for the late reply. Yes, you need to rebuild manually
Sign in to join this conversation.
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: langgenius/dify#8483