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:

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 the src 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: #5875
Reference PR: #5827

I am not sure why this change didn't come through, but it remains an issue to date.

@DalderupMaurice

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

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.

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.

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}`
    );
  }

@mrmckeb

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 #5827 (comment) in favor of #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

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

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 )

Navigation Menu

Repository navigation

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

Is your proposal related to a problem?

Describe the solution you'd like

Describe alternatives you've considered

Additional context

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

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

Description

Is your proposal related to a problem?

Describe the solution you'd like

Describe alternatives you've considered

Additional context

Activity

IvanCaceres commented on Mar 2, 2020

ahmad2smile commented on Jul 1, 2020

Coteh commented on Aug 24, 2020

lerickson-ds commented on Oct 21, 2020

DalderupMaurice commented on Oct 22, 2020

dylannil commented on Nov 16, 2020

manuartero commented on Jun 1, 2022

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions