Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
DalderupMaurice opened this issue Dec 22, 2019 · 7 comments

Comments

@DalderupMaurice
Copy link

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

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

@IvanCaceres
Copy link

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

@ahmad2smile
Copy link

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
Copy link

Coteh commented Aug 24, 2020

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
Copy link

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
Copy link
Author

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

@dylannil
Copy link

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

@manuartero
Copy link

manuartero commented Jun 1, 2022

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 )

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

8 participants