Create-react-app: [v4] Using require to import an image results in an object

[hosseinmd]

It seems there is a problem when the img rendering
An object inserted into the src attribute.

React version: 16.14.0

Steps To Reproduce

Link to code example: https://github.com/hosseinmd/test-new-jsx

The current behavior

img src is an object

The expected behavior

Expected to insert url of image to src

[hosseinmd]

@gaearon Please test it I couldn't solve the problem.

[ramyatrouny]

@hosseinmd you cannot use require try to do it this way
import logo from './logo192.png
it works so i don't think it's an issue just a matter of syntax

[hosseinmd]

@hosseinmd you cannot use require try to do it this way
import logo from './logo192.png
it works so i don't think it's an issue just a matter of syntax

Yes, import is working, but the question is:
Why I cannot use require?

This is about the next version of react-scripts.

[eps1lon]

This is about the next version of react-scripts.

This issue should be filed against facebook/create-react-app. This repository is for issues caused by react and friends (e.g react-dom).

[hosseinmd]

I tested the newly released v4 still has this issue.

"react": "^17.0.1",
"react-dom": "^17.0.1",
"react-scripts": "4.0.0",

[zalishchuk]

For some reason in CRA v4 require returns an ES module, I do not know if this is done intentionally, or it is just a bug, but the only workaround for now is:

const logo = require('./logo192.png').default;

[hosseinmd]

CRA still has this bug. This is an emergency issue.

[zalishchuk]

I am not sure it's a bug, again, it's unclear whether this was done intentionally or not, but the fact, it's happening because of an upgrade of file-loader from v4 to v6. Since version 5.0.0 file-loader has a breaking change, esModule option is enabled by default, that's why require now returns an ES module, instead of a string.

@gaearon I don't know if this was explained elsewhere, but it needs to be clarified whether this is a bug or a feature.

[arogozine]

Is there a fork or PR available to configure this to use the old behavior?

[Zepticona]

Got the same issue. Requiring produces [Object Module] in the browser.