umi4 build 时候如何屏蔽某些不合规 import 语句

[ryanpeng-org]

info - Preparing...
✘ [ERROR] No matching export in "xxxxxx" for import "Attachments"

src/.xxxxxx/Attachment.ts:2:21:
  2 │ import { Root, Form, Attachments,  } from 'xxxx';
    ╵                      ~~~~~~~~~~~

fatal - Error: Build failed with 1 error:

umi4 build 时候如何 可以忽略这个报错，这句导入语句是生成的，有些废弃组件无法识别判断，所以会存在一些不存在模块导入，求助求助，之前在 umi3 时候的 esbuild 不会有这个报错的，升级之后就 gg 了😭😭😭

求助，提供一个屏蔽的方式

[fz6m]

你是开了 forkTs 插件了吗，我随便写了一个导入，没构建报错。

如有问题，给一个最小复现看看吧。

[ryanpeng-org]

app.ts

// @ts-nocheck
import {ABC, BCD} from './.test'
console.log(BCD, ABC);

./.test

export const BCD = {}

我的理解 ABC 这不合理导入报错是正常的，只是基于我们项目特殊性，所以需要屏蔽.test 这个文件下的导入报错检查，可以理解为 // @ts-nocheck 这个跳过检查的注释没有生效

[ryanpeng-org]

我用 pnpm dlx create-umi@latest 拉的 ant-design-pro 模版应用

[fz6m]

试了下，webpack 构建的时候会检查有没有这个导出，没有的话就会构建报错。

不存在的导出成员不应该导入，要从生成代码的地方取消不存在的变量被生成出来。

如果就是要绕过 webpack 的检查，需要使用特殊的 hack 手法：

import * as X from 'react'

const key = 'xx'.concat('yy')

console.log('xxx: ', X[key]);

[fz6m]

或者你可以尝试用这个配置试试关闭 webpack 的导入检测：

// .umirc.ts

  chainWebpack(config) {
    config.module.parser.set('javascript', {
      importExportsPresence: false
    })
  },

See webpack/webpack#7378 (comment)

[ryanpeng-org]

确实原则上不应该导出不存在的模块，但是属于动态的生成，历史债务不好解决，所以想看看有什么方式可以处理掉， webpack 的导入检测 那个配置没法生效，代码 hack 的方式也不行，全部导入会导致 treeshaking 无法生效

之前 umi3 代码上加了 // @ts-nocheck 可以跳过检查，但是 umi4 不知道是不是改变了编译，我看执行编译的代码是去掉了注释的