TypeError: placeholder.indexOf is not a function

[elrumordelaluz]

Describe the bug
Declaring a placeholder using require gives the error shown in the title.

To Reproduce
Steps to reproduce the behavior:

1. Go to this sandbox
2. Look that declaring require('./images/cover.svg') throws an error.
3. Commenting this line shows that this doesn't happen with the src prop

Expected behavior
This used to word until I updated to create-react-app@4 (which implies to remove node_modules folder and reinstall dependencies, so maybe is related to another change). But seems that the error reproduce well in Codesandbox

Screenshots

Desktop (please complete the following information):

• OS: macOS
• Browser Firefox
• Version 81.0.2 (64-bit)

Additional context
I know that work ok just importing the two files, but in my case I am using several images that render dynamically so i used to pass the values like require('./images/image_' + n + '.svg')

[bluebill1049]

I don't think we support reqiure import. (string only)

[elrumordelaluz]

Thank you @bluebill1049, however for some reason works perfect for me (also in react@17), before update react-scripts.

Outside this importing stuff, the end result of the require should be s string, right?

[elrumordelaluz]

Ok, I solved this way

<SimpleImg
  placeholder{require(`./path/to/img`).default}
/>

Don't know where is the root of the problem, probably bundler side. Will continue to investigate however.

[bluebill1049]

interesting... I suspect it returns a string now.

[elrumordelaluz]

yes, also before returns a string but for some reason without needed the .default.