Docz: fontawesome 아이콘 라이브러리에서 작동하지 않음

에 만든 2018년 07월 04일 · 3코멘트 · 출처: doczjs/docz

버그 신고

docz dev를 실행할 때 콘솔 에이 오류가 있습니다.

Module build failed (from ./node_modules/happypack/loader.js):
TypeError: Cannot read property 'name' of undefined
    at C:\fenbka\www\electron-app\node_modules\react-docgen-typescript\lib\parser.js:425:27
    at Array.filter (<anonymous>)
    at getTextValueOfFunctionProperty (C:\fenbka\www\electron-app\node_modules\react-docgen-typescript\lib\parser.js:422:10)
    at computeComponentName (C:\fenbka\www\electron-app\node_modules\react-docgen-typescript\lib\parser.js:446:32)
    at Parser.getComponentInfo (C:\fenbka\www\electron-app\node_modules\react-docgen-typescript\lib\parser.js:117:33)
    at C:\fenbka\www\electron-app\node_modules\react-docgen-typescript\lib\parser.js:73:57
    at Array.map (<anonymous>)
    at C:\fenbka\www\electron-app\node_modules\react-docgen-typescript\lib\parser.js:73:22
    at Array.reduce (<anonymous>)
    at Object.parse (C:\fenbka\www\electron-app\node_modules\react-docgen-typescript\lib\parser.js:66:18)
    at Object.processResource (C:\fenbka\www\electron-app\node_modules\react-docgen-typescript-loader\dist\loader.js:69:32)
    at Object.loader (C:\fenbka\www\electron-app\node_modules\react-docgen-typescript-loader\dist\loader.js:15:41)
    at applySyncOrAsync (C:\fenbka\www\electron-app\node_modules\happypack\lib\applyLoaders.js:350:21)
    at apply (C:\fenbka\www\electron-app\node_modules\happypack\lib\applyLoaders.js:277:5)
    at C:\fenbka\www\electron-app\node_modules\happypack\lib\applyLoaders.js:135:7
    at applyPitchLoader (C:\fenbka\www\electron-app\node_modules\happypack\lib\applyLoaders.js:188:14)

 @ ./src/renderer/ui/Button/Button.mdx 4:0-37 37:25-31
 @ ./.docz/app/imports.js
 @ ./.docz/app/index.jsx
 @ multi ./node_modules/babel-polyfill/lib/index.js ./.docz/app/index.jsx

Fontawesome 아이콘 라이브러리. 그리고 그는 초기화 단계가 필요했습니다.

Button.tsx

import * as React from "react";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import * as fontawesome from "@fortawesome/fontawesome";

import * as faSun from "@fortawesome/fontawesome-pro-solid/faSun";

fontawesome.library.add(faSun);
export interface ButtonProps {}
export interface ButtonState {}

export class Button extends React.Component<ButtonProps, ButtonState> {
    render() {
        return (
            <button>
                <FontAwesomeIcon icon="sun" />
                {this.props.children}
            </button>
        );
    }
}

Button.mdx

name: Button
menu: Components
---

import { Playground, PropsTable } from "docz";
import { Button } from "./NewButton";

## Basic usage

<Playground>
  <Button>test</Button>
</Playground>

종속성

    "dependencies": {
        "@fortawesome/fontawesome": "^1.1.8",
        "@fortawesome/fontawesome-pro-light": "^5.0.13",
        "@fortawesome/fontawesome-pro-regular": "^5.0.13",
        "@fortawesome/fontawesome-pro-solid": "^5.0.13",
        "@fortawesome/fontawesome-svg-core": "^1.2.0-14",
        "@fortawesome/free-solid-svg-icons": "^5.1.0-11",
        "@fortawesome/react-fontawesome": "0.1.0-11",
        "@reach/router": "^1.1.1",
        "npm": "^6.1.0",
        "react": "^16.4.1",
        "react-dom": "^16.4.1",
        "styled-components": "^3.3.3"
    },
    "devDependencies": {
        "@types/node": "^10.5.1",
        "@types/react": "^16.4.6",
        "@types/react-dom": "^16.0.6",
        "@types/react-fontawesome": "^1.6.3",
        "docz": "^0.4.0",
        "docz-plugin-babel6": "^0.5.1",
        "electron": "^2.0.3",
        "electron-react-devtools": "^0.5.3",
        "file-loader": "^1.1.11",
        "html-webpack-plugin": "^3.2.0",
        "ts-loader": "^4.4.2",
        "typescript": "^2.9.2",
        "typescript-styled-plugin": "^0.8.1",
        "webpack": "^4.14.0",
        "webpack-cli": "^3.0.8",
        "webpack-dev-server": "^3.1.4"
    }

환경