Question

我目前正在第一个gatsby / react / typescript项目中工作，其中一项要求是创建一个组件库，其中应包含即将发布的应用程序中常用的组件。

我的仅包含一个组成部分（不包含index.ts的条目是FancyBanner.tsx本身）的初始测试有效。添加第二个组件（FancyButton.tsx）和index.ts之后，我无法在我的App中使用该组件。发生以下错误：

未捕获的错误：元素类型无效：预期为字符串（用于内置组件）或类/函数（用于复合组件）但得到：未定义。您可能忘记了从中导出组件定义的文件，或者您可能混淆了默认文件并命名为进口。

设置

盖茨比2
反应16.5
打字稿3
通过Artifactory的本地npm注册表

项目结构（这是精简版，因为只有gatsby文件才需要测试不相关的内置组件库）

component-lib/
  src/
    lib/
      fancy.css
      FancyButton.tsx
      FancyBanner.tsx
    index.ts
  index.d.ts
  package.json
  tsconfig.json
  webpack.config.js

这两个组件几乎相同，但是应该复制两个单独的组件：

import * as React from 'react';
import './fancy.css'

interface Props {
    text: string
}

interface State {
    /* no state required */
}

export default class FancyBanner extends React.Component<Props, State> {

    public static defaultProps: Partial<Props> = {
        text: "this is a fancy component"
    };

    public render() {
        return (
            <div className={"fancy"}>
                {this.props.text}
            </div>
        );
    };
}

-

import * as React from 'react';
import './fancy.css'

interface Props {
    text: string
}

interface State {
    /* no state required */
}

export default class FancyButton extends React.Component<Props, State> {

    public static defaultProps: Partial<Props> = {
        text: "this is a fancy button"
    };

    public render() {
        return (
            <div className={"button fancy"}>
                {this.props.text}
            </div>
        );
    };
}

index.ts 仅导出两个组件

export * from "./fancy/FancyButton"
export * from "./fancy/FancyBanner"

index.d.ts 是“手工制作的”（也许是问题所在？）

import * as React from "react";

export interface Props {
    text: string;
}

export interface State {
}

export class FancyBanner extends React.Component<Props, State> {}

export class FancyButton extends React.Component<Props, State> {}

最后，不同的配置文件

{
  "name": "company-component-lib",
  "description": "makes your app fancy",
  "version": "0.0.7-snapshot.10",
  "main": "dist/bundle.js",
  "types": "index.d.ts",
  "dependencies": {},
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack --watch",
    "build": "webpack",
    "local-release": "npm run build && npm link",
    "release": "npm run build && npm publish"
  },
  "devDependencies": {
    "@types/node": "^10.10.3",
    "@types/react": "^16.4.14",
    "@types/react-dom": "^16.0.7",
    "react": "^16.5.2",
    "react-dom": "^16.5.2",
    "react-helmet": "^5.2.0",
    "typescript": "^3.0.3",
    "css-loader": "^1.0.0",
    "gatsby": "^2.0.8",
    "gatsby-link": "^2.0.1",
    "gatsby-plugin-react-helmet": "^3.0.0",
    "gatsby-plugin-typescript": "^2.0.0",
    "style-loader": "^0.23.0",
    "webpack-cli": "^3.1.1",
    "ts-loader": "^5.2.1"
  },
  "publishConfig": {
    "type": "npm",
    "registry": "<myrepo>"
  },
  "files": [
    "dist/bundle.js",
    "index.d.ts"
  ]
}

-

{
  "compilerOptions": {
    "outDir": "./dist/",
    "module": "commonjs",
    "target": "es5",
    "jsx": "react",
    "declaration": true,
    "lib": ["dom", "es5"]
  },
  "include": [
    "./src/lib/**/*"
  ]
}

-

var path = require('path');

module.exports = {
    entry: './src/lib/index.ts',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle.js',
        libraryTarget: 'commonjs2'
    },
    module: {
        rules: [
            {
                test: /\.tsx$/,
                include: path.resolve(__dirname, 'src/lib'),
                exclude: /(node_modules|bower_components|public)/,
                use: 'ts-loader'
            },
            {
                test:/\.css$/,
                use:['style-loader','css-loader']
            }
        ]
    },
    externals: {
        'react': 'commonjs react'
    },
    resolve: {
        extensions: [".tsx", ".ts", ".js"]
    }
};

构建和发布后，我可以在我的应用程序中安装组件库，并且IntelliJ会自动添加导入

import * as React from 'react'
import Layout from "../components/layout";
import {FancyBanner} from "company-component-lib";

export default class Page_7 extends React.Component<any, any> {

    public render() {
        return (
            <Layout>
                <div>
                    <h1>Component Sample Page</h1>

                    <FancyBanner text={"WOOOHOOO!"}/>

                </div>
            </Layout>
        )
    }
}

我尝试了this quests的一些建议，但错误仍然存在。作为一个react / typescript的新手，我有些感觉是typescript声明是问题，但是在我的设置中找不到失败。任何提示或建议，不胜感激。

#####更新#####

经过进一步研究，我们将webpack与babel放在一起，并仅基于this tutorial使用tsc。本教程帮助我们创建了一个公共库，但可悲的是没有回答最初的问题，为什么不能导入带有webpack和babel的模块（特别是我们做错了，如果使用webpack babel适合这种情况。

使用自定义反应组件库时“类型无效”

0 个答案: