如何使 svg 从使用 create-react-app 的外部模块导入组件？

Question

Context

In order to make some code parts re-usable accross many react project, I have the following project structure:

1. @foo/design : Containing design stuff such as raw svg images
2. @foo/ui : A react library base on Create React App for common component
3. @foo/project : A final CRA project using foo/ui

The library

The foo/ui library export some a component that import a svg image from @foo/design :

// MyComponent.ts
import React, { FC } from 'react';
import {
  ReactComponent as Logo,
} from '@foo/design/static/img/logo.svg';

export const MyComponent: FC = () => {
  return (
    <div>
      Some stuff.
      <Logo />
    </div>
  );
};

export default null;

This component works flawlessly on the related Storybook instance of @foo/ui and is compiled using tsc like this:

// MyComponent.js
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { ReactComponent as Logo, } from '@foo/design/static/img/logo.svg';
export var Navbar = function () {
    return (_jsxs("div", { children: ["Some stuff.", _jsx(Logo, {}, void 0)] }, void 0));
};
export default null;

Here is also the related tsconfig.json file:

{
  "compilerOptions": {
    "target": "es5",
    "lib": ["dom", "dom.iterable", "esnext"],
    "declaration": true,
    "outDir": "./lib",
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "react-jsx"
  },
  "include": ["src"],
  "exclude": [
    "src/samples",
    "src/**/*.stories.*",
    "src/**/*.test.*",
    "src/setupTests.js"
  ],
}

The project import

On @foo/project , I added the @foo/ui dependency, installing the @foo/design package as well (required by @foo/ui ).

I use my component that way:

import { FC } from 'react';
import { MyComponent } from '@foo/ui'

const App: FC = () => {
  return (
    <MyComponent />
  );
}

export default App;

But this produces the following error:

Failed to compile.

./node_modules/@foo/ui/lib/MyComponent.js
Attempted import error: 'ReactComponent' is not exported from '@foo/design/static/img/logo.svg' (imported as 'Logo').

However, if I copy/past the svg import line from MyComponent.js directly on my root app component:

import { FC } from 'react';
import { ReactComponent as Logo, } from '@foo/design/static/img/logo.svg';

const App: FC = () => {
  return (
    <Logo />
  );
}

export default App;

This works and the svg appears as expected.

Here is also the CRA project related tsconfig.json file:

{
  "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"
  ]
}

Why the ReactComponent CRA import is not working when it's done from my imported library? What is the simplest way to solve this problem as @foo/ui is only use internally?

Thanks

Answer 1

I found the only workaround helped me in a similar situation - define SVG component inline, using https://svg2jsx.com/ to prepare component.

So, in your case, you won't be able to use shared SVG's from @foo/design to create a wrapper component, but at least you'll be able to prepare the shared SVG components in @foo/ui .

Spent much time, solved it just recently, so can't explain what's the underlying issue is.