[引入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

Context

• Father Version: v1.8.0
• Node Version: v10.15.3
• Platform: macOS 10.15.4

[git-lt]

我也报这个错，试一下，好像也没有什么影响，组件也能正常使用

[daolou]

我定位了一下，错误是gulp-typescript 抛出的，

即使我加了 join(srcPath, '../typings.d.ts') 还是报错，害～

[daolou]

我自己写的gulp脚本就没有问题

和这里的却别的话，也就是 gulp-typescript 的版本不一样

我写的脚本，用的是 6.0.0-alpha.1
father用的是 5.0.1

我把 father的 更新一下再试试

[daolou]

依然不行

[daolou]

我找到原因了：

看图，tag1 (也就是我上上个评论中加的 join(srcPath, '../typings.d.ts'))，被 tag2 给过滤掉了，我再加个判断，打包就成功了，而且也有声明文件 d.ts 了

// babel.js
function isTsFile(path) {
  console.log('isTsFile::',path)
  // return /\.tsx?$/.test(path) && !path.endsWith('.d.ts');
  return path.endsWith('typings.d.ts') || (/\.tsx?$/.test(path) && !path.endsWith('.d.ts'));
}

感觉这个算是bug吧。

总结一下解决步骤（改father-build源码）：

1. 匹配规则 加typings.d.ts

2. isTsFile 允许typings.d.ts

@sorrycc

[daolou]

至于 No name was provided for external 这个提示问题，我还没解决

[git-lt]

d.ts 出不来，应该不是这个问题，我试了你说的方法，修改了那行判断，但并没有生成 d.ts 文件，

我粗略看了一下，esm 与 cjs 如果配置是 babel ，那么用的是 gulp 插件 gulp-typescript 编译的，而umd 模块用的是 rollup 编译的，所以，问题应该出在 gulp-typescript 插件的配置上，

看了它的文档，需要配置 declaration:true， 才能生成 d.ts，

所以只要在 tsconfig.json 中配置 declaration：true就可以了，

我本地试了一下，已经能正常生成 d.ts 文件了

另外按这里的逻辑，disableTypeCheck 应该是设置为 false

.pipe(gulpIf(f => !disableTypeCheck && isTsFile(f.path), gulpTs(tsConfig)))

@Mr-jiangzhiguo

[daolou]

d.ts 出不来，应该不是这个问题，我试了你说的方法，修改了那行判断，但并没有生成 d.ts 文件，

我粗略看了一下，esm 与 cjs 如果配置是 babel ，那么用的是 gulp 插件 gulp-typescript 编译的，而umd 模块用的是 rollup 编译的，所以，问题应该出在 gulp-typescript 插件的配置上，

看了它的文档，需要配置 declaration:true， 才能生成 d.ts，

所以只要在 tsconfig.json 中配置 declaration：true就可以了，

我本地试了一下，已经能正常生成 d.ts 文件了

另外按这里的逻辑，disableTypeCheck 应该是设置为 false

.pipe(gulpIf(f => !disableTypeCheck && isTsFile(f.path), gulpTs(tsConfig)))

@Mr-jiangzhiguo

tsconfig.json 已经配置了 declaration：true

另外，昂我的方法，应该修改编译后的 babel.js 不是 babel.ts

[git-lt]

当然是改的 babel.js，你那边如果有问题的话，检查一下

1. disableTypeCheck
2. babel.js 还原

[daolou]

当然是改的 babel.js，你那边如果有问题的话，检查一下

1. disableTypeCheck
2. babel.js 还原

我复现的仓库就是 disableTypeCheck: false 且 declaration：true的，你可以clone下，试试看

[git-lt]

clone下来，看了一下，你的问题和我的问题不是同一个问题，你的问题是 css module 的问题，如果你是基于 antd 扩展的话，最好不要用 css module， antd 没有用 css module, 我把样式去掉这后，就正常构建了，你试试

[daolou]

clone下来，看了一下，你的问题和我的问题不是同一个问题，你的问题是 css module 的问题，如果你是基于 antd 扩展的话，最好不要用 css module， antd 没有用 css module, 我把样式去掉这后，就正常构建了，你试试

按你说的，去掉css module，依然报错，错误还是 gulp-typescript 抛出的

[daolou]

我想到了，起这个demo 把最重要的一点给忘了（害～）：

组件开发，脚本和样式应该剥离开，不能耦合，

我的老项目也是用gulp-typescript打包的，也没src也没包含 d.ts; 但是 所有的 js/ts 文件中不会引入 less/css 等样式文件：

所以对于我这个demo 应该把所有组件中引入的 less文件 干掉

[daolou]

组件开发，不应该在 ts/js 脚本文件中引入less/css 样式文件，应该分离开，避免耦合

错误示例：

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

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

正确示例：

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

export default ({ title }: { title: string }) => (
  <h1 className={Classnames('foo-center')}>
    <Divider type="vertical" />
    {title}
    <Divider type="vertical" />
  </h1>
);

[chenguzhen87]

这个问题解决我吗？我也遇到了

[PeachScript]

@chenguzhen87 TS2307 看这个： #227 (comment)