React-app-rewired: SVGr Support

[faustAbc]

Hello.

I could not import SVG as React component like in docs.

Is it supported feature from cra v2?

TS error message:

Cannot find module './images/logo.svg'.  TS2307

    2 | import { Col } from "antd";
    3 | 
  > 4 | import { ReactComponent as Logo } from "./images/logo.svg";
      |                                        ^

I use react-app-rewired with customize-cra.

My configs:
deps:

  "dependencies": {
    "babel-eslint": "^10.1.0",
    "babel-plugin-import": "^1.13.0",
    "css-loader": "^3.4.2",
    "customize-cra": "^1.0.0-alpha.0",
    "less": "^3.11.1",
    "less-loader": "^5.0.0",
    "react": "^16.13.1",
    "react-app-rewire-less-modules": "^1.3.0",
    "react-app-rewired": "^2.1.5",
    "typescript": "~3.7.2",
    "@svgr/webpack": "^5.3.1",
    ...
  },

config-overrides.js:

const { fixBabelImports, addLessLoader } = require("customize-cra");

module.exports = function override(config, env) {
  fixBabelImports("import", {
    libraryName: "antd",
    libraryDirectory: "es",
    style: true,
  });
  addLessLoader({
    javascriptEnabled: true,
  });

  // The same issue with it and without
  config.module.rules.push({
    test: /\.svg$/,
    use: ["@svgr/webpack", "url-loader"],
  });
  return config;
};

Resulting webpack configs.module.rules.

Thank You in advance.

[dawnmist]

Do you have a typescript type definition set up for importing svg files as react components?

In my experience that message often refers to not being able to find the type definition.

If not, I think you need to create the following in a typescript definition file with the following contents (based on this stack-overflow discussion):

declare module '*.svg' {
    import React = require('react');
    export const ReactComponent: React.FunctionComponent<React.SVGProps<SVGSVGElement>>;
    const src: string;
    export default src;
}

The filename should end with .d.ts, and be in a directory that you add to your include section in your tsconfig.json file.

Suggestion: make a directory called types, create a file in there custom.d.ts and put the typescript module definition from above inside that file, then include it by setting the tsconfig.json include as "include": ["src/**/*", "types/**/*"].

This has nothing whatsoever to do with using react-app-rewired.

[unsafeFunction]

@dawnmist Thanks! It works for me!