Невозможно загрузить svg в рабочую область nrwl реагировать - PullRequest
Новая
       31

Невозможно загрузить svg в рабочую область nrwl реагировать

0 голосов
/ 02 июля 2019

Я пытался использовать инструмент nrwl для создания рабочей области.Я создал его с помощью 

npm init nx-workspace

, затем переместил приложение, созданное с помощью create-react-app --typescript, в это рабочее пространство.

  1. Я получил: Не удается найти модуль './logo.svg'.ts (2307)
  2. исправлено (получено после извлечения реакции-приложения 
declare module '*.svg' {
  import * as React from 'react';

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

  const src: string;
  export default src;
}

, а затем я получил (я полагаю, это веб-пакет жалуется) 

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-реагировать-приложение обрабатывает все преобразования веб-пакета.

1 Ответ

0 голосов
/ 12 июля 2019

Я думаю, что нашел решение:

  1. add to /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 };
};
jest config https://jestjs.io/docs/en/webpack#configuring-jest-to-find-our-files

(добавлено издевается / 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",
  },
  ...
};
...