[CRA4] require doesn't work with images

Created by: sumanthratna

CRA 4 looks really neat, but I've had this issue for the past week:

Describe the bug

require results in [Object module] instead of the image URL in CRA 4 but not CRA 3

see https://github.com/facebook/create-react-app/discussions/9720

Did you try recovering your dependencies?

yes

yarn --version: 2.2.2

Which terms did you search for in User Guide?

image not loading, require image typescript, typescript load image

Environment

Environment Info:

  current version of create-react-app: 3.4.1
  running from /Users/suman/.config/yarn/global/node_modules/create-react-app

  System:
    OS: macOS 11.0
    CPU: (4) x64 Intel(R) Core(TM) i5-5350U CPU @ 1.80GHz
  Binaries:
    Node: 12.14.1 - /usr/local/bin/node
    Yarn: 2.2.2 - /usr/local/bin/yarn
    npm: 6.14.8 - /usr/local/bin/npm
  Browsers:
    Chrome: 85.0.4183.121
    Firefox: 81.0
    Safari: 14.0.1
  npmPackages:
    react: Not Found
    react-dom: Not Found
    react-scripts: Not Found
  npmGlobalPackages:
    create-react-app: Not Found

Steps to reproduce

create a CRA TypeScript with CRA v3
edit the CRA version (react-scripts in package.json) to ^4.0.0-next.98.
yarn install
yarn start

Expected behavior

images load in CRA 4 (the same way they did in CRA 3)

Actual behavior

with CRA 4:

with CRA 3:

both are running on the exact same project source code

Reproducible demo

https://github.com/sumanthratna/cra-4-ts-require

if you clone, change the react-scripts version to 3, and then rerun, the React logo loads perfectly. If you make no changes to the git repo, you'll see that the logo doesn't load.

P.S. thanks for CRA!