bug: [引入antd组件 打包出错]：No name was provided for external + error TS2307: Cannot find module

[daolou]

What happens?

使用 yarn create @umijs/dumi-lib 创建的项目

背景：

基于 antd 做组件封装

import React from 'react';
import Styles from './index.less';
import ModuleStyles from './index.module.less'
import Classnames from 'classnames';
import { Divider } from 'antd';

export default ({ title }: { title: string }) => (
  <h1 className={Classnames(Styles['foo-center'],ModuleStyles.test)}>
    <Divider type="vertical" />
    {title}
    <Divider type="vertical" />
  </h1>
);

开启按需加载

// .fatherrc.ts
import {IBundleOptions} from 'father-build/src/types'

const findPath = (moduleName) => {
  console.log(require.resolve(moduleName))
  const pathArr = require.resolve(moduleName).split('/');
  // console.log(pathArr)
  const pathIndex = pathArr.findIndex(path => path === moduleName);
  console.log(pathIndex)
  const path = `${pathArr.slice(pathIndex).join('/')}`
  console.log(path)
  return path;
}

const config: IBundleOptions = {
  esm: 'babel',
  // cjs: 'babel',
  umd: {
    name: "demo",
    globals: {
      react: "React"
    }
  },
  extractCSS: true,
  extraBabelPlugins: [
    ['babel-plugin-import', {
      libraryName: 'antd',
      libraryDirectory: 'lib',
      style: true,
    }],
  ],
  namedExports: {
    [`${findPath('antd')}`]: ['Divider','_Divider','divider'],
  },
  runtimeHelpers: true,
  disableTypeCheck: false,
};
export default config;

打包 抛出错误：

Build umd
No name was provided for external module 'antd/lib/divider' in output.globals – guessing '_Divider'
No name was provided for external module 'antd/lib/divider' in output.globals – guessing '_Divider'
Build esm with babel
Clean es directory
src/Bar/index.tsx(2,20): error TS2307: Cannot find module './index.less' or its corresponding type declarations.
src/Bar/index.tsx(3,26): error TS2307: Cannot find module './index.module.less' or its corresponding type declarations.
src/Foo/index.tsx(2,20): error TS2307: Cannot find module './index.less' or its corresponding type declarations.
src/Foo/index.tsx(3,26): error TS2307: Cannot find module './index.module.less' or its corresponding type declarations.
Transform to esm for src/index.js
/Users/jiangzhiguo/Workspace/study/dumi/src/index.js
Transform to esm for src/Bar/index.js
/Users/jiangzhiguo/Workspace/study/dumi/src/Bar/index.js
Transform to esm for src/Foo/index.js
/Users/jiangzhiguo/Workspace/study/dumi/src/Foo/index.js
TypeScript: 4 semantic errors
TypeScript: emit succeeded (with errors)
events.js:174
      throw er; // Unhandled 'error' event
      ^

Error: TypeScript: Compilation failed
    at Output.mightFinish (/Users/jiangzhiguo/Workspace/study/dumi/node_modules/gulp-typescript/release/output.js:130:43)
    at applySourceMap.then.appliedSourceMap (/Users/jiangzhiguo/Workspace/study/dumi/node_modules/gulp-typescript/release/output.js:65:22)
Emitted 'error' event at:
    at Duplexify._destroy (/Users/jiangzhiguo/Workspace/study/dumi/node_modules/duplexify/index.js:191:15)
    at /Users/jiangzhiguo/Workspace/study/dumi/node_modules/duplexify/index.js:182:10
    at process._tickCallback (internal/process/next_tick.js:61:11)
error Command failed with exit code 1.

可以看到有两处：

1. No name was provided for external module 'antd/lib/divider' in output.globals – guessing '_Divider'
2. error TS2307: Cannot find module './index.less' or its corresponding type declarations.

针对2 我看源码，

• 如果设置 disableTypeCheck 为 true，跳过类型检查，就会跳过 ts 编译，导致没有d.ts文件，显然不是我想要的；
• 如果设置disableTypeCheck 为 false，就会抛出上面的错误。

Mini Showcase Repository(REQUIRED)

mini-repo

Versions

• dumi: ^1.0.24
• System:
  OS: macOS 10.15.4
  CPU: (4) x64 Intel(R) Core(TM) i5-7267U CPU @ 3.10GHz
• Binaries:
  Node: 10.15.3 - ~/.nvm/versions/node/v10.15.3/bin/node
  Yarn: 1.22.4 - ~/.yarn/bin/yarn
  npm: 6.4.1 - ~/.nvm/versions/node/v10.15.3/bin/npm
• Browsers:
  Chrome: 81.0.4044.138
  Edge: Not Found
  Firefox: 74.0
  Safari: 13.1

[daolou]

原因分析：umijs/father#218 (comment)

[PeachScript]

umd 包建议回归 webpack，father 的下一个版本也会使用 webpack 来打包 umd，rollup 确实坑太多了

[daolou]

umd 包建议回归 webpack，father 的下一个版本也会使用 webpack 来打包 umd，rollup 确实坑太多了

father 3 预计何时能用啊

[daolou]

另外 babel 方式，模块引入的 bug 也需要修复啊，

报错原因：
gulp-typescript 在 编译这个 index.tsx 阶段，发现了没定义的模块（.less,.png 等非 js/ts 文件），所以报错了，至于为什么没有发现，原因是 gulp.src 没有匹配到项目里定义的声明文件 typings.d.ts

这是我的 pr：umijs/father#220

[daolou]

最终实践出了demo：https://github.com/jsany/lean

[ChenYCL]

目前有其它方案了么， "father-build": "^1.20.5-0", "dumi": "^1.1.36", 遇到同样问题，png下import引入报 cant find module

[PeachScript]

解法参考：umijs/father#227 (comment)