umi实践问题集锦

开发环境：
umi: 3.5.18
node: v14.15.1
系统： windows

本文主要记录在项目实践过程中的一些特定场景问题，仅供参考：

webpackChain自定义loader报错：this.getOptions is not a function

场景：
添加loader解析makdown文件转换为html展示，使用webpackChain增加remark-loader,html-loader报错。

export default {
    ...
    chainWebpack(config){
        config.module
        .rule('compile-md')
        .test(/\.md$/)
            .use("html-loader")
            .loader("html-loader")
            .end()
            .use("markdown-loader")
    }
    ...
}
  

解决：
关闭webpack5编辑即可，修改umi配置config.js 或 .umirc.js：

export default {
    ...
    webpack5:false,
    ...
}

SSR(服务端渲染)下不支持mfsu、@umijs/preset-ui(区块)

SSR(服务端渲染)在第一次请求后，点击导航菜单，路由发生切换跳转新的页面并未向服务器发起请求获取新的页面，而是本地做的页面重新渲染。

解决：
将NavLink组件替换为a标签

SSR(服务端渲染)请求服务器Css和js文件，返回的是html内容。

解决：
如果配置了hash:true,关闭打包文件的hash功能即可,因为umi.server.js里面对js和css的引用地址没有加hash，比如你打包出来的文件名是umi.adsjsnd.css,但是umi.server.js对css的引用文件名是umi.css,所以访问不到对应的资源，返回的都是html。修改配置config.js或.umirc.js：

export default {
    ...
    hash:false
    ...
}

如果没配置hash:true,参考这个issues:https://github.com/umijs/umi/issues/4808

开启mfsu:{}报错：1. Can't read property 'ModuleFederationPlugin' of undefined.

解决：
请确认 mfsu:{} 被添加到 config.ts 而不是 config.dev.ts 或者 config.prod.ts。

开启 webpack5:{}, SSR失效，网页查看网页源码发现没有内容

解决：
关闭webpack5