无法在nrwl react工作空间中加载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",
           ...,
...

1. /webpack.config.js

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

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

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

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

（添加了模拟 /fileMock.js）

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

1. /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",
  },
  ...
};