无法在nrwl响应工作区中加载svg

Question

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

npm init nx-workspace

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

1. 我得到:找不到模块‘./logo.svg’..ts(2307)
2. 修正(弹出反应后得到)-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">

我希望有同样的经验，当创建-反应-应用程序处理所有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. jest配置https://jestjs.io/docs/en/webpack#configuring-jest-to-find-our-files

(添加了mocks/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",
  },
  ...
};