GithubHelp home page GithubHelp logo

umijs / plugins Goto Github PK

View Code? Open in Web Editor NEW
341.0 21.0 241.0 5.42 MB

🍣 The one-stop shop for official Umi plugins and presets.

JavaScript 19.92% TypeScript 61.49% CSS 0.10% Smarty 17.87% Less 0.63%

plugins's Introduction

@umijs/plugins

codecov GitHub Actions status

Official umi plugins and presets.

Plugins

plugins list

  • plugin-access,权限管理
  • plugin-analytics,统计管理
  • plugin-antd,整合 antd UI 组件
  • plugin-crossorigin,通常用于 JS 出错统计
  • plugin-dva,整合 dva
  • plugin-helmet,整合 react-helmet,管理 HTML 文档标签(如标题、描述等)
  • plugin-initial-state,初始化数据管理
  • plugin-layout,配置启用 ant-design-pro 的布局
  • plugin-locale,国际化能力
  • plugin-model,基于 hooks 的简易数据流
  • plugin-request,基于 umi-request 和 umi-hooks 的请求方案

LICENSE

MIT

plugins's People

Contributors

afc163 avatar ariel-cheng avatar ashonea avatar brickspert avatar chemdemo avatar chenshuai2144 avatar deturium avatar devxiaolan avatar duwonders avatar hilanxiao avatar janyoowu avatar jiyingzhi avatar jtsang4 avatar kuitos avatar leftstick avatar map1en avatar peachscript avatar qhanw avatar shushushv avatar soolx avatar sorrycc avatar thinkingc avatar thonatos avatar ttys026 avatar twinkle77 avatar xiaohuoni avatar xiefengnian avatar ycjcl868 avatar zackstsang avatar zhanba avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

plugins's Issues

@umijs/plugin-request新问题

@umijs/plugin-request由于封装一层在异步调用后初始化相关方法,导致以前的request.get(url[, options])、request.post(url[, options])、request.delete(url[, options])、request.patch(url[, options])等快捷方法无法使用,最致命的就是request.interceptors.request.use这无法使用了

@umijs/plugins-layout icon应该如何配置

