[CRA4] require doesn't work with images

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

1. create a CRA TypeScript with CRA v3
2. edit the CRA version (react-scripts in package.json) to ^4.0.0-next.98.
3. yarn install
4. 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!

[davewelsh]

See https://stackoverflow.com/a/65151059

It seems you’re using create-react-app and you used require to import your images. In the latest version of CRA, require returns an ES module instead of a string because in file-loader the esModule option is enabled by default.

So make sure, you import your images in one of these ways:

const image = require('../path/to/image.jpg').default;
// OR
import image from '../path/to/image.jpg';

I ended up having to update a bunch of files to add .default after require(). I found them like this:

find src -type f -print0 | xargs -0 grep --color "require('.*')[^(\.default)]"

[iMerica]

I’m seeing the same thing locally after upgrading to 4.0.0