minhtranite / react-notifications

Notification component for ReactJS
https://www.npmjs.com/package/react-notifications
287 stars 64 forks source link

Notifications images not loading #46

Open kapoorruchi opened 5 years ago

kapoorruchi commented 5 years ago

The notifications in my application do not show images of ' tick-mark' on success or 'cross-mark' for error. On the console I can see below errors - Failed to decode downloaded font: http://localhost:9001/dist/1beffae295b55aaec324a37cbd4a9538.woff :9001/detail/111250001:1 Failed to decode downloaded font: http://localhost:9001/dist/1beffae295b55aaec324a37cbd4a9538.woff :9001/detail/111250001:1 Failed to decode downloaded font: http://localhost:9001/dist/1beffae295b55aaec324a37cbd4a9538.woff :9001/detail/111250001:1 Failed to decode downloaded font: http://localhost:9001/dist/ce1579642e5e4a411673f1f3b30084bb.ttf :9001/detail/111250001:1 Failed to decode downloaded font: http://localhost:9001/dist/ce1579642e5e4a411673f1f3b30084bb.ttf :9001/detail/111250001:1 Failed to decode downloaded font: http://localhost:9001/dist/ce1579642e5e4a411673f1f3b30084bb.ttf

OTS parsing error: invalid version tag :9001/detail/111250001:1 OTS parsing error: invalid version tag :9001/detail/111250001:1 OTS parsing error: invalid version tag :9001/detail/111250001:1 OTS parsing error: invalid version tag :9001/detail/111250001:1 OTS parsing error: invalid version tag :9001/detail/111250001:1 OTS parsing error: invalid version tag :9001/detail/111250001:1 OTS parsing error: invalid version tag

These are setup in styles.main.css automatically and when loaded from css it is loading, so it does not seems to be a path issue. Also checked in networks tab, these are giving 304 Not modified response code.

Could not find the reason for the issue. My production release is this week and there are these issues. Please help.

fabioetec commented 5 years ago

I have the same problem! Have you found any solution??

tjrexer commented 4 years ago

This isn't a bug, but an incorrect configuration in your webpack. I hadn't been presenting text paths before, so I needed to add them to my modules. You need to make sure that the file-loader is outputing the files into the correct path, in my case that's /dist/fonts/[name].[ext], with the example below. Once I did that, everything started presenting correctly.

{ test: /\.(ttf|eot|svg|woff(2)?)(\S+)?$/, loader: 'file-loader?publicPath=/dist&name=/fonts/[name].[ext]' }

yuripramos commented 4 years ago

I'm facing the same issue here, spent 3 hours already trying to solve without success. I already tried the config of @tjrexer but still not working, I have the same output path as yours and my config file is right now like this:

          test: /\.(ttf|eot|woff(2)?)(\S+)?$/,
          use: [
            {
              loader: 'file-loader',
              options: {
                name: '[name].[ext]',
                outputPath: 'dist/fonts',
                publicPath: 'dist/fonts'
              }
            }
          ]
        }
Sh031224 commented 3 years ago

I have a similar problem.

import "react-notifications/lib/notifications.css";

But the icon is not working like this.

스크린샷 2020-10-04 오후 10 01 17

On ReactJS, It worked fine. But on NextJS, it's not working.

Probably not a webpack problem. Because I am loading other fonts too. A separate error doesn't appear on the console, but it doesn't work.