Next.js导入Webflow Devlink组件遇JSX Namespace错误求助

错误根源 #

你遇到的JSX Namespace is disabled错误，和是否添加'use client;'无关——根本原因是Webflow导出的组件里混入了Thymeleaf模板语法（那些th:开头的属性，比如th:each、th:src），这类是Java模板引擎的语法，React/Next.js的JSX不支持这种命名空间属性。

解决方案 #

直接清理Thymeleaf属性，替换为React标准语法：

1. 移除所有th:前缀的属性
   删掉组件里的th:each、th:src、th:text、th:href这些属性。

2. 用React语法替换模板逻辑

   • 原th:each="process: ${processes}"：不要在组件内部写循环，改成在父组件里用map循环渲染ProductItem，把单个process数据传给组件。
   • 原th:src="${process.imageUrl}"：替换为标准JSX属性src={process.imageUrl}
   • 原th:text="${process.name}"：用大括号绑定变量，写成{process.name}
   • 原th:href="@{/executions/execute/${step.stepId}}"：替换为href={/executions/execute/${step.stepId}}

3. 调整组件Props
   让ProductItem接收需要的数据作为props，示例修改后的组件：

// 仅当组件需要客户端交互时加这行，不是解决当前错误的必需项
'use client;'

export function ProductItem({ process, step }) {
  return (
    <div className={_utils.cx(_styles, "product2_item")}>
      <_Builtin.Block
        className={_utils.cx(_styles, "margin-bottom", "margin-xsmall")}
        tag="div"
      >
        <_Builtin.Link
          className={_utils.cx(_styles, "product2_image-link")}
          button={false}
          block="inline"
          options={{
            href: "#",
          }}
        >
          <_Builtin.Block
            className={_utils.cx(_styles, "", "product2_image-wrapper")}
            tag="div"
          >
            <_Builtin.Image
              className={_utils.cx(_styles, "product2_image")}
              height="auto"
              loading="lazy"
              width="auto"
              src={process.imageUrl}
              alt={process.name || ""}
            />
          </_Builtin.Block>
        </_Builtin.Link>
      </_Builtin.Block>
      
      {/* 省略其余重复结构，仅保留关键修改示例 */}
      <_Builtin.Block
        className={_utils.cx(_styles, "text-size-medium", "text-weight-semibold")}
        tag="div"
      >
        {process.name}
      </_Builtin.Block>

      <_Builtin.Link
        className={_utils.cx(_styles, "button", "is-secondary", "is-small", "max-width-full")}
        button={true}
        href={`/executions/execute/${step.stepId}`}
        block=""
        options={{
          href: `/executions/execute/${step.stepId}`,
        }}
      >
        Ausführen
      </_Builtin.Link>
    </div>
  );
}

4. 父组件中循环渲染
   在使用ProductItem的地方，传入数据并循环：

{processes.map((process, index) => (
  <ProductItem key={index} process={process} step={step} />
))}

额外说明 #

如果你的组件需要客户端交互（比如点击事件、状态管理），再在组件顶部添加'use client;'，但这和当前的JSX命名空间错误无关，之前尝试无效是因为没触及问题根源。

内容的提问来源于stack exchange，提问作者Sebastian Riemer