typescript “ReactComponent”未从svg导出

mf98qq94 于 2023-10-22 发布在 TypeScript

关注(0)|答案(3)|浏览(228)

我使用CRA创建了一个typescript应用程序，代码如下：

import { ReactComponent as Search } from './search.svg'

它运行得很好，现在我想把这段代码剥离到一个npm包（库）中。我首先再次运行CRA，然后删除所有看起来不相关的内容（例如：公共文件夹）。/dist的简化版本如下所示：

esm/
   icon/
      index.d.ts
      index.js
   index.d.ts
   index.js

这是原始的icon/index.ts：

/// <reference types="react-scripts" />
import { ReactComponent as Search } from './search.svg'
export const Icons = {
  Search,
}

下面是编译后的icon/index.d.ts：

/// <reference types="react" /> <-- Changed for some reason??
export declare const Icons: {
    Search: import("react").FunctionComponent<import("react").SVGProps<SVGSVGElement> & {
        title?: string | undefined;
    }>;
};

当我尝试运行一个应用程序，然后使用这个库，我得到以下错误：

../dist/esm/common/icon/index.js Attempted import error:
'ReactComponent' is not exported from './search.svg' (imported as 'Search').

我该如何解决这个问题？

typescript

来源：https://stackoverflow.com/questions/67612868/reactcomponent-is-not-exported-from-svg

3条答案

按热度按时间

roejwanj1#

我最初的回答并不清楚，也没有考虑到你使用的是React-app。
由于您使用的是React-react-app，因此SVGR库已经安装并用于将SVG文件作为ReactComponent处理。
你可以直接像这样导入它们：

import Search from './search.svg'

然后像这样使用它：

export const Component = () => {
  return (
    <div>
      <Search />
    </div>
  );
}

赞(0）回复(0）举报 2023-10-22

tzxcd3kk2#

为什么它在早期工作，然后在你将代码移动到另一个npm包后停止工作，可以在react-scripts webpack配置中找到（它被CRA使用）。
我在使用email protected(https://stackoverflow.com/cdn-cgi/l/email-protection)时遇到了同样的问题，问题是如何应用svg加载器。请注意，该规则仅适用于目标应用程序的src文件夹。所以这只适用于当代码在你的目标包中时，一旦它移动到自己的npm包中，在编译应用程序时，react-scripts webpack config将不再处理svg导入。
解决方案是使用这些svg导入作为字符串路径（通过svg文件的默认导出），然后将它们用作react组件的src。

import searchIconPath from './search.svg';

export const SearchIcon = () => <img src={searchIconPath} />;

这是因为file-loader适用于所有文件。
我相信（查看代码，我没有尝试过）这个问题现在已经在最新版本的react-scripts中得到了解决，因为规则现在更全球化地应用。

赞(0）回复(0）举报 2023-10-22

c90pui9n3#

您可以导入svg文件作为默认导入，不带括号。
下面是一个例子

/// <reference types="react-scripts" />
import Search from './search.svg'
export const Icons = {
  Search,
}

赞(0）回复(0）举报 2023-10-22

我来回答

typescript “ReactComponent”未从svg导出

3条答案

相关问题

热门标签

最新问答