开发 React NPM 包时出现“元素类型无效”错误答案

【问题标题】：Get 'Element type is invalid' error when developing a React NPM package开发 React NPM 包时出现“元素类型无效”错误
【发布时间】：2020-09-11 13:12:07
【问题描述】：

我正在开发一个 React 组件包，我打算将它发布到 NPM。

我在包中使用了以下东西

打字稿
网页包

但是当我在一个新的 CRA 应用程序中本地测试它时（我使用 'yarn link' 在本地测试了 NPM 包），我在 CRA 应用程序中收到以下错误消息。

错误：元素类型无效：需要一个字符串（对于内置组件）或一个类/函数（对于复合组件），但得到：目的。您可能忘记从它所在的文件中导出组件在中定义，或者您可能混淆了默认和命名导入。检查App的渲染方法。

我创建了 NPM 包的简化版本并将其推送到我的 repo：

https://github.com/spencerfeng/my-react-npm-package

以下是我在 CRA 应用中用于测试目的的代码：

import MyReactNpmPackage from 'my-react-npm-package'
import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <MyReactNpmPackage />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;

【问题讨论】：

你导出App了吗？
嗨@AluanHaddad，是的，我导出了应用程序。我已经更新了代码 sn-p。

标签： reactjs typescript npm webpack

【解决方案1】：

我已经解决了这个问题。基本上，我需要在 webpack 的模块中将包导出为commonjs2。

固定版本在这里：https://github.com/spencerfeng/my-react-npm-package

【讨论】：