URIError: Failed to decode param '/%PUBLIC_URL%/favicon-32x32.png'

[Drafter500]

Hi, I updated webpack to v4, and now having this error:

URIError: Failed to decode param '/%PUBLIC_URL%/favicon-32x32.png'

In my index html I have:

<link rel="icon" type="image/png" sizes="32x32" href="%PUBLIC_URL%/favicon-32x32.png">

I've seen that now the order matters and declared the plugin after HtmlWebpackPlugin

  plugins: [
    new HtmlWebpackPlugin({
      inject: true,
      template: paths.appHtml
    }),
    new InterpolateHtmlPlugin({
      PUBLIC_URL: ''
    }),
...

What else am I missing?

[jice-lavocat]

I'm facing the same issue, and I'm a bit stuck. Any hint on how to solve this ?
I'm trying to use it in images like so:
index.html
<img src="assets/%lang%/image.png">
webpack.config.js (extract)

new HtmlWebPackPlugin({
        template: "./src/index.html",
        filename: index.html,
      }),

...

new InterpolateHtmlPlugin({
        'LANG': 'en'
      })

Output:
Module not found: Error: Can't resolve './assets/%lang%/image.png'

[Drafter500]

@tanzaho Did you try to make 'LANG' in lower case so that it matches exactly with the template?

[gregl83]

I'm having the same issue, any luck?

[Mindo21]

Well, it seems that you just have to make sure that the names of folders in your app do not contain spaces...

[Mindo21]

And it worked for me! Just make sure that you do not use spaces in the workspace folders.

[AnastasiusVivaldus]

I gave up on trying to use this package directly and used the version supplied by create-react-app, which is in react-dev-utils/InterpolateHtmlPlugin. You can examine how create-react-app uses it by running npm run eject.