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

[DalderupMaurice]

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.

[IvanCaceres]

Applying that fix resolved the issue for me, thanks @DalderupMaurice ! This issue still occurs when forking your own CRA.

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

[Coteh]

Just wanted to comment here that this is still an issue as of v3.4.1. If I checkout v3.4.1, go to packages/react-scripts, rename the package and publish it (no other modifications), and create a React app using something like:

npx create-react-app --scripts-version <custom react scripts name> my-app --template typescript

then CRA will still add a react-app-env.d.ts file with the following:

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

and the logo will thus fail to be imported, since the default react-scripts is not present in the project at this point.

If I manually change "react-scripts" here to the name of my custom react-scripts, SVGs can be detected again.

I am curious as to at which point during the project creation process this file gets added, and whether it can be configured to reference the custom react-scripts name instead.

[lerickson-ds]

I just ran into this issue and was able to change the react-app-env.d.ts file in the template by making this change to /packages/react-scripts/scripts/utils/verifyTypeScriptSetup.js. Which fixed the Cannot find module './logo.svg' or its corresponding type declarations. error for me.

  // Reference `react-scripts` types
  if (!fs.existsSync(paths.appTypeDeclarations)) {
    fs.writeFileSync(
      paths.appTypeDeclarations,
      `/// <reference types="react-scripts" />${os.EOL}`
    );
  }

to

  // Reference `react-scripts` types
  if (!fs.existsSync(paths.appTypeDeclarations)) {
    fs.writeFileSync(
      paths.appTypeDeclarations,
      `/// <reference types="CUSTOM_REACT_SCRIPTS_PACKAGE_NAME_GOES_HERE" />${os.EOL}`
    );
  }

[DalderupMaurice]

I just ran into this issue and was able to change the react-app-env.d.ts file in the template by making this change to /packages/react-scripts/scripts/utils/verifyTypeScriptSetup.js. Which fixed the Cannot find module './logo.svg' or its corresponding type declarations. error for me.

  // Reference `react-scripts` types
  if (!fs.existsSync(paths.appTypeDeclarations)) {
    fs.writeFileSync(
      paths.appTypeDeclarations,
      `/// <reference types="react-scripts" />${os.EOL}`
    );
  }

to

  // Reference `react-scripts` types
  if (!fs.existsSync(paths.appTypeDeclarations)) {
    fs.writeFileSync(
      paths.appTypeDeclarations,
      `/// <reference types="CUSTOM_REACT_SCRIPTS_PACKAGE_NAME_GOES_HERE" />${os.EOL}`
    );
  }

There's a similar fix in the PR listed in my original issue. It was closed by @mrmckeb in https://github.com/facebook/create-react-app/pull/5827#issuecomment-443748952 in favor of https://github.com/facebook/create-react-app/pull/5877 but both PRs have been closed. I assume the first one shouldn't have been closed, knowing that the 2nd one wouldn't be merged? Maybe we could create a new PR for this

[dylannil]

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

[manuartero]

Isn't there any option at the tsconfig.json to explicitly say "ey buddy, check this .d.ts file" ?

I've tried using references but that doesn't work.

+ "references": [
+  {"path": "./node_modules/react-scripts/lib/react-app.d.ts"}
+ ]

(Actually I'm 90% sure there isn't such option at tsconfig.json since I've spent some time reading each key, but... 🤞 you never know )