umi 4 踩坑

1. route结合layout布局，头部会重复显示

umi4 layout 重复输出 html 结构 #10392 别人也遇到了这种情况，下面是正确的代码

const routes = [
  {
    path: '/login',
    component: '@/pages/login',
    layout: false,
  },
  {
    path: '/',
    component: '@/layouts',
    layout: false,
    wrappers: ['@/wrappers/auth'],
    routes: [
      { path: '/', redirect: '/knowledge' },
      {
        path: '/knowledge',
        component: '@/pages/knowledge',
      },
    ],
  },
  {
    path: '/*',
    component: '@/pages/404',
    layout: false,
  },
];

结合下面的回答
跟官方文档，在component: '@/layouts',层面设置layout:false解决了问题，如下

2. 全局配置less文件，且让vscode可以提示less变量

如何配置全局less变量文件？ #4131 有详细的配置，在.umirc做如下配置，其他less文件就可以使用公共的变量啦。

  lessLoader: {
    modifyVars: {
      hack: `true; @import "~@/less/variable.less";`,
    },
  },

这还不够，输入的时候vscode没法提示变量名，这时候Less IntelliSense出现啦，可以愉快的引用公共less变量了，对mixin也支持的。当然不做全局配置，直接在less文件@import '~@/less/variable.less';也是可行的，全局配置就是不用每次在less文件中引入。

3. umijs 不支持动态icon

写死为静态没问题

4. umijs4 不配置asset也可以加载font文件

本以为做以下配置才能加载自定的字体文件，

  chainWebpack(memo, args) {
    memo.module
      .rule('font')
      .test(/\.(woff|woff2|eot|ttf|otf)$/i)
      .type('asset/resource');
    console.info(memo.toString());
  },

结果只要做下面的配置就可以加载字体文件了

@import url(./inter.less); // 字体文件样式

body {
  font-family: Inter;
}

inter.less

@font-face {
  font-family: InterVariable;
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('@/assets/inter/InterVariable.woff2') format('woff2');
}

查看webpack的配置并没有发现针对字体文件的配置，有待探讨

5. from Terser plugin Transform failed with 1 error:

build error（Transform failed with 1 error( Terser plugin )） #9931

6. 在 umijs@4.0.90 项目中引用markdown文件并渲染

做如下配置

  chainWebpack(memo, args) {
    memo.module
      .rule('markdown')
      .test(/\.md$/)
      .use('html-loader')
      .loader('html-loader')
      .end()
      .use('remark-loader')
      .loader('remark-loader');

    return memo;
  },

项目直接报错，在在纯webpack项目下做尝试，发现经过remark-loader或者markdown-loader编译出来的md字符串完全没问题，于是想到应该是umijs的问题，在umirc尝试输入md,发现有mdx这个配置，发现

mdx: {
    loader?: (string | undefined);
    loaderOptions?: ({ [x: string]: any } | undefined);
};

文档：

做了尝试：

  mdx: {
    loader: 'remark-loader',
  },
  chainWebpack(memo, args) {
    memo.module
      .rule('markdown')
      .test(/\.md$/)
      .use('html-loader')
      .loader('html-loader')
      .end()
      .use('remark-loader')
      .loader('remark-loader');

    return memo;
  },

居然可以使用了，但是单独设置，居然会报错

  mdx: {
    loader: 'remark-loader',
  },

官方文档没有任何说明，自己猜测尝试居然跑起来了。

补充：
在构建docker镜像的时候，报错，

62.57 fatal - Error: ERROR in ./src/components/api-service/chat-overview-modal/api-content.tsx 4:0-59
62.57 Module not found: Error: Can't resolve '../../../../../docs/references/api.md' in '/ragflow/web/src/components/api-service/chat-overview-modal'

做了各种排查，翻阅webpack相关文档，对其进行配置，发现并不需要remark-loader,只需要做如下配置，读取markdown文件为字符串喂给react-markdown就行了。

  chainWebpack(memo, args) {
    memo.module.rule('markdown').test(/\.md$/).type('asset/source');

    return memo;
  },

至于上述报错说找不到文件是因为dockerfile配置的问题

# builder stage
FROM base AS builder
USER root

WORKDIR /ragflow

RUN --mount=type=cache,id=ragflow_builder_apt,target=/var/cache/apt,sharing=locked \
    apt update && apt install -y nodejs npm cargo && \
    rm -rf /var/lib/apt/lists/*

COPY web web
RUN --mount=type=cache,id=ragflow_builder_npm,target=/root/.npm,sharing=locked \
    cd web && npm i --force && npm run build

我引用的api.md结构如下

并不在api.md并不在web目录下，所以要做如下修改

# builder stage
FROM base AS builder
USER root

WORKDIR /ragflow

RUN --mount=type=cache,id=ragflow_builder_apt,target=/var/cache/apt,sharing=locked \
    apt update && apt install -y nodejs npm cargo && \
    rm -rf /var/lib/apt/lists/*

COPY web web
COPY api api # 新增

RUN --mount=type=cache,id=ragflow_builder_npm,target=/root/.npm,sharing=locked \
    cd web && npm i --force && npm run build