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

Question

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

创建了一个

npm init nx-workspace

然后将使用 create-react-app --typescript 创建的应用移至该工作区。

我得到：找不到模块'./logo.svg'.ts(2307)
已修复（在弹出 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

我想我找到了解决方案：

添加到/angular.json


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

/webpack.config.js

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

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

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

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

（添加了 mocks/fileMock.js）

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

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

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

Cannot load svg in nrwl react workspace

reactjs

typescript

nrwl-nx