reactjs - 无法在 nrwl 反应工作区中加载 svg

Question

我一直在尝试使用 nrwl 工具来创建工作区。我已经创建了一个

npm init nx-workspace

然后将使用创建的应用程序移动 create-react-app --typescript到该工作区中。

1. 我得到：找不到模块'./logo.svg'.ts(2307)
2. 由（在弹出 react-app 后得到

declare module '*.svg' {
  import * as React from 'react';

  export const ReactComponent: React.FunctionComponent<React.SVGProps<SVGSVGElement>>;

  const src: string;
  export default src;
}

然后我得到了（我认为是 webpack 抱怨）

ERROR in ./orig/logo.svg 1:0
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 841.9 595.3">

当 create-react-app 处理所有 webpack 转换时，我希望有同样的体验。

Answer 1

我想我找到了解决方案：

1. 添加到 /angular.json

{
 ...,
 "projects": {
   ...,
   "projectName": {
     ...,
     "architect": {
       ...,
       "build": {
         "options": {
           "webpackConfig": "apps/pathToProject/webpack.config.js",
           ...,
...

2. /webpack.config.js

module.exports = (config, context) => {
    const { module } = config;

    module.rules.push({
        test: /\.svg$/,
        use: ['@svgr/webpack', 'url-loader']
    });

    return { ...config, module };
};

3. 笑话配置 https://jestjs.io/docs/en/webpack#configuring-jest-to-find-our-files

（添加了模拟/fileMock.js）

module.exports = 'test-file-stub';

4. /jest.config：

module.exports = {
  ...,
  moduleNameMapper: {
    "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/src/app/__mocks__/fileMock.js",
  },
  ...
};