import ReactComponent from svg file is not working

Describe the bug

Cannot import svg into Typescript app, throws following error during react-scripts start:

Failed to compile.

./src/components/Icons/Backward.svg (./node_modules/@svgr/webpack/lib?-svgo,+titleProp,+ref!./src/components/Icons/Backward.svg)
TypeError: Cannot read property 'children' of undefined

I’m importing it like this: `import {ReactComponent as SomeName} from ‘./some/svg/file.svg’

Did you try recovering your dependencies?

Yes, I’ve reinstalled all my deps. Still showing the error.

Which terms did you search for in User Guide?

SVG, Typescript

Environment

On npx create-react-app info I get this:

Environment Info:

  current version of create-react-app: 4.0.1
  running from C:\Users\Bunyamin\AppData\Local\Yarn\Data\global\node_modules\create-react-app
(node:14276) UnhandledPromiseRejectionWarning: Error: Command failed: wmic os get Caption
"wmic" �� ���� ����७��� ��� ���譥�
��������, �ᯮ��塞�� �ணࠬ��� ��� ������ 䠩���.


    at b (C:\Users\Bunyamin\AppData\Local\Yarn\Data\global\node_modules\envinfo\dist\envinfo.js:1:95039)
    at Function.e.exports.sync (C:\Users\Bunyamin\AppData\Local\Yarn\Data\global\node_modules\envinfo\dist\envinfo.js:1:96902)
    at e.exports (C:\Users\Bunyamin\AppData\Local\Yarn\Data\global\node_modules\envinfo\dist\envinfo.js:1:93256)
    at e.exports (C:\Users\Bunyamin\AppData\Local\Yarn\Data\global\node_modules\envinfo\dist\envinfo.js:1:92403)
    at C:\Users\Bunyamin\AppData\Local\Yarn\Data\global\node_modules\envinfo\dist\envinfo.js:1:91153
    at processTicksAndRejections (internal/process/task_queues.js:95:5)
    at async Promise.all (index 0)
(Use `node --trace-warnings ...` to show where the warning was created)
(node:14276) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). To terminate the node process on unhandled promise rejection, use the CLI flag `--unhandled-rejections=strict` (see https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode). (rejection id: 1) 
(node:14276) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled 
will terminate the Node.js process with a non-zero exit code.

Steps to reproduce

My mate created a fresh CRA with typescript template and it works for me.

I’ve created new project, moved all files to the new project and it still does not work.

Expected behavior

SVG files are imported as react components.

Actual behavior

Not working)

Reproducible demo

Here unfortunately I can only share my package.json file:

{
  "name": "cra-template",
  "version": "0.1.0",
  "private": true,
  "license": "UNLICENSED",
  "tags": [
    "frontend",
    "react",
    "cra",
    "typescript"
  ],
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "format": "prettier --write src/**/*.ts{,x}",
    "lint": "tsc --noEmit && eslint src/**/*.ts{,x}"
  },
  "husky": {
    "hooks": {
      "pre-push": "yarn lint"
    }
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "dependencies": {
    "@hookform/error-message": "^2.0.0",
    "@hookform/resolvers": "^2.8.1",
    "@szhsin/react-menu": "^2.0.1",
    "axios": "^0.21.1",
    "classnames": "^2.3.1",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-hook-form": "^7.12.2",
    "react-icons": "^4.2.0",
    "react-minimal-pie-chart": "^8.2.0",
    "react-pro-sidebar": "^0.6.0",
    "react-router-dom": "^5.2.0",
    "react-scripts": "4.0.3",
    "sass": "^1.38.1",
    "typescript": "4.1.2",
    "web-vitals": "^1.0.1",
    "yup": "^0.32.9"
  },
  "devDependencies": {
    "@testing-library/jest-dom": "^5.11.4",
    "@testing-library/react": "^11.1.0",
    "@testing-library/user-event": "^12.1.10",
    "@types/jest": "^26.0.15",
    "@types/node": "^12.0.0",
    "@types/react": "^17.0.0",
    "@types/react-dom": "^17.0.0",
    "@types/react-router-dom": "^5.1.7",
    "@typescript-eslint/eslint-plugin": "^4.28.1",
    "@typescript-eslint/parser": "^4.28.1",
    "eslint": "^7.32.0",
    "eslint-config-airbnb-typescript": "6.3.2",
    "eslint-config-prettier": "^8.3.0",
    "eslint-plugin-import": "^2.23.4",
    "eslint-plugin-jest": "^24.3.6",
    "eslint-plugin-jsx-a11y": "^6.4.1",
    "eslint-plugin-prettier": "^3.4.0",
    "eslint-plugin-react": "^7.24.0",
    "eslint-plugin-react-hooks": "^4.2.0",
    "husky": "^6.0.0",
    "prettier": "^2.3.2"
  }
}

[MetaMmodern]

Temporary workaround for anyone who finds this issue: import all your svgs into index.js (note the js extension) and export from js afterwads. This way it won’t deal with types.

[MetaMmodern]

can anyone from maintainers check this bug?