An error occurred after the yml file was imported. Procedure

[yinmin2020]

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.7.3

Cloud or Self Hosted

Self Hosted (Docker)

Steps to reproduce

Error reported as follows：Application error: a client-side exception has occurred (see the browser console for more information)

My code snippet is：

app:
  description: "test"
  icon: "🕸️"
  icon_background: '#FFEAD5'
  mode: workflow
  name: "test"
  use_icon_as_answer_icon: false
kind: app
version: 0.1.0
workflow:
  conversation_variables: []
  environment_variables: []
  features:
    file_upload:
      image:
        enabled: false
        number_limits: 3
        transfer_methods:
        - local_file
        - remote_url
    opening_statement: ''
    retriever_resource:
      enabled: false
    sensitive_word_avoidance:
      enabled: false
    speech_to_text:
      enabled: false
    suggested_questions: []
    suggested_questions_after_answer:
      enabled: false
    text_to_speech:
      enabled: false
      language: ''
      voice: ''
  graph:
    edges:
    - data:
        isInIteration: false
        sourceType: start
        targetType: python
      id: start-to-validate-url
      source: 'start-node'
      sourceHandle: source
      target: 'validate-url-node'
      targetHandle: target
      type: custom
    - data:
        isInIteration: false
        sourceType: python
        targetType: if-else
      id: validate-url-to-if-else
      source: 'validate-url-node'
      sourceHandle: source
      target: 'if-else-url-valid-node'
      targetHandle: target
      type: custom
    - data:
        isInIteration: false
        sourceType: if-else
        targetType: tool
      id: if-else-to-http-request
      source: 'if-else-url-valid-node'
      sourceHandle: 'true'
      target: 'http-request-node'
      targetHandle: target
      type: custom
    - data:
        isInIteration: false
        sourceType: tool
        targetType: python
      id: http-request-to-parse
      source: 'http-request-node'
      sourceHandle: source
      target: 'parse-content-node'
      targetHandle: target
      type: custom
    - data:
        isInIteration: false
        sourceType: python
        targetType: end
      id: parse-to-output
      source: 'parse-content-node'
      sourceHandle: source
      target: 'output-result-node'
      targetHandle: target
      type: custom
    - data:
        isInIteration: false
        sourceType: if-else
        targetType: end
      id: if-else-to-invalid-url
      source: 'if-else-url-valid-node'
      sourceHandle: 'false'
      target: 'invalid-url-node'
      targetHandle: target
      type: custom
    nodes:
    - data:
        desc: ''
        selected: false
        title: "开始"
        type: start
        variables:
        - label: "网页URL"
          max_length: 256
          required: true
          type: text-input
          variable: url
      height: 90
      id: 'start-node'
      position:
        x: 0
        y: 0
      type: custom
      width: 244
    - data:
        code: |
          def main(url: str) -> dict:
              import re
              pattern = re.compile(r'^https?://')
              if pattern.match(url):
                  return {"is_valid": 1}
              return {"is_valid": 0}
        code_language: python3
        desc: ''
        outputs:
          is_valid:
            type: number
        selected: false
        title: "验证URL"
        type: code
      height: 98
      id: 'validate-url-node'
      position:
        x: 300
        y: 0
      type: custom
      width: 244
    - data:
        cases:
        - case_id: 'true'
          conditions:
          - comparison_operator: '='
            id: 'if-else-url-valid-node'
            value: '1'
            variable_selector:
            - 'validate-url-node'
            - is_valid
        desc: ''
        logical_operator: and
        selected: false
        title: "URL有效性判断"
        type: if-else
      height: 126
      id: 'if-else-url-valid-node'
      position:
        x: 600
        y: 0
      type: custom
      width: 244
    - data:
        desc: ''
        provider_id: http_request
        provider_name: HTTP请求
        provider_type: builtin
        selected: false
        title: "发送HTTP请求"
        tool_parameters:
          method:
            type: constant
            value: GET
          url:
            type: mixed
            value: '{{#start-node.url#}}'
        type: tool
      height: 54
      id: 'http-request-node'
      position:
        x: 900
        y: 0
      type: custom
      width: 244
    - data:
        code: |
          def main(response: dict) -> dict:
              from bs4 import BeautifulSoup
              soup = BeautifulSoup(response['content'], 'html.parser')
              text = soup.get_text()
              images = [img['src'] for img in soup.find_all('img') if 'src' in img.attrs]
              links = [a['href'] for a in soup.find_all('a') if 'href' in a.attrs]
              return {"text": text, "images": images, "links": links}
        code_language: python3
        desc: ''
        outputs:
          text:
            type: string
          images:
            type: list
          links:
            type: list
        selected: false
        title: "解析网页内容"
        type: code
      height: 98
      id: 'parse-content-node'
      position:
        x: 1200
        y: 0
      type: custom
      width: 244
    - data:
        desc: ''
        outputs:
        - value_selector:
          - 'parse-content-node'
          - text
          variable: result_text
        - value_selector:
          - 'parse-content-node'
          - images
          variable: result_images
        - value_selector:
          - 'parse-content-node'
          - links
          variable: result_links
        selected: false
        title: "输出结果"
        type: end
      height: 90
      id: 'output-result-node'
      position:
        x: 1500
        y: 0
      type: custom
      width: 244
    - data:
        desc: ''
        outputs:
        - value: "请输入有效的网页URL。"
          variable: message
        selected: false
        title: "无效URL"
        type: end
      height: 90
      id: 'invalid-url-node'
      position:
        x: 600
        y: 200
      type: custom
      width: 244
    viewport:
      x: 0
      y: 0
      zoom: 1

