import ReactComponent from svg file is not working

[MetaMmodern]

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"
  }
}

[isabellachen]

I'm having a similar issue. The error is Attempted import error: 'ReactComponent' is not exported from '../../assets/images/tick.svg' (imported as 'TickIcon'). Wish I knew what the issue is as its working out of the box but not in my projects.

[MetaMmodern]

I'm having a similar issue. The error is Attempted import error: 'ReactComponent' is not exported from '../../assets/images/tick.svg' (imported as 'TickIcon'). Wish I knew what the issue is as its working out of the box but not in my projects.

Dude, my coworker did the same setup as I did and it worked for her. She pushed the code to repo, I pulled and it started working magically...

[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.

[stale]

This issue has been automatically marked as stale because it has not had any recent activity. It will be closed in 5 days if no further activity occurs.

[MetaMmodern]

can anyone from maintainers check this bug?