npm链接在typescript中导入组件时显示错误

Question

我在导入用typescript编写的组件时遇到问题。此组件位于Storybook中，而Storybook位于单独的存储库中，即它是一个单独的应用程序。对于我的实时编写的项目，它导入了Storybook应用程序和我想要导入到我的应用程序中的组件。我使用npm-link来做这件事。当我尝试用npm run构建我的文件时，我得到了一个错误：

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是一个Typescrip文件：

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>
  );
}

我该如何解决这个问题呢？

Answer 1

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>
);

Answer 2

我这样做是为了创建一个新文件: 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>
  );
};