Question

问题：

我正在尝试使用React（1.6+）和TypeScript（latest）来使React-Avatar正常工作。
在实施过程中，我遇到了很多问题，因为我似乎找不到基于demo的JSX的Typescript版本。

预期：

在为项目及其依赖项设置类型时，我希望它能够正常工作。我必须手动更改很多东西才能使webpack构建该程序包，但我无法使其正常工作。

实际：

到处都有错误。目前，我正在获取此信息：

Warning: React.createElement: 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.

Check the render method of `MyEditor`.
    in MyEditor

Uncaught Error: 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.

代码：

avatarUploader.tsx：

import * as React from "react";
import AvatarEditor from "react-avatar-editor"; 

class MyEditor extends React.Component {
  render() {
    return (
      <AvatarEditor
        image={"http://example.com/initialimage.jpg"}
        width={250}
        height={250}
        border={50}
        color={[255, 255, 255, 0.6]} // RGBA
        scale={1.2}
        rotate={0}
      />
    )
  }
}

export default MyEditor

fileItem.tsx：

import * as React from "react";
import * as ReactDOM from "react-dom"; 
import MyEditor from "./../avatarTest/avatarUploader" 

    ReactDOM.render(
        <MyEditor />
        ,  
        document.getElementById("body")
    );

webpack.config.js：

module.exports = {
    mode: "development",

    entry: {
        filemanager: "./src/fileItem/fileitem.tsx", 
        avatarTest: "./src/avatarTest/avatarUploader.tsx"
    },
    output: {
        filename: "[name]/[name].bundle.js",
        path: __dirname + "/dist/transpiled-components/"
    },

    watch: true,
    devtool: "source-map",

    resolve: {
        extensions: [".ts", ".tsx", ".js", ".json"]
    },

    module: {
        rules: [   
            { test: /\.ts$/, loader: "ts-loader" },
            { test: /\.tsx$/, loader: "babel-loader!ts-loader" }
        ],
    }, 
    externals: {
        "react": "React",
        "react-dom": "ReactDOM" 
    }
}

编辑：

添加了 SANDBOX

React-Avatar-Editor基本示例无法正常工作

0 个答案: