@ant-design/icons 引入错误

[AlbertAZ1992]

antd 4.0 之后 icon 包独立， icon 需要通过 @ant-design/icons 组件包引入:

import { TeamOutlined } from '@ant-design/icons';

但配上 babel-plugin-import ：

plugins: [
    ['import', { 'libraryName': 'antd' }, 'antd'],
  ]

之后报错：

ModuleNotFoundError: Module not found: Error: Can't resolve 'antd/lib/team-outlined' in ...

看起来 babel-plugin-import 把 @ant-design 也错误匹配了？

[y2x33]

{
  "libraryName": "@ant-design",
  "libraryDirectory": "icons",
  "camel2DashComponentName": false,  // default: true
}

应该是需要加 camel2DashComponentName 这个参数才会按大驼峰找文件，否则会默认走短横线 而且 library 和文件夹名称也不一样了

[ssuvorov]

import Icon from '@ant-design/icons';

ReferenceError: Icon is not defined :(

[xsaamiir]

Hey, @ssuvorov were you able to fix your issue importing import Icon from '@ant-design/icons'; ?

[ssuvorov]

@sharkyze, no. I did it like this:

// -- src/components/Icons
// Inside I created a "svg" folder with *.svg files, Icon.js file and index.js

// Icon.js
import React from 'react';

export default function Icon({ svg, name = '' }) {
	return (
		<span role="img" aria-label={name} className={`anticon anticon-${name}`}>
			{svg}
		</span>
	);
}

// index.js
import MailIcon from './svg/mail.svg';
import BookmarkIcon from './svg/bookmark.svg';

export const Mail = (...props) => <Icon svg={<MailIcon/>} {...props}   />;
export const Bookmark = (...props) => <Icon svg={<BookmarkIcon />} {...props}  />;

// usage example
import { Bookmark, Mail } from '../Icons';
<Menu.Item className={'menu__item'} key={'bookmarks'} icon={<Bookmark />}>

[beiluo]

{
     "libraryName": "@ant-design/icons",
     "libraryDirectory": "es/icons",
     "camel2DashComponentName":false
}

这个样子是可以的。

[xsaamiir]

@beiluo This doesn't seem to work for me. Adding this causes the following errors:

/Users/samir/code/some-app/node_modules/@ant-design/icons/es/icons/ArrowLeftOutlined.js:3
import * as React from 'react';
^^^^^^

SyntaxError: Cannot use import statement outside a module
    at wrapSafe (internal/modules/cjs/loader.js:1054:16)
    at Module._compile (internal/modules/cjs/loader.js:1102:27)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1158:10)
    at Module.load (internal/modules/cjs/loader.js:986:32)
    at Function.Module._load (internal/modules/cjs/loader.js:879:14)
    at Module.require (internal/modules/cjs/loader.js:1026:19)
    at require (internal/modules/cjs/helpers.js:72:18)
    at Object.@ant-design/icons/es/icons/ArrowLeftOutlined (/Users/samir/code/some-app/.next/server/pages/_app.js:370:18)
    at __webpack_require__ (/Users/samir/code/some-app/.next/server/webpack-runtime.js:32:42)
    at eval (webpack-internal:///./src/components/BackButton.tsx:4:102)
event - build page: /next/dist/pages/_error
wait  - compiling...
event - compiled successfully
error - /Users/samir/code/some-app/node_modules/@ant-design/icons/es/icons/ArrowLeftOutlined.js:3
import * as React from 'react';
^^^^^^

SyntaxError: Cannot use import statement outside a module
    at wrapSafe (internal/modules/cjs/loader.js:1054:16)
    at Module._compile (internal/modules/cjs/loader.js:1102:27)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1158:10)
    at Module.load (internal/modules/cjs/loader.js:986:32)
    at Function.Module._load (internal/modules/cjs/loader.js:879:14)
    at Module.require (internal/modules/cjs/loader.js:1026:19)
    at require (internal/modules/cjs/helpers.js:72:18)
    at Object.@ant-design/icons/es/icons/ArrowLeftOutlined (/Users/samir/code/some-app/.next/server/pages/_app.js:370:18)
    at __webpack_require__ (/Users/samir/code/some-app/.next/server/webpack-runtime.js:32:42)
    at eval (webpack-internal:///./src/components/BackButton.tsx:4:102)
/Users/samir/code/some-app/node_modules/@ant-design/icons/es/icons/ArrowLeftOutlined.js:3
import * as React from 'react';
^^^^^^

SyntaxError: Cannot use import statement outside a module
    at wrapSafe (internal/modules/cjs/loader.js:1054:16)
    at Module._compile (internal/modules/cjs/loader.js:1102:27)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1158:10)
    at Module.load (internal/modules/cjs/loader.js:986:32)
    at Function.Module._load (internal/modules/cjs/loader.js:879:14)
    at Module.require (internal/modules/cjs/loader.js:1026:19)
    at require (internal/modules/cjs/helpers.js:72:18)
    at Object.@ant-design/icons/es/icons/ArrowLeftOutlined (/Users/samir/code/some-app/.next/server/pages/_app.js:370:18)
    at __webpack_require__ (/Users/samir/code/some-app/.next/server/webpack-runtime.js:32:42)
    at eval (webpack-internal:///./src/components/BackButton.tsx:4:102)
error - /Users/samir/code/some-app/node_modules/@ant-design/icons/es/icons/ArrowLeftOutlined.js:3
import * as React from 'react';
^^^^^^

SyntaxError: Cannot use import statement outside a module
    at wrapSafe (internal/modules/cjs/loader.js:1054:16)
    at Module._compile (internal/modules/cjs/loader.js:1102:27)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1158:10)
    at Module.load (internal/modules/cjs/loader.js:986:32)
    at Function.Module._load (internal/modules/cjs/loader.js:879:14)
    at Module.require (internal/modules/cjs/loader.js:1026:19)
    at require (internal/modules/cjs/helpers.js:72:18)
    at Object.@ant-design/icons/es/icons/ArrowLeftOutlined (/Users/samir/code/some-app/.next/server/pages/_app.js:370:18)
    at __webpack_require__ (/Users/samir/code/some-app/.next/server/webpack-runtime.js:32:42)
    at eval (webpack-internal:///./src/components/BackButton.tsx:4:102)

[beiluo]

@sharkyze .babelrc

[
      "@babel/preset-env",
      {
        "modules": false
      }
]

[ItoshikiNozomu]

seems that babel treat the modules as es module and nodejs runtime restrict esm import statement to be with the definate file extension

example

import  a  from './a'  //=>module not found
import a from './a.js' //=>works fine

[GeekaholicLin]

This config works for me:

// .babelrc
[
  'import',
  {
    libraryName: '@ant-design/icons',
    camel2DashComponentName: false,
    customName: (transformedMethodName) => {
      if (transformedMethodName === 'default') {
        return '@ant-design/icons/es/components/Icon';
      }
      return `@ant-design/icons/es/icons/${transformedMethodName}`;
    },
  },
]

and import the Icon component as below:

import { default as Icon } from '@ant-design/icons';

[krmao]

npm install @ant-design/compatible --registry https://registry.npm.taobao.org


// https://github.com/ant-design/babel-plugin-import/issues/465
// https://stackoverflow.com/a/61023819/4348530
// https://ant.design/docs/react/migration-v4#Icon-upgrade
import {Icon} from '@ant-design/compatible';