Question

我在StackOverflow上都看到了类似的问题，但是我很确定这是不同的。我正在使用Lerna，有两个软件包

packages
├── staff/
│   └── homepage.tsx
└── lumi/
    ├── ...
    ├── package.json
    ├── dist/
    │   ├── bundle.js 
    │   ├── bundle.js.map 
    │   ├── index.d.ts 
    │   ├── index.d.ts.map 
    │   └── ui/
    │        └── Tabular 
    │            ├── Tabular.d.ts
    │            └── Tabular.d.ts.map 
    └── src/
        ├── index.ts
        ├── ui/
        │   └── Tabular/
        │       └── Tabular.tsx
        └── ...

lumi / src / ui / Tabular / Tabular.tsx

import * as React from "react";

export function Tabular():JSX.Element {
  return <div>Hello! This is Tabular!</div>;
}

lumi / index.ts

export * from "./ui/Tabular/Tabular"

staff / homepage.tsx

import * as React from "react";
import * as ReactDOM from "react-dom";
import { Tabular } from "lumi";

export class HomepageApp extends React.PureComponent<{}, {}> {

  public render() {
    return <Tabular />
  }
}

ReactDOM.render(<HomepageApp />, document.getElementById("content"));

lumi / package.json

{
  "name": "lumi",
  "version": "0.0.1",
  "main": "dist/bundle.js",
  "types": "dist/index.d.ts",
  "author": "Victor Hung",
  "license": "MIT",
  "dependencies": {
    "core-js": "^3.6.4",
    "react": "^16.12.0",
    "react-dom": "^16.12.0",
    "regenerator-runtime": "^0.13.3"
  },
  "devDependencies": {
    "@babel/core": "^7.8.4",
    "@babel/preset-env": "^7.8.4",
    "@babel/preset-react": "^7.8.3",
    "@babel/preset-typescript": "^7.8.3",
    "@types/react": "^16.9.19",
    "@types/react-dom": "^16.9.5",
    "babel-loader": "^8.0.6",
    "css-loader": "^3.4.2",
    "node-sass": "^4.13.1",
    "sass-loader": "^8.0.2",
    "source-map-loader": "^0.2.4",
    "style-loader": "^1.1.3",
    "ts-loader": "^6.2.1",
    "typescript": "^3.7.5",
    "webpack": "^4.41.5",
    "webpack-cli": "^3.3.10"
  },
  "scripts": {
    "webpack:dev": "npx webpack --config webpack.config.js"
  }
}

在我看来，这一切都非常简单和花花公子。一切似乎都正确链接（当我将鼠标悬停在VSCode中的import { Tabular } from "lumi"上时，VSCode会按预期显示(alias) function Tabular(): JSX.Element import Tabular。但是，当我尝试运行dev / webpack时，会出现以下错误

错误：

react.development.js:315 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 `HomepageApp`.
    in HomepageApp

任何帮助都将不胜感激:)让我知道我是否应该包括其他文件！预先谢谢你！

React.createElement：类型无效-预期为字符串，但未定义

0 个答案: