在打字稿中导入组件时，npm 链接显示错误

问题描述

我在导入用打字稿编写的组件时遇到问题。该组件位于 Storybook 中，它位于单独的存储库中，即它是一个单独的应用程序。对于我实时编写的项目，它会导入 Storybook 应用程序以及我想要导入到我的应用程序中的组件。我用 npm-link 来做。当我尝试使用 npm run buil 构建我的文件时，出现错误：

Module not found: Error: Can't resolve 'react-is'

还有另一个错误：

Module parse Failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type,currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
> <svg width="18" height="12" viewBox="0 0 18 12" fill="none" xmlns="http://www.w3.org/2000/svg">
| <path fill-rule="evenodd" clip-rule="evenodd" d="M0 2V0H18V2H0ZM0 7H18V5H0V7ZM0 12H18V10H0V12Z" fill="#E5E5E5"/>
| </svg>

我在故事书中的组成部分：

import React from "react";
import IconSquare from "../IconSquare/IconSquare";
import { ReactComponent as HamburgerIcon } from "../../../svg-icons/menu_24px.svg";

export const HamburgerMenu = () => (
  <IconSquare>
    <HamburgerIcon />
  </IconSquare>
);

IconSquare 代码：！！！重要的。 IconSquare 是一个打字稿文件：

import React,{ PropsWithChildren } from "react";
import styled from "styled-components";

interface WrapperProps {
  backgroundColor?: string;
  iconColor?: string;
}

const Wrapper = styled.div<WrapperProps>`
  display: flex;
  align-items: center;
  justify-content: center;
  width: 4.4rem;
  height: 4rem;
  background-color: ${({ backgroundColor,theme }) =>
    backgroundColor || theme.buttonPrimary};
  border-radius: 0.4rem;
  path {
    fill: ${({ iconColor,theme }) => iconColor || theme.white};
  }
`;

export default function IconSquare({
  children,}: PropsWithChildren<WrapperProps>): JSX.Element {
  return <Wrapper>{children}</Wrapper>;
}

我想从 Storybook 中导入组件的应用程序代码：

tsConfig.json

{
    "extends": "ts-config-single-spa","compilerOptions": {
      "target": "es5","lib": [
        "dom","dom.iterable","esnext"
      ],"allowJs": true,"skipLibCheck": true,"esModuleInterop": true,"allowSyntheticDefaultImports": true,"strict": true,"forceConsistentCasingInFileNames": true,"noFallthroughCasesInSwitch": true,"module": "esnext","moduleResolution": "node","resolveJsonModule": true,"isolatedModules": true,"noEmit": true,"jsx": "react-jsx"
    },"include": [
      "src",]
  }
  

webpack.config.js

const webpackMerge = require("webpack-merge");
const singleSpaDefaults = require("webpack-config-single-spa-react-ts");

module.exports = (webpackConfigEnv,argv) => {
  const defaultConfig = singleSpaDefaults({
    orgName: "App",projectName: "homepage",webpackConfigEnv,argv,module: {
      rules: [
        {
          test: /\.svg$/,use: [
            {
              loader: 'svg-url-loader',options: {
                limit: 10000,},],});
  

  return webpackMerge.smart(defaultConfig,{
    // modify the webpack config however you'd like to by adding to this object
  });
};

还有我在 App 中的组件：

root.component.tsx

import React from "react";
// @ts-ignore
import { LegacyButton } from 'proaudiosuitestorybook/src/stories/LegacyButton';
// @ts-ignore
import { HamburgerMenu } from 'proaudiosuitestorybook/src/components/atoms/HamburgerMenu/HamburgerMenu';
export default function Root() {
  return (
    <section>
      <div className="homepage-hero" style={{ margin: "5rem 0" }}>
        <img
          style={{ width: "100%" }}
          src="https://www.rapidvaluesolutions.com/wp-content/uploads/2020/06/Blog-Image-100.jpg"
        />
      </div>
      <h1 className="cover-heading">Welcome to the micro-frontend world!</h1>
      <p className="lead">
        This is an example of how powerful micro-frontends can be!
        <br /> You may integrate all of your frontend apps,regardless of what
        frameworks they're built with.
      </p>
      <p className="lead">
        <a href="#" className="btn btn-lg btn-secondary">
          Learn more
        </a>
        <LegacyButton>sasasas</LegacyButton>
        <HamburgerMenu></HamburgerMenu>
      </p>
      <div>
      </div>
    </section>
  );
}

我该如何解决这个问题？

解决方法

menu_24px.svg 是否导出名为 ReactComponent 的成员？
如果不是，那行 import { ReactComponent as HamburgerIcon } from "../../../svg-icons/menu_24px.svg"; 对我来说没有意义，因为看起来您正在尝试将 svg 文件作为 React 组件导入。

更简单的方法是像这样使用 img 标签

export const HamburgerMenu = () => (
  <IconSquare>
    <img src="../../../svg-icons/menu_24px.svg" alt="menu" />
  </IconSquare>
);

,

我这样做是为了创建一个新文件：hamburgerIcon.js

import React from "react";
    export default function HamburgerIcon() {
      return (
        <svg
          width="18"
          height="12"
          viewBox="0 0 18 12"
          fill="none"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            fillRule="evenodd"
            clipRule="evenodd"
            d="M0 2V0H18V2H0ZM0 7H18V5H0V7ZM0 12H18V10H0V12Z"
            fill="#E5E5E5"
          />
        </svg>
      );
    }

在主要组件中我导入了它：

import React from "react";
import IconSquare from "../IconSquare/IconSquare";
import HamburgerIcon from "./HamburgerIcon";

export const HamburgerMenu = function () {
  return (
    <IconSquare>
      <HamburgerIcon />
    </IconSquare>
  );
};