Storybook + React：SVG 图标导致元素类型无效：需要字符串（对于内置组件）或类/函数

Question

我有一个 React 组件：

import React from 'react';



import { ReactComponent as IncreaseIcon } from '../icons/increase.svg';



const StatCard = ({
  className,
  value,
  percentChange,
  description,
  tooltipDescription
}) => (
  <Container className={className}>
    ...
      <h1>
        <IncreaseIcon />
        123%
      </h1>
    ...
  </Container>
);

export default StatCard;

当我加载我的 React 应用程序时，该组件本身可以工作，但是当我尝试将其加载到故事书中时，它失败了：

Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

问题是，如果我<IncreaseIcon />从组件中删除 ，它就可以正常工作。

这是我的 package.json

{
  "name": "@myapp/ui",
  "version": "0.2.8-beta.8",
  "dependencies": {
    "@ant-design/icons": "^4.2.1",
    "@fullcalendar/core": "^4.3.1",
    "@fullcalendar/daygrid": "^4.3.0",
    "@fullcalendar/react": "^4.3.0",
    "antd": "^3.26.7",
    "clone": "^2.1.2",
    "react": "^16.13.1",
    "react-dom": "^16.12.0",
    "react-draft-wysiwyg": "^1.14.4",
    "react-text-mask": "^5.4.3",
    "recharts": "^1.8.5",
    "styled-components": "^4.4.1",
    "styled-theme": "^0.3.3"
  },
  "scripts": {
    "start": "start-storybook -p 9009",
    "eslint": "eslint --ignore-path .gitignore ./",
    "eslint:fix": "eslint --fix --ignore-path .gitignore ./"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "@babel/preset-env": "^7.8.3",
    "@storybook/addon-actions": "^5.3.4",
    "@storybook/addon-knobs": "^5.3.4",
    "@storybook/addon-links": "^5.3.4",
    "@storybook/addon-viewport": "^5.3.4",
    "@storybook/addons": "^5.3.4",
    "@storybook/preset-create-react-app": "^1.5.1",
    "@storybook/react": "^5.3.4",
    "babel-cli": "^6.26.0",
    "babel-core": "^6.26.3",
    "babel-eslint": "^10.1.0",
    "babel-loader": "^7.1.5",
    "babel-plugin-styled-components": "^1.10.6",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "babel-preset-stage-0": "^6.24.1",
    "eslint": "^6.8.0",
    "eslint-config-prettier": "^6.10.0",
    "eslint-plugin-jest": "^23.6.0",
    "eslint-plugin-json": "^2.0.1",
    "eslint-plugin-prettier": "^3.1.2",
    "eslint-plugin-react": "^7.19.0",
    "husky": "^4.2.1",
    "jest": "^25.1.0",
    "prettier": "^1.19.1"
  },
  "husky": {
    "hooks": {
      "pre-push": "npm run eslint"
    }
  }
}

为什么它坏了？