✔️ Expected Behavior

What's the problem, please?

❌ Actual Behavior

No response

[dosubot]

Hello, @yinmin2020! I'm here to help you with any bugs, questions, or contributions. Let me know how I can assist you!

I found a similar unsolved discussion regarding a client-side exception error: Application error: a client-side exception has occurred (see the browser console for more information) ^[1].

The error you're encountering, "TypeError: Cannot read properties of undefined (reading 'filter')", often occurs when attempting to access a property of an undefined object. In your case, the error originates from the file 7023-22d2def46e6e81aa.js.

Here are a few steps to help debug this issue:

1. Check the YAML File Structure: Ensure that the YAML file structure adheres to the expected format. Dify handles YAML file imports through its DSL file standard, which includes properties like application description, model parameters, orchestration configuration, and other relevant information ^[2].

2. Validate Node Data: The Object.checkValid function is used to validate the configuration or state of different types of nodes within a workflow. Each node type has its own specific checkValid function that ensures the node's data is valid before it can be executed or run ^[3]. Ensure that all nodes in your workflow have valid data.

3. Inspect the filter Method Usage: The error indicates an issue with the filter method. Verify that all arrays or objects being filtered are properly initialized and not undefined.

4. Browser Console Logs: Check the browser console for more detailed error messages and stack traces. This can provide additional context on where the error is occurring and which part of the code is affected.

By following these steps, you should be able to identify and resolve the issue causing the client-side exception. If the problem persists, consider providing more detailed logs or error messages for further assistance.

To continue talking to Dosu, mention @dosu.

[yinmin2020]

I have seen several previous issues with the same problem saying that this problem has been fixed in version 0.6 and later. It seems that this situation will also occur in version 0.8.2. Has it not been fixed?
#6603
#2541

[crazywoola]

Try the v0.8.3.

[yinmin2020]

尝试 v0.8.3。

I am using version 0.8.3, importing DSL file is still reporting this error, stable recurrence. I have uploaded my own DSL file, please check whether it is caused by the DSL file error, thank you.
Uploading 爬虫.yml.zip…

[crazywoola]

It seems to be a version mismatch of the importing process, we plan to add a check later. I will close this for now.