web-dev-qa-db-fra.com

URIError: échec du décodage du paramètre '/%PUBLIC_URL%/favicon.ico'

Je suis nouveau sur webpack et j'ai réussi à faire fonctionner le chargeur babel et le chargeur css et à compiler des projets, mais lorsque j'essaie d'accéder via le navigateur, j'obtiens l'erreur ci-dessous. Il semble que PUBLIC_URL ne soit pas reconnu. Je crois que je ne sais pas comment configurer cela.

J'apprécie vos précieux commentaires.

Merci

ℹ ｢wdm｣: Compiled successfully. URIError: Failed to decode param 
'/%PUBLIC_URL%/favicon.ico' at decodeURIComponent (<anonymous>) at 
decode_param (/home/mike/finance- 
grapher/node_modules/express/lib/router/layer.js:172:12) at Layer.match 
(/home/mike/finance- 
grapher/node_modules/express/lib/router/layer.js:123:27) at matchLayer 
(/home/mike/finance- 
grapher/node_modules/express/lib/router/index.js:574:18) at next 
(/home/mike/finance- 
grapher/node_modules/express/lib/router/index.js:220:15) at expressInit 
(/home/mike/finance- 
grapher/node_modules/express/lib/middleware/init.js:40:5) at Layer.handle 
[as handle_request] (/home/mike/finance- 
grapher/node_modules/express/lib/router/layer.js:95:5) at trim_prefix 
(/home/mike/finance- 
grapher/node_modules/express/lib/router/index.js:317:13) at 
/home/mike/finance-grapher/node_modules/express/lib/router/index.js:284:7 
at Function.process_params (/home/mike/finance- 
grapher/node_modules/express/lib/router/index.js:335:12)

Webpack.config.js

. babelrc

package.json

structure du dossier du projet

node.jsreactjswebpackbabel
6
mousa rashid

Solution rapide

Et si vous deviez remplacer %PUBLIC_URL% Par le chemin réel. Je pense que Babel a des problèmes pour transposer le %. Essayez de remplacer %PUBLIC_URL%/favicon.ico Par /public/favicon.ico Et le problème est résolu.

Meilleure solution

Ajoutez une nouvelle règle à votre webpack.config.js.

//...
{
  test: /\.(png|svg|jpg|jpeg|gif|ico)$/,
  exclude: /node_modules/,
  use: ['file-loader?name=[name].[ext]'] // ?name=[name].[ext] is only necessary to preserve the original file name
}
//...

Faites ensuite copier la ressource .ico dans le répertoire dist en ajoutant une importation dans votre App.js . import '../public/favicon.ico';

Dans votre index.html; <link rel="shortcut icon" href="favicon.ico"> Pour utiliser votre icône. Plus besoin de fournir un chemin car il sera copié dans le répertoire dist

OU:

En plus de la règle ajoutée au webpack.config.js mentionnée ci-dessus, l'ajout de plugins à la configuration du webpack peut être une meilleure façon de procéder en fonction de votre installer.

Pour moi, cela ressemble à l'ajout du package npm html-webpack-plugin au projet. Le nécessitant ensuite dans la configuration du webpack; const HtmlWebpackPlugin = require('html-webpack-plugin');. Puis ajoutez plugins au module.exports.

//...
plugins: [
  new HtmlWebpackPlugin({
    template: './public/index.html',
    filename: './index.html',
    favicon: './public/favicon.ico'
  })
]
//...

Suivre cette route et faire le travail dans la configuration du webpack signifie que la ligne ajoutée à App.js pour importer le favicon.ico ne sera plus nécessaire.

EDIT: Tel que mentionné par @Tolumide

N'oubliez pas de configurer le webpack.config de manière appropriée par environnement.

5
Rockin4Life33

J'ai eu le même problème et l'ai résolu avec ce qui suit:

Dans webpack.config.js dans le tableau plugins, ajoutez HtmlWebpackPlugin et InterpolateHtmlPlugin

  new HtmlWebpackPlugin(
        Object.assign(
          {},
          {
            inject: true,
            template: paths.appHtml,
          },
          isEnvProduction
            ? {
                minify: {
                  removeComments: true,
                  collapseWhitespace: true,
                  removeRedundantAttributes: true,
                  useShortDoctype: true,
                  removeEmptyAttributes: true,
                  removeStyleLinkTypeAttributes: true,
                  keepClosingSlash: true,
                  minifyJS: true,
                  minifyCSS: true,
                  minifyURLs: true,
                },
              }
            : undefined
        )
      ),

      new InterpolateHtmlPlugin(HtmlWebpackPlugin, env.raw)

Ceci est la documentation de InterpolateHtmlPlugin

Makes some environment variables available in index.html.
The public URL is available as %PUBLIC_URL% in index.html, e.g.:
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
In production, it will be an empty string unless you specify "homepage"
in `package.json`, in which case it will be the pathname of that URL.
In development, this will be an empty string.
0
lele