Cannot find module './logo.svg' using custom react-scripts and Typescript template

Is 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:

1. Execute npx create-react-app my-app --template typescript --scripts-version my-custom-scripts-on-npm
2. run yarn start
3. 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:

1. Locate react-app-env.d.ts in the src folder of your CRA project
2. 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.

[muhonglong]

Copy code from react-scripts/lib/react-app.d.ts to YOUR_PROJ/src/react-app-env.d.ts would help.

[ahmad2smile]

For me it was eslint deciding to lint react-app-env.d.ts.

Fixed it from

// / <reference types="react-scripts" />

To:

/// <reference types="react-scripts" />

NOTE: the space b/w first too forward slashes.