Bug: Cannot use require() to display image on my machine.

Describe the bug

Cannot use require() to display image on my machine. During preparation of this bug report I’ve created the same base code in Codesandbox and it works there.

Did you try recovering your dependencies?

npm --version
6.14.8

Which terms did you search for in User Guide?

require

Environment

Environment Info:

  current version of create-react-app: 4.0.0
  running from C:\Users\Michael\AppData\Roaming\npm-cache\_npx\13776\node_modules\create-react-app

  System:
    OS: Windows 10 10.0.17763
    CPU: (4) x64 Intel(R) Core(TM) i5-4690K CPU @ 3.50GHz
  Binaries:
    Node: 12.19.0 - C:\Program Files\nodejs\node.EXE
    Yarn: Not Found
    npm: 6.14.8 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Chrome: 86.0.4240.198
    Edge: Spartan (44.17763.831.0)
    Internet Explorer: 11.0.17763.771
  npmPackages:
    react: ^17.0.1 => 17.0.1
    react-dom: ^17.0.1 => 17.0.1
    react-scripts: 4.0.0 => 4.0.0
  npmGlobalPackages:
    create-react-app: Not Found

Steps to reproduce

1. Create app with npx create-react-app .
2. Try to get image element with <img src={require("path/to/image/image.png")} /> in App.js render return.

Expected behavior

Should display icon two times. Once using import variable, once using required. Works like that on Codesandbox website. Refer to demo below.

Actual behavior

This is how it looks while I’m running minimal example locally in project created with npx create-react-app .

Reproducible demo

https://codesandbox.io/s/react-require-bug-1gh2i?file=/src/App.js:67-292

[codepiyush]

this issue is still there and it is annoying. Just did npx create-react-app and tested image with require it loads [object Module] instead of the image path. import image still works though. adding .default fixes the issue.

[glyph-cat]

So far no problems seen after running it both on sandbox and locally.

But I do have a similar encounter in another project that also uses require() for an image. It was fixed by doing require("path/to/image/image.png").default, although I’m not sure why. Perhaps you can try that and see if it helps?

That project was using React Scripts 3.4.3 and React 16.13.1. The bug was observed after I updated them to 4.0.0 and 17.0.1 respectively. But I’m not sure if it was really caused by the version update.