Cannot find module './logo.svg' using custom react-scripts and Typescript template
See original GitHub issueIs your proposal related to a problem?
Yes.
When I forked this repo and re-published version 3.3.0 of react-scripts (WITHOUT ANY CHANGES!) under my own organization on npmjs, I was unable to successfully build/start a project using these custom scripts.
Steps used:
- Execute
npx create-react-app my-app --template typescript --scripts-version my-custom-scripts-on-npm
- run
yarn start
- See error:
D:/Development/custom-cra-tests/my-app/src/App.tsx
TypeScript error in D:/Development/custom-cra-tests/my-app/src/App.tsx(2,18):
Cannot find module './logo.svg'. TS2307
1 | import React from 'react';
> 2 | import logo from './logo.svg';
| ^
3 | import './App.css';
4 |
5 | const App: React.FC = () => {
Describe the solution you’d like
After wandering around, I managed to fix this by doing the following:
- Locate
react-app-env.d.ts
in thesrc
folder of your CRA project - Rename
/// <reference types="react-scripts" />
to/// <reference types="your-custom-published-react-scripts-name-here" />
Describe alternatives you’ve considered
/
Additional context
A pr has already been proposed to fix this issue, but it has been closed Reference issue: https://github.com/facebook/create-react-app/issues/5875 Reference PR: https://github.com/facebook/create-react-app/pull/5827
I am not sure why this change didn’t come through, but it remains an issue to date.
Issue Analytics
- State:
- Created 4 years ago
- Reactions:10
- Comments:7
Top Results From Across the Web
Unable to import svg files in typescript - Stack Overflow
Create a file named custom.d.ts with the following content: ... Cannot find a module or its corresponding type declarations | Unable to ...
Read more >Two ways to solve: Cannot find SVG module ... - Anna Coding
If you import SVG file in React Typescript file, for example, the following codes snippet... Cannot find module '../../assets/logo.svg'.
Read more >Two ways to solve: Cannot find SVG module error when ...
Two ways to solve: Cannot find SVG module error when compiling Typescript in React application. If you import SVG file in React Typescript...
Read more >typescript cannot find module when import svg file-Reactjs
For example, my build was not failing if I referenced an undefined variable. What worked for me: Create custom.d.ts in project root: declare...
Read more >2 - Code Grepper
Queries related to “Cannot find module './logo/svg' or its corresponding type declarations.” · import svg react typescript · Cannot find module . ·...
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Copy code from
react-scripts/lib/react-app.d.ts
toYOUR_PROJ/src/react-app-env.d.ts
would help.For me it was eslint deciding to lint
react-app-env.d.ts
.Fixed it from
To:
NOTE: the space b/w first too forward slashes.