//pages
DashBoard.menu = {
name: 'DashBoard',
icon:'user'
}
//.umi/core/routes.ts
{
"path": "/DashBoard",
"exact": true,
"component": require('@/pages/DashBoard/index.tsx').default,
"menu": {
"name": "DashBoard",
"icon": "user"
}
//浏览器里
userDashBoard ???
icon 并没有被处理 而是直接返回了字符串;
以下写法也并没有被umi识别处理
icon:()=>;
icon:Icon;
但是不使用icon 收起菜单的效果又很差 ;
想问问是不是我的写法上存在问题;

umi3 使用 plugin-qiankun 时 runtimePlugin.js 内的apps 为undefined

尝试使用 umi3 + qiankun 做微前端, 然后模仿 plugins 内的 plugin-qiankun/examples 来搭 master,但是运行后在 runtimePlugin.js 内的 appsundefined

image

在chrome内调试可以看到 runtimePlugin.js 内的

async function getMasterRuntime() {
  const config = plugin.applyPlugins({
    key: 'qiankun',
    type: ApplyPluginsType.modify,
    initialValue: {},
    async: true,
  });
  const { master } = config;
  return master || config;
}

这里的 configPromise 对象

image

可重现最小仓库

这里参考 plugin-qiankun/examples/master/app.js

import request from './services/request';

export const qiankun = request('/apps').then(apps => ({ apps }));

.umirc.ts 的配置

import { defineConfig } from 'umi';

export default defineConfig({
  analyze: {
    analyzerMode: 'server',
    analyzerPort: 8889,
    openAnalyzer: true,
    // generate stats file while ANALYZE_DUMP exist
    generateStatsFile: false,
    statsFilename: 'stats.json',
    logLevel: 'info',
    defaultSizes: 'parsed', // stat  // gzip
  },
  base: '/qiankun_portal/',
  hash: true,
  ignoreMomentLocale: true,
  nodeModulesTransform: {
    type: 'none',
  },
  publicPath: '/qiankun_portal/',
  routes: [{ path: '/', component: '@/pages/index' }],
  qiankun: {
    master: {
      defer: true,
      jsSandbox: true,
      prefetch: true,
    },
  },
  proxy: {
    '/api': {
      target: 'http://localhost:8000',
      changeOrigin: true,
    },
    '/api/app1': {
      target: 'http://localhost:8001',
      changeOrigin: true,
    },
    '/api/app3': {
      target: 'http://localhost:8002',
      changeOrigin: true,
    },
  },
});

plugin-request依赖antd的组件,不装antd会造成无法使用

plugin-request依赖antd的message, notification组件,如果不装antd,或造成插件无法使用,作为一个单独插件来说,设计上不要太依赖antd吧,没法做到通用。如果必须引用,用户的是antd-mobile,request error的组件是否要换成mobile端的呢?plugin-antd是内置了antd和antd-mobile,这里是否要做切换?

plugin-layout插件中运行时配置不生效以及报错问题

What happens?

1、使用@umijs/plugin-layout插件时,app.ts运行时配置onError、ErrorComponent不生效;

2、当ts代码报错时,使用@umijs/plugin-layout并且@umijs/plugin-locale未开启的情况下,useIntl为undefined,导致@umijs/plugin-layout代码报错,

webpack:///./node_modules/@umijs/plugin-layout/lib/utils/intl.js #56行。
`Uncaught TypeError: (0 , _umi(...).useIntl) is not a function`
`const intl = (0, _umi().useIntl)();`

Mini Showcase Repository(REQUIRED)

https://github.com/liquorxm/umi-useIntl

How To Reproduce

1、通过访问 http://localhost:8000/setting 页面复现 onError 不生效、以及问题2,切换config/config.ts中locale注释来查看useIntl导致的代码报错;

2、通过访问 http://localhost:8001/dashboard 页面复现ErrorComponent不生效问题。

Context

  • Umi Version: 3.1.0
  • Node Version: v12.16.1
  • Platform: Google Chrome 80.0.3987.163

使用@umijs/plugin-request进行项目配置数据类型不一致

What happens?

如图所示,在errorConfig.errorPage的数据类型应该是ErrorShowType或者number类型吧.目前为string,导致ts文件会产生异常.同时,下边的拦截器中,默认options: RequestOptionsInit的数据类型无法从Umi中导出,应该也属于bug了
image

Mini Showcase Repository(REQUIRED)

Provide a mini GitHub repository which can reproduce the issue. Use yarn create @umijs/umi-app then upload to your GitHub

How To Reproduce

Steps to reproduce the behavior: 1. 2.

Expected behavior 1. 2.

Context

  • Umi Version:
  • Node Version:
  • Platform:

plugin-dva - immer Reducer 类型问题

现在的 Reducer 类型并不适用于 immer 模式

复现

import { Effect, Reducer, Subscription } from 'umi'

export interface IState {
  count: 0
}

export interface IModel {
  namespace: 'foo'
  state: IState
  effects: {
    init: Effect
  }
  reducers: {
    update: Reducer<IState>
  }
  subscriptions: { setup: Subscription }
}

const TestModel: IModel = {
  namespace: 'foo',

  state: {
    count: 0,
  },

  effects: {
    *init({ payload }, { call, put }) {
      yield put({
        type: 'update',
        payload: 1,
      })
    },
  },
  reducers: {
    // error
    update(state, { payload }) {
      // error
      state.count = payload
    },
  },
  subscriptions: {
    setup({ dispatch, history }) {
      dispatch({
        type: 'init',
      })
    },
  },
}

export default TestModel

error

修复

plugin-dva -> src -> connect.tpl 中添加一个 ImmerReducer 类型

export type ImmerReducer<S = any, A extends Action = AnyAction> = (
  state: S,
  action: A
) => void

plugin-layout 无法动态更新导航栏

plugin-layout

https://github.com/umijs/plugins/blob/master/packages/plugin-layout/src/layout/index.tsx#L28

此处 lodding 始终为 false,无法重新渲染,改为 initialState 正常

修复

const menus = useMemo(
  () => patchMenus(getMenuDataFromRoutes(_routes[0].routes), initialInfo),
  [loading],
);

plugin-access

https://github.com/umijs/plugins/blob/master/packages/plugin-access/src/utils/runtimeUtil.ts#L7

直接修改 routes 导致 getMenuFromRoutememoize-one 接收到的参数始终相同,从而无法触发 formatter 执行,从而导致菜单栏始终无法重新渲染

修复

const resultRoutes: Routes = [].concat(routes as any).map(resultRoute => {
  return { 
    ...resultRoute,
    routes: resultRoute.routes.map(route => ({ ...route }))},
});

Todo Plugins

  • script
  • style
  • favicon
  • antd
  • antdpro
  • dva
  • mf (micro fontend intl)
  • i18n (i18n intl)
  • react
  • request
  • router
  • axios
  • styled

[RFC]@umijs/plugin-qiankun 2.0 的用法改进

1.x 的用法是在插件里注册一组应用数据:

'@umijs/plugin-qiankun',
  {
  master: {
    // 注册子应用信息
    apps: [
      {
        name: 'app1', // 唯一 id
        entry: '//localhost:7001', // html entry
        base: '/app1', // app1 的路由前缀,通过这个前缀判断是否要启动该应用,通常跟子应用的 base 保持一致
        history: 'browser', // 子应用的 history 配置,默认为当前主应用 history 配置
      },
      {
        name: 'app2',
        entry: {
          // TODO 支持 config entry
          scripts: [],
          styles: [],
        },
        base: '/app2',
      },
    ],
    jsSandbox: true, // 是否启用 js 沙箱,默认为 false
    prefetch: true, // 是否启用 prefetch 特性,默认为 true
  },
},

当用户场景比较简单,比如所有的应用渲染到一个固定的容器里,这个使用方式足够 cover 了。

但一旦场景复杂了,会触发各种问题或者咨询。

比如子应用挂载的容器是动态渲染的:

<Layout>
  <Router>
  	<Route path="/app1"><AppContainer id="container1"/></Route>
    <Route path="/app2"><AppContainer id="container2"/></Route>
  </Router>
</Layout>

由于路由及事件都是异步的,这种场景下很难确保子应用的 mount 已经开始的时候,对应路由的 Route 组件是已经渲染完毕的,导致由于子应用找不到挂载点而抛异常的问题出现。

而且现在在 plugin 场景下,默认都是 route-based 的用法,对于 bigfly 之类的场景,期望应用在某个指定的局部渲染,而本身跟路由是无关的,支持起来也会比较麻烦。

期望的方式

插件配置只需要配置纯粹的子应用元信息,如只需要有 nameentry 这两个字段:

'@umijs/plugin-qiankun',
  {
  master: {
    // 注册子应用信息
    apps: [
      {
        name: 'app1', // 唯一 id
        entry: '//localhost:7001', // html entry
      },
      {
        name: 'app2',
        entry: '//localhost:7002',
      },
    ],
    jsSandbox: true, // 是否启用 js 沙箱,默认为 false
    prefetch: true, // 是否启用 prefetch 特性,默认为 true
  },
},

应用还是全量在插件配置里注册,好处是可以集中管理子应用信息,也可以方便的做预加载,但是应用激活不再单一的依赖路由状态。

直接基于 umi 的路由配置关联子应用

比如可以直接在 umi routes 里这样配置:

const routes = [
  {
    path: '/app1',
    microApp: 'app1'
  },
  {
    path: '/app2',
    microApp: 'app2'
  },
  {
    path: '/app3',
    microApp: 'app3'
  },
]

在实现上,配置了 microApp 的路由,插件会自动生成一个容器组件,并添加到 component 属性上,容器组件的实现里负责激活对应的应用,并在容器销毁时卸载应用。这样就能很好的保证子应用加载过程中的时序。

直接使用 React 组件渲染子应用

当我们希望不依赖路由配置,将子应用渲染到任意我们期望的地方时,这样用就可以了:

import { MicroApp } from 'umi';

function MyPage() {
  return (
    <div>
      <div>
        <MicroApp name="app1" />
      </div>
    </div>
  )
}

MicroApp 也是由插件生成,可以直接复用路由方式生成的容器组件。

可能存在的问题

  1. 不支持主应用接入其他 history 模式的子应用,也就是主子应用 history mode 必须一致。不确定 umi 场景下这种用户有多少。
  2. qiankun 可能要做些改造,而且现阶段的能力改造后也不定能支持。因为现在这种方式实际上应用的 activeRule 是变化的,同一个应用放到不同的容器里 activeRule 就完全不同,而在目前 qiankun/single-spa 的逻辑里,每个子应用的 activeRule 是固定的。
  3. 第二种直接用 MicroApp 组件渲染的方式,子应用大概率要求不能是有路由的系统,不然就会有改造的需求,因为有路由意味着子应用不是在什么 url 下都能渲染的。
  4. 微应用嵌套?感觉不是插件需要考虑的。

[plugin-access]权限路由生成有问题

What happens?

image


如图所示,当权限定义为对象形式的时候,生成的.umi临时文件里面的routes是错误的,
同时发现,如果已经npm run start启动了服务 再去修改路由里面的access的值,.umi/core/routes文件内容不会更新。

Mini Showcase Repository(REQUIRED)

Provide a mini GitHub repository which can reproduce the issue. Use yarn create @umijs/umi-app then upload to your GitHub

How To Reproduce

Steps to reproduce the behavior: 1. 2.

Expected behavior 1. 2.

Context

  • Umi Version:
  • Node Version:
  • Platform:

@umijs/plugin-request功能bug

@umijs/plugin-request插件的构建时配置和运行时配置均不起作用,我按照文档示例配置如下:

import { RequestConfig } from 'umi';

export const request: RequestConfig = {
timeout: 1000,
errorConfig: {},
middlewares: [],
};
运行时配置不起作用

plugin-layout 的两个问题

两个问题,

  1. 渲染两次(初始化时,以及 HMR 时)
  2. componentWillMount renamed 警告信息

image

复现步骤,

  1. 找个空目录
  2. 安装依赖,yarn add umi @umijs/playout-layout
  3. 生成最简页面,npx umi g page index
  4. 配置,echo 'export default {layout:{}}' > .umirc.ts
  5. 编辑 pages/index.js,函数体内加入一行 console.log(1);
  6. npx umi dev

initial-state 插件引起的兼容性问题

复现步骤,

  1. yarn create @umijs/umi-app
  2. 安装依赖
  3. 配置 targets 为 { ie: 9 }
  4. COMPRESS=none yarn build,不压缩构建
  5. serve ./dist
  6. 在 IE9 中打开,报错

image

禁用 initialState 后正常,

  1. 配置 initialState: false
  2. 重复前面的 4-6 步骤,正常

image

@umijs/plugin-dva

image
生成的connect.ts loading models key出错,要加“”。
用文件名做key不太合理 。都是用model做文件名了,一大堆重复的
image

[Bug] build出现错误,必须先dev一下

What happens?

我本地dev开完之后,本地build打包没有问题。
推到服务器构建就出了问题。
初步判断。如果不dev一下,直接打包会报错。
如果不dev一下,src/.umi就会不存在,直接build就会出问题,会生成src/.umi和src/.umi-production

报错信息如下

umi proxy [/auth] ====> http://courseauth.uae.shensz.local

✖ Webpack
  Compiled with some errors in 48.72s

 ERROR  Failed to compile with 2 errors                                                          13:47:24

This dependency was not found:

* @/.umi/qiankunContext in ./node_modules/@umijs/plugin-qiankun/lib/slave/runtimePlugin.js, ./src/.umi-production/core/umiExports.ts

To install it, you can run: npm install --save @/.umi/qiankunContext
Child
    
    ERROR in ./node_modules/@umijs/plugin-qiankun/lib/slave/runtimePlugin.js
    Module not found: Error: Can't resolve '@/.umi/qiankunContext' in '/Users/elelee/Desktop/projects/guocha/node_modules/@umijs/plugin-qiankun/lib/slave'
     @ ./node_modules/@umijs/plugin-qiankun/lib/slave/runtimePlugin.js 30:17-49
     @ ./src/.umi-production/core/plugin.ts
     @ ./src/.umi-production/umi.ts
     @ multi ./node_modules/@umijs/bundler-webpack/lib/getConfig/runtimePublicPathEntry.js ./src/.umi-production/umi.ts
    
    ERROR in ./src/.umi-production/core/umiExports.ts
    Module not found: Error: Can't resolve '@/.umi/qiankunContext' in '/Users/elelee/Desktop/projects/guocha/src/.umi-production/core'
     @ ./src/.umi-production/core/umiExports.ts 6:0-55 6:0-55
     @ ./node_modules/umi/dist/index.esm.js
     @ ./node_modules/@umijs/plugin-qiankun/lib/slave/lifecycles.js
     @ ./src/.umi-production/umi.ts
     @ multi ./node_modules/@umijs/bundler-webpack/lib/getConfig/runtimePublicPathEntry.js ./src/.umi-production/umi.ts
build failed
Error: build failed
    at compiler.run (/Users/elelee/Desktop/projects/guocha/node_modules/@umijs/bundler-webpack/lib/index.js:107:27)
    at finalCallback (/Users/elelee/Desktop/projects/guocha/node_modules/webpack/lib/MultiCompiler.js:254:12)
    at runWithDependencies.err (/Users/elelee/Desktop/projects/guocha/node_modules/webpack/lib/MultiCompiler.js:277:6)
    at done (/Users/elelee/Desktop/projects/guocha/node_modules/neo-async/async.js:2931:13)
    at runCompilers (/Users/elelee/Desktop/projects/guocha/node_modules/webpack/lib/MultiCompiler.js:181:48)
    at err (/Users/elelee/Desktop/projects/guocha/node_modules/webpack/lib/MultiCompiler.js:188:7)
    at compiler.run (/Users/elelee/Desktop/projects/guocha/node_modules/webpack/lib/MultiCompiler.js:270:7)
    at finalCallback (/Users/elelee/Desktop/projects/guocha/node_modules/webpack/lib/Compiler.js:257:39)
    at hooks.done.callAsync.err (/Users/elelee/Desktop/projects/guocha/node_modules/webpack/lib/Compiler.js:273:13)
    at AsyncSeriesHook.eval [as callAsync] (eval at create (/Users/elelee/Desktop/projects/guocha/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:42:1)
    at AsyncSeriesHook.lazyCompileHook (/Users/elelee/Desktop/projects/guocha/node_modules/tapable/lib/Hook.js:154:20)
    at onCompiled (/Users/elelee/Desktop/projects/guocha/node_modules/webpack/lib/Compiler.js:271:21)
    at hooks.afterCompile.callAsync.err (/Users/elelee/Desktop/projects/guocha/node_modules/webpack/lib/Compiler.js:681:15)
    at AsyncSeriesHook.eval [as callAsync] (eval at create (/Users/elelee/Desktop/projects/guocha/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:6:1)
    at AsyncSeriesHook.lazyCompileHook (/Users/elelee/Desktop/projects/guocha/node_modules/tapable/lib/Hook.js:154:20)
    at compilation.seal.err (/Users/elelee/Desktop/projects/guocha/node_modules/webpack/lib/Compiler.js:678:31)
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
  • umi:3.0.14不锁死,用了3.0.16跑都跑不了

最小可复现仓库

https://github.com/lei3536/qiankunSonApp

复现步骤,错误日志以及相关配置

相关环境信息

  • qiankun 版本
    "@umijs/plugin-qiankun": "2.0.5";
    "umi": "3.0.14"
    "@umijs/preset-react": "^1.4.8",
  • 操作系统
    node版本 12.16.1 和 10.15.3

plugin-layout、plugin-initial-state、plugin-access 三个插件结合使用问题

1.plugin-initial-state中存放角色 ,
2.plugin-access 插件定义权限,
3.plugin-layout 渲染权限内相应菜单。
问题:当动态修改了plugin-initial-state中的角色后,plugin-layout插件会渲染出相应的菜单,但是点击菜单后会出现 403 无权限访问页面。plugin-layout源码index.tsx中定义了layoutConfig 变量,是否应该修改成当plugin-initial-state中的属性发生变化时会触发重新更新layoutConfig?

@umijs/plugin-locale createIntl支持额外参数

What happens?

react-intl createIntl支持以下属性:

image

目前locale插件中的createIntl方法不支持自定义传入额外参数
image

由于想自定义react-intl的错误消息输出,需要自定义onError函数。
目前无法实现

  • Umi Version: 3.1.0

plugin request 配置app.ts没有生效

umi 3.0.8

export const request: RequestConfig = {
  timeout: 6000,
  prefix: '/api',
  errorConfig: {
    adaptor: resData => {
      console.log('resData', resData);
      return {
        data: resData.data,
        success: resData.status === 'ok',
        errorMessage: resData.message,
      };
    },
  },
  middlewares: [],
};

执行代码,

 const data = await request<ArticleItem[]>('/blog/article', {
        params: {
          page: params.current,
          size: params.pageSize,
        },
      });

结果:
data 仍然是resData,没有success

plugin-locale 配置项title:True 无效

package.json 如下

"dependencies": {
"@ant-design/pro-layout": "^5.0.7",
"@types/classnames": "^2.2.10",
"@umijs/preset-react": "1.x",
"@umijs/test": "^3.0.13",
"classnames": "^2.2.6",
"lint-staged": "^10.0.7",
"prettier": "^1.19.1",
"react": "^16.12.0",
"react-dom": "^16.12.0",
"umi": "^3.0.13",
"umi-plugin-antd-icon-config": "^2.0.0",
"yorkie": "^2.0.0"
}

config/config.ts 配置如下

import { defineConfig } from 'umi';
import routes from './router';

export default defineConfig({
targets: {
ie: 11,
},
locale: {
default: 'zh-CN',
antd: true,
title: true,
baseNavigator: true,
baseSeparator: '-',
},
antd: {},
dva: {hmr: true},
dynamicImport: {
loading: '@/components/PageLoading',
},
title: 'site.title',
routes,
});

locales/zh-CN.ts如下

export default {
'site.title': '测试系统',
}

浏览器tab的title展示为site.title,预期应为 locale/zh-CN.ts 内的“测试系统”

[plugin-locale] 无法对title起作用 且 语言切换会导致 项目整个的state被清除

环境和版本:

umi版本: 3.1.2
preset-react版本: 1.4.18
系统: mac os 10.15.3
浏览器: opera 67.0.3575.137

问题

  1. 语言切换时, 无法对title起作用
  2. 语言切换会导致 项目整个的state被清除, 且所有useEffect重新执行

可重重现问题代码
https://github.com/free-pan/umi-project-init/tree/dev

问题重现步骤

  1. 按照readme进行依赖安装和运行, 浏览器打开: http://localhost:8000/login
  2. 执行语言切换, 观察界面变化, 以及web控制台的输出

详细描述:

const [langArr, setLangArr] = useState([]); // 进行语言切换时 langArr 总是为空数组
useEffect(() => {
    console.log('Login组件挂载完毕!'); // 每次进行语言切换, 都会执行这段逻辑
    const timeouFlag = setTimeout(() => {
      // 动态添加语言信息
      const localeMessages = {
        'site.title': 'English Title',
        'about.title': 'About - Title',
        'login.panel': 'User Login',
      };
      addLocaleByDynamic('en-US', localeMessages);
      setLangArr((preValue) => {
        console.log('preValue', preValue);
        if (preValue.length > 0) {
          return preValue;
        } else {
          return [
            { lang: 'zh-CN', text: '🇨🇳简体中文' },
            { lang: 'en-US', text: '🇺🇸English' },
          ];
        }
      });
    }, 5000);
    return () => clearTimeout(timeouFlag);
  }, []);

url 不是string的异常

写为如下方式

import { Link, request ,useRequest} from 'umi';

...
const { data, error, loading } = useRequest({
  url: '/api/changeUsername',
  method: 'post',
});

会抛出url不是string的异常。

**import { useRequest } from '@umijs/hooks';**
const { data, error, loading } = useRequest({
  url: '/api/changeUsername',
  method: 'post',

此种方式没有异常。不知道有没有人处理呢?
umijs下面发现引用了不同版本的use-request,一个是hook,另一直接引用use-request。

[plugin-model] model 中引用其他model时显示语法错误

复现repo: umi-model-issue.

是这样的,在一个modeluseMessageModelHasError.ts,引用另一个model的值,如下:

import { useCallback } from 'react';
import { useModel } from 'umi';

export default function useMessageModel() {
  const { title } = useModel('useAppModel');

  const sayHiError = useCallback(() => {
    console.log('error hello ', title);
  }, [title]);

  return {
    sayHiError,
  };
}

会有如下错误提示:

Screen Shot 2020-03-17 at 23 19 13

'title' implicitly has type 'any' because it does not have a type annotation and is referenced directly or indirectly in its own initializer.ts(7022)

但是,功能一模一样的代码,useMessageModel.ts,不直接用解构语法,改成如下这样:

import { useCallback } from 'react';
import { useModel } from 'umi';

export default function useMessageModel() {
  const model = useModel('useAppModel');

  const { title } = model;

  const sayHi = useCallback(() => {
    console.log('hello ', title);
  }, [title]);

  return {
    sayHi,
  };
}

就没错了。

而且即便是上面报语法错误的写法,也已经可以正确运行,始终没理解这个错误的原因是什么

国际化插件报错

yarn start

warning in ./node_modules/moment/src/lib/locale/locales.js

Module not found: Error: Can't resolve './locale' in '~\node_modules\moment\src\lib\locale'

package.json

{
  "private": true,
  "scripts": {
    "start": "umi dev",
    "build": "umi build",
    "postinstall": "umi generate tmp",
    "prettier": "prettier --write '**/*.{js,jsx,tsx,ts,less,md,json}'",
    "test": "umi-test",
    "test:coverage": "umi-test --coverage"
  },
  "gitHooks": {
    "pre-commit": "lint-staged"
  },
  "lint-staged": {
    "*.{js,jsx,less,md,json}": [
      "prettier --write"
    ],
    "*.ts?(x)": [
      "prettier --parser=typescript --write"
    ]
  },
  "dependencies": {
    "@umijs/preset-react": "1.x",
    "@umijs/test": "^3.1.2",
    "lint-staged": "^10.0.7",
    "prettier": "^1.19.1",
    "react": "^16.12.0",
    "react-dom": "^16.12.0",
    "umi": "^3.1.2",
    "yorkie": "^2.0.0"
  },
}

useModel 是否支持dva的model

umi 3.0.10
看到代码有withdva的测试
dva.js

export default {
  state: {},
  reducers: {},
  effects: {},
};

但是实际使用 const dva =useModel('dva'),dva是undefined。
这样dva的所有model都不能用了?

Uncaught ReferenceError: React is not defined

What happens?

基于umi 3.0
主应用配置:
image

子应用是create react app 创建的老项目:
启动的时候会报出来标题错误,看umi 3.0 api
image

我在子项目里创建了此文件
image

真不知道还需要怎么配置呢?
image
2.2的这个描述没太理解如何配置

A clear and concise description of what the bug is.

Mini Showcase Repository(REQUIRED)

Provide a mini GitHub repository which can reproduce the issue.

How To Reproduce

Steps to reproduce the behavior: 1. 2.

Expected behavior 1. 2.

Context

  • qiankun Version:
  • Platform Version:
  • Browser Version:

使用[email protected]的插件@umijs/plugin-qiankun在IE11下报错

.umirc.ts配置如下:

import { defineConfig } from 'umi';

export default defineConfig({
  base: '/data', // 子项目配置
  qiankun: {
    // 子项目配置
    slave: {},
  },
  // 页面的title
  title: '首页',
  hash: true,
  history: {
    type: 'browser',
  },
  routes: [{ path: '/', component: '@/pages/index' }],
  dva: {
    immer: true,
    hmr: false,
  },
  locale: {
    default: 'zh-CN', // 汉化
    antd: true,
    title: false,
    baseNavigator: true,
    baseSeparator: '-',
  },
  cssLoader: {
    localsConvention: 'camelCase',
  },
  nodeModulesTransform: {
    type: 'none',
  },
  targets: {
    ie: 11,
  },
});

IE11下报错如图:
image

修改配置为

qiankun: {
    // 子项目配置
    // slave: {},
  },

即去掉 slave: {},IE11下可以运行,但子应用无法在主应用中运行,报错如图:
image

子应用中app.js如下:

function storeTest(props) {
  props.onGlobalStateChange((value, prev) => {
     console.log(`[onGlobalStateChange ------- ${props.name}]:`, value, prev);
  }, true);
}

export const qiankun = {
  // 应用加载之前
  async bootstrap(props) {
    console.log('app1 bootstrap', props);
  },
  // 应用 render 之前触发
  async mount(props) {
    console.log('app1 mount', props);
    storeTest(props);
  },
  // 应用卸载之后触发
  async unmount(props) {
    console.log('app1 unmount', props);
  },
};

[plugin-access] bug: 仅对子菜单做了隐藏, 知道URL还是可以访问

现状

设置Access.ts文件后, 配置路由仅能正确识别一级菜单的权限, 如果在一级菜单添加access属性后, 如果权限不匹配则二级菜单也无权限, 二级菜单(routes子菜单)仅在渲染左侧菜单时隐藏, 直接访问URL可以正常加载

预期

在二级菜单中设置access后如果权限不匹配, 直接使用URL访问也应该拒绝访问

另外, 如果在路由中使用access熟悉定义了菜单需要的权限后, 如果Access.ts中没有声明这个权限, 默认是跳过了权限校验
能否在Access.ts中加一个参数, 用于控制如果查找的权限未定义, 默认通过还是拒绝的行为, 有些系统因为需要通过后台传递权限, 有时候只会向前台返回已拥有的权限, 并不会将所有权限的状态都返回, 也就会出现目前的情况, Access.ts中未定义(其实就是不具备这个权限)就跳过了权限判断

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.