Umi Max的一些坑合集

开年第一文

Umi Max的坑

1. Umi打包优化

参考https://blog.csdn.net/qq_43382853/article/details/108385665

2. 导航栏在左侧，想放到顶部

.umirc.ts中开启配置layout: {}

layout: ‘mix’放到app.tsx中设置

3. app.ts中使用组件报错

例如：app.ts中设置 rightRender: () => 报错
app.ts改为app.tsx

4. 找不到模块“./index.less”或其相应的类型声明

typings.d.ts文件

// typings.d.ts
declare module '*.module.less' {
    const classes: Readonly<Record<string, string>>;
    export default classes;
    declare module '*.less';
}

tsconfig.json

我的完整tsconfig.json文件

{
"extends": "./src/.umi/tsconfig.json",
"compilerOptions": {
"target": "esnext",
"module": "esnext",
"moduleResolution": "node",
"resolveJsonModule": true,
"importHelpers": true,
"jsx": "react-jsx",
"esModuleInterop": true,
"sourceMap": true,
"baseUrl": "./",
"strict": true,
"paths": {
"@/*": ["src/*"],
"@@/*": ["src/.umi/*"]
},
"allowSyntheticDefaultImports": true
},
"include": [
"mock/**/*",
"src/**/*",
"config/**/*",
".umirc.ts",
"typings.d.ts",
"**/*.less"
],
"exclude": [
"node_modules",
"lib",
"es",
"dist",
"typings",
"**/__test__",
"test",
"docs",
"tests"
]
}

5. 配置openapi

在config.ts中配置
presets: ['umi-presets-pro'],
// plugins: ['@umijs/max-plugin-openapi'],
openAPI: [
{
	requestLibPath: "import {request} from '@/api/request'",
	// requestLibPath: "import { request } from 'umi'",
	// schemaPath: path.join(__dirname, 'openapi.json'),
	schemaPath:
	'https://gw.alipayobjects.com/os/antfincdn/M%24jrzTTYJN/oneapi.json',
	// 'https://gw.alipayobjects.com/os/antfincdn/CA1dOm%2631B/openapi.json',
	mock: true,
	projectName: 'demo',
},
],

然后执行"max openapi"

6. 使用openapi报错

使用openapi报错

TypeError: Cannot read properties of undefined (reading 'split')
            Object.assign(Object.assign({ projectName: pageConfig.name.split('/').pop()

在package.json中加上name: “”

7. 找不到模块“@/assets/images/xx.jpg”或其相应的类型声明。

typings.d.ts中把import '@umijs/max/typings';注释掉

8. 报错 TS2786 ‘Component’ cannot be used as a JSX component

参考https://stackoverflow.com/questions/71831601/ts2786-component-cannot-be-used-as-a-jsx-component

9. 在一个ts文件中的独立函数中如何使用umi的useIntl来实现国际化

参考 https://github.com/umijs/umi/issues/5555

import { getIntl, getLocale } from 'umi';

function test() {
  const intl = getIntl(getLocale());
  console.log(
           intl.formatMessage({
              id: 'system.hello',
              description: 'Hello',
            })
  );
}

补充：
报错cannot read properties of undefined (reading 'applyplugins’)
看第10条

10. 补充：useIntl出现报错cannot read properties of undefined (reading 'applyplugins’)

要放在函数中，不然可能会出现报错cannot read properties of undefined (reading 'applyplugins’)
例如：

const f = (params: any) => {
    const { formatMessage } = getIntl(getLocale());
    return formatMessage(params);
};

调用

console.log(f({id: ‘xxx'}))

11. global.less中设置样式无效

使用global.css

12. umi4不开启页面级分包，就只有打包成一个umijs

如何关闭分包
https://github.com/umijs/umi/issues/8578

13. 后端返回为空时的处理

在响应拦截器中使用

request.interceptors.response.use(async (response: any, options: any) => {
    const token = localStorage.getItem('token');
    if (response.status === 401) {
        message.error(f({ id: 'request.login.error' }));
        return;
    }

    if (response.status === 401 || response.status === 403) {
        message.error(f({ id: 'request.login.expired' }));
        localStorage.removeItem('token');
        history.push('/login');
        return;
    }
    const res = await response.clone().text(); // 针对后端返回为空的情况
    // 截获某些成功但返回为空的响应，例如204，由于后端只返回空字符串’'，
    // 不便于处理，所以我将其转换为‘ok’返回
    if (response.ok && !res) {
        return 'ok'; // 返回自定义值
    }
    return response;
});

参考 https://juejin.cn/post/7135811034287177765

async function resultReduction(response) { 
    let res = ‘' 
    switch (response.responseType) { 
        case 'json’: 
            res = await response.json() 
            break 
        case 'text’: 
            res = await response.text()
            break 
        default: 
            res = await response.json() 
            break
    } 
    return res 
}

14. ProFormText.Password关闭自动填充浏览器保存的密码

直接使用fieldProps={{ autoComplete: 'off' }}是无效的
解决

<ProFormItem
    name=“paw"
    label={f({ id: 'psw' })}
    rules={[
        {
            required: true,
            message: f({ id: 'rule.required' }),
        },
    ]}
>
    <Input.Password autoComplete="new-password" />
</ProFormItem>

15. 常见的一些faq 收集

[discussion] 常见的一些faq 收集 #8930
https://github.com/umijs/umi/issues/8930