placeholder image not found

[monzoor-rm]

./node_modules/react-file-utils/dist/components/Thumbnail.js Module not found: Can't resolve '../images/placeholder-generic.png' in '/Users/monzoormo..../node_modules/react-file-utils/dist/components'

Not working with the latest version. But v1.1.1 is fine.

[DanC5]

@monzoor-rm I'm unable to replicate this issue in other apps. Can you share details on your app's setup? Are you using Next or Meteor to serve your app?

[monzoor-rm]

@monzoor-rm I'm unable to replicate this issue in other apps. Can you share details on your app's setup? Are you using Next or Meteor to serve your app?

I am using react-activity-feed

node: 15.14.0 yarn: 1.22.10

react-activity-feed: ^1.2.1

 <StreamApp apiKey={apiKey} appId={appId} token={token}>
      Other feed codes
</StreamApp>

And the error starts form here.

Temporary solution that is working. Forcefully revert back to old version

package.json

  "resolutions": {
    "react-file-utils": "1.1.0"
  }, 

[DanC5]

@monzoor-rm I just changed the import syntax to require in the Thumbnail component that imports this image. Can you check and see if the issue is fixed for you in v1.1.4?

[monzoor-rm]

@DanC5 I can see the changes var placeholder = require('../images/placeholder-generic.png');

But that images folder and the image are not appearing in dist

Version

[DanC5]

Hmm that's odd, no changes were made to the rollup. Did you rm -rf node_modules before running yarn/npm install to make sure everything is installed fresh?

[monzoor-rm]

@DanC5 yes. deleted yarn.lock, node_modules, yarn clean cache. Its was very fresh install.

[DanC5]

Got it, I'll take a look today and see if I can figure out what's going on here.

[r0zar]

I'm also seeing this error. popped up after forking react-activity-feed and adding an new dependency.

[DanC5]

@r0zar which version do you see this error with? v1.1.4 / v1.1.3 / both?

[DanC5]

@monzoor-rm @r0zar I just made a new release that added an image processing plugin to our Rollup config, https://github.com/GetStream/react-file-utils/releases/tag/v1.1.5. I've tested this in both NextJS and regular TypeScript apps and can't replicate any issues, so please let me know how this performs on your end. Thanks.

[monzoor-rm]

@DanC5 I have updated to latest one

Still having same issue.

Interestingly this issue is not available in react-file-utils 1.1.0

[DanC5]

@monzoor-rm in v1.1.1 we adjusted the build process to preserve the es modules and allow for better tree shaking. So if everything up to v1.1.0 is working, then your app might be shaking out this image from v1.1.1 onwards. Can you try marking this file as a side effect in your package.json? https://webpack.js.org/guides/tree-shaking/#mark-the-file-as-side-effect-free.

Also it's interesting that both of you are using the feeds library. I maintain Stream's chat library and we haven't heard anything similar on that side, so I'm going rope in @arnautov-anton

Anton, can you verify whether or not you're having issues resolving the path of this image in both a TS and NextJS sample app? https://github.com/GetStream/react-file-utils/blob/master/src/components/Thumbnail.tsx#L5

[DanC5]

@monzoor-rm @r0zar our feeds developer Anton is working on patching this in react-activity-feed. He'll check back in once we have more information, thanks!

[DanC5]

@monzoor-rm @r0zar we just released a new version that removes this png entirely and replaces it with a React svg component. I'm going to close this issue as all should be fine since the image not longer exists, but let me know if any issues persist, thanks.