URIError: Failed to decode param '/%3C%=%20webpackConfig.output.publicPath%20%%3Efavicon.ico' #1451

marco-carvalho · 2018-06-03T16:12:01Z

Version

3.0.0-beta.15

Reproduction link

https://github.com/marco-carvalho/music

Steps to reproduce

git clone https://github.com/marco-carvalho/music
npm i
npm run serve

What is expected?

App running at:

Local: http://localhost:8080/

What is actually happening?

App running at:

Local: http://localhost:8080/./

URIError: Failed to decode param '/%3C%=%20webpackConfig.output.publicPath%20%%3Efavicon.ico'
at decodeURIComponent ()
at decode_param (/media/marco/Backup/Git/music/node_modules/express/lib/router/layer.js:172:12)
at Layer.match (/media/marco/Backup/Git/music/node_modules/express/lib/router/layer.js:123:27)
at matchLayer (/media/marco/Backup/Git/music/node_modules/express/lib/router/index.js:574:18)
at next (/media/marco/Backup/Git/music/node_modules/express/lib/router/index.js:220:15)
at expressInit (/media/marco/Backup/Git/music/node_modules/express/lib/middleware/init.js:40:5)
at Layer.handle [as handle_request] (/media/marco/Backup/Git/music/node_modules/express/lib/router/layer.js:95:5)
at trim_prefix (/media/marco/Backup/Git/music/node_modules/express/lib/router/index.js:317:13)
at /media/marco/Backup/Git/music/node_modules/express/lib/router/index.js:284:7
at Function.process_params (/media/marco/Backup/Git/music/node_modules/express/lib/router/index.js:335:12)
at next (/media/marco/Backup/Git/music/node_modules/express/lib/router/index.js:275:10)
at query (/media/marco/Backup/Git/music/node_modules/express/lib/middleware/query.js:45:5)
at Layer.handle [as handle_request] (/media/marco/Backup/Git/music/node_modules/express/lib/router/layer.js:95:5)
at trim_prefix (/media/marco/Backup/Git/music/node_modules/express/lib/router/index.js:317:13)
at /media/marco/Backup/Git/music/node_modules/express/lib/router/index.js:284:7
at Function.process_params (/media/marco/Backup/Git/music/node_modules/express/lib/router/index.js:335:12)
URIError: Failed to decode param '/%3C%=%20webpackConfig.output.publicPath%20%%3Efavicon.ico'
at decodeURIComponent ()
at decode_param (/media/marco/Backup/Git/music/node_modules/express/lib/router/layer.js:172:12)
at Layer.match (/media/marco/Backup/Git/music/node_modules/express/lib/router/layer.js:123:27)
at matchLayer (/media/marco/Backup/Git/music/node_modules/express/lib/router/index.js:574:18)
at next (/media/marco/Backup/Git/music/node_modules/express/lib/router/index.js:220:15)
at expressInit (/media/marco/Backup/Git/music/node_modules/express/lib/middleware/init.js:40:5)
at Layer.handle [as handle_request] (/media/marco/Backup/Git/music/node_modules/express/lib/router/layer.js:95:5)
at trim_prefix (/media/marco/Backup/Git/music/node_modules/express/lib/router/index.js:317:13)
at /media/marco/Backup/Git/music/node_modules/express/lib/router/index.js:284:7
at Function.process_params (/media/marco/Backup/Git/music/node_modules/express/lib/router/index.js:335:12)
at next (/media/marco/Backup/Git/music/node_modules/express/lib/router/index.js:275:10)
at query (/media/marco/Backup/Git/music/node_modules/express/lib/middleware/query.js:45:5)
at Layer.handle [as handle_request] (/media/marco/Backup/Git/music/node_modules/express/lib/router/layer.js:95:5)
at trim_prefix (/media/marco/Backup/Git/music/node_modules/express/lib/router/index.js:317:13)
at /media/marco/Backup/Git/music/node_modules/express/lib/router/index.js:284:7
at Function.process_params (/media/marco/Backup/Git/music/node_modules/express/lib/router/index.js:335:12)

marco-carvalho · 2018-06-03T16:21:43Z

right now I just noticed that I created a vue.config.js with baseUrl: "./", and this was happening bcuz of this config

marco-carvalho · 2018-06-03T18:29:58Z

i just removed baseUrl: "./" from vue.config.js and errors in the gh-pages started to happen
https://marco-carvalho.github.io/music/

previously, the baseUrl: "./" solved that problem

yyx990803 · 2018-06-03T19:04:31Z

baseUrl should be an absolute path from your domain root. ./ is not a valid value. Please read the docs. ./ will break your app when nested assets reference other assets.

ar53n · 2018-06-04T09:44:27Z

@yyx990803 no other possibilities for relative path?
Because this case need when you do not know on what domain it will be. Its only for hash strategy
We could to set in options baseUrl: '', but in vue.config.sj to set baseUrl: '\',

ffxsam · 2018-07-22T20:07:04Z

This error has nothing to do with baseUrl. I'm running into the same issue myself.

bassplayer7 · 2018-07-25T19:49:41Z

For what its worth, my problem was related to baseUrl, but in a way that I missed initially.

I had a base URL set, like: /app. When I went to localhost:8080, without /app, this error was thrown. When I went to localhost:8080/app, it worked correctly.

bbugh · 2018-08-27T17:28:26Z

This issue is reproducible with a fresh vue-cli 3 project, without making any other changes except to add a bad scss @import path.

It is caused when there's an actual compilation error and you visit the page with a browser. It's pretty confusing since the stack trace and message are unrelated to the actual issue (a missing scss file). I created an example repo for this issue: https://github.com/bbugh/vue-cli-issue-1451

Reproduction steps:

Add a scss @import to the view for a file that doesn't exist:

<style lang="scss">
@import "~assets/stylesheets/variables";
</style>

yarn serve
Load localhost:8080 then see the error:

URIError: Failed to decode param '/%3C%=%20BASE_URL%20%%3Efavicon.ico'
    at decodeURIComponent (<anonymous>)
    at decode_param (/Users/bbugh/projects/vue/issue1451/node_modules/express/lib/router/layer.js:172:12)
    at Layer.match (/Users/bbugh/projects/vue/issue1451/node_modules/express/lib/router/layer.js:123:27)
    at matchLayer (/Users/bbugh/projects/vue/issue1451/node_modules/express/lib/router/index.js:574:18)
    at next (/Users/bbugh/projects/vue/issue1451/node_modules/express/lib/router/index.js:220:15)
    at expressInit (/Users/bbugh/projects/vue/issue1451/node_modules/express/lib/middleware/init.js:40:5)
    at Layer.handle [as handle_request] (/Users/bbugh/projects/vue/issue1451/node_modules/express/lib/router/layer.js:95:5)
    at trim_prefix (/Users/bbugh/projects/vue/issue1451/node_modules/express/lib/router/index.js:317:13)
    at /Users/bbugh/projects/vue/issue1451/node_modules/express/lib/router/index.js:284:7
    at Function.process_params (/Users/bbugh/projects/vue/issue1451/node_modules/express/lib/router/index.js:335:12)
    at next (/Users/bbugh/projects/vue/issue1451/node_modules/express/lib/router/index.js:275:10)
    at query (/Users/bbugh/projects/vue/issue1451/node_modules/express/lib/middleware/query.js:45:5)
    at Layer.handle [as handle_request] (/Users/bbugh/projects/vue/issue1451/node_modules/express/lib/router/layer.js:95:5)
    at trim_prefix (/Users/bbugh/projects/vue/issue1451/node_modules/express/lib/router/index.js:317:13)
    at /Users/bbugh/projects/vue/issue1451/node_modules/express/lib/router/index.js:284:7
    at Function.process_params (/Users/bbugh/projects/vue/issue1451/node_modules/express/lib/router/index.js:335:12)

latel · 2018-09-10T11:26:52Z

frequently here too, no idea what happened, sometimes it's ok, sometimes it's broken.

ivaaaan · 2018-12-10T15:48:07Z

I have the same after installing a new package (vuex-class)

yyx990803 · 2018-12-10T22:36:31Z

On a high level: this error means the URL you are visiting does not have a corresponding HTML page. There could be different causes that leads to this, so the only way to help us investigate the problem is by providing actual reproductions.

hello2parth · 2018-12-20T06:39:39Z

+1
I have a similar issue. Don't know the root cause of the same.

raphaelsaunier · 2018-12-20T07:00:01Z

I encountered this error as well and in my case it was the symptom of another problem.

The build was failing silently because of a syntax or linter error but vue-cli-service serve didn't show any errors and just served the unprocessed contents of public/index.html.

vue-cli-service build, however, did display the error and I was able to fix it so maybe you could try that?

I'll try to share a minimal code sample to reproduce the error if it happens again!

jkzing · 2018-12-20T10:40:25Z

There are two possible reasons to see this error:

Url visiting in browser doesn't match the baseUrl you specified.

In this situation, seeing this error is because because you are visiting the "original html" (by historyApiFallback), which is not compiled by html-webpack-plugin.

There is a compilation error on first build.

This is because we uses webpack.NoEmitOnErrorsPlugin, which stops html-webpack-plugin from compiling the template.

We can simply remove webpack.NoEmitOnErrorsPlugin to avoid case 2. Is there any special reasons to use it?

hello2parth · 2018-12-23T11:19:19Z

There are two possible reasons to see this error:

Url visiting in browser is not match the baseUrl you specified.

In this situation, seeing this error is because because you are visiting the "original html" (by historyApiFallback), which is not compiled by html-webpack-plugin.

There is a compilation error on first build.

This is because we uses webpack.NoEmitOnErrorsPlugin, which stops html-webpack-plugin from compiling the template.

We can simply remove webpack.NoEmitOnErrorsPlugin to avoid case 2. Is there any special reasons to use it?

Yes, You are correct and the error was due to the baseUrl, as development build was not able to take the correct path while running the app in development mode, so I have fixed that by adding below code,

module.exports = {
  baseUrl: process.env.NODE_ENV === 'production'
    ? 'production path'
    : 'development path'
   }

haoqunjiang · 2018-12-28T19:02:04Z

@jkzing It was added because of webpack-hot-middleware requires it
vuejs-templates/webpack@7a82c03
I think we can now safely remove it.

manish87sharma · 2019-04-08T08:52:57Z

This Issue occurred when you are trying to access the wrong URL.
For example below is my vue.config.js file
chainWebpack: config => {
config.plugin("html").tap(opts => {
opts[0].template = 'public/index.html'
opts[0].title = "V1 Importer Stats";
opts[0].filename = "V1Importer.html";
opts[0].hash = true;
opts[0].favicon = 'public/favicon.ico';
return opts;
});
my index.html file
<link rel="icon" href=<%= htmlWebpackPlugin.options.favicon %>>
<title><%= htmlWebpackPlugin.options.title %></title>

this is what npm run serve do
App running at:

Local: http://localhost:8080/ImporterStats/
I was accessing the above URL and got the error "Failed to decode param '/ImporterStats/%3C%='"

Correct URL is http://localhost:8080/ImporterStats/v1Importer.html because I have replaced it in above html config.

Hope this works for you as well

Nerphist · 2019-10-28T12:16:54Z

For me it happened because i had
chainWebpack: config => {
config.plugins.delete('html')
config.plugins.delete('preload')
config.plugins.delete('prefetch')
},
from vue.config.js

vikas-agent · 2019-11-07T05:43:53Z

xed that by adding below cod

in which file you have added this code

god-of-js · 2021-12-03T08:42:08Z

I had this same issue when trying to implement module federation in Vue2

URIError: Failed to decode param '/%3C%=%20BASE_URL%20%%3Efavicon.ico'

I solved it by changing the dynamic code in public\index.html

    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title><%= htmlWebpackPlugin.options.title %></title>

to

    <link rel="icon" href="./favicon.ico">
    <title>Web-common</title>

Birdknothing · 2022-10-10T03:39:16Z

it occured when i wanna put all resources in a nested directory in both development and production mode.
i found html-webpack-plugin driven by vue-cli-service failed to find the template html in dev-server. Finally i solved it by adding devMiddleware option in devServer config:

module.exports = {
  publicPath: "./" + process.env.NESTED_DIR_NAME,
  devServer:{
    devMiddleware: {
      publicPath: "/" + process.env.NESTED_DIR_NAME,
    },
  },
  ...
}

by the way, @vue/cli-service should be upgrade to support the "devMiddleware" option,in my case,its ^5.0.0

Dashsoap · 2022-10-10T03:39:38Z

我已经收到你的邮件，由于不经常使用所以无法及时回复，有急事请电联，谢谢。

yyx990803 closed this as completed Jun 3, 2018

chasegiunta mentioned this issue Jul 12, 2018

Adding "config.plugins.delete('html')" throws URIError on pageload #1824

Closed

haoqunjiang mentioned this issue Aug 16, 2018

npm run serve Unclosed string 1870 | } 1871 | .icons-shopping-14:before { > 1872 | content: "\e182"; | ^ 1873 | } #2249

Closed

haoqunjiang mentioned this issue Aug 24, 2018

BaseURI decoding problem when running serve #2342

Closed

non-self mentioned this issue Aug 24, 2018

Nested template literals error #2345

Closed

jkzing mentioned this issue Dec 29, 2018

fix(cli-service): drop webpack NoEmitOnErrorsPlugin usage #3210

Merged

snyk-bot mentioned this issue Jul 18, 2020

[Snyk] Security upgrade ts-jest from 24.3.0 to 25.3.0 Matthelonianxl/vue-cli#7

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

URIError: Failed to decode param '/%3C%=%20webpackConfig.output.publicPath%20%%3Efavicon.ico' #1451

URIError: Failed to decode param '/%3C%=%20webpackConfig.output.publicPath%20%%3Efavicon.ico' #1451

marco-carvalho commented Jun 3, 2018

marco-carvalho commented Jun 3, 2018

marco-carvalho commented Jun 3, 2018 •

edited

Loading

yyx990803 commented Jun 3, 2018 •

edited

Loading

ar53n commented Jun 4, 2018 •

edited

Loading

ffxsam commented Jul 22, 2018

bassplayer7 commented Jul 25, 2018

bbugh commented Aug 27, 2018

latel commented Sep 10, 2018 •

edited

Loading

ivaaaan commented Dec 10, 2018 •

edited

Loading

yyx990803 commented Dec 10, 2018

hello2parth commented Dec 20, 2018

raphaelsaunier commented Dec 20, 2018

jkzing commented Dec 20, 2018 •

edited

Loading

hello2parth commented Dec 23, 2018

haoqunjiang commented Dec 28, 2018

manish87sharma commented Apr 8, 2019

Nerphist commented Oct 28, 2019 •

edited

Loading

vikas-agent commented Nov 7, 2019

god-of-js commented Dec 3, 2021

Birdknothing commented Oct 10, 2022 •

edited

Loading

Dashsoap commented Oct 10, 2022 via email

URIError: Failed to decode param '/%3C%=%20webpackConfig.output.publicPath%20%%3Efavicon.ico' #1451

URIError: Failed to decode param '/%3C%=%20webpackConfig.output.publicPath%20%%3Efavicon.ico' #1451

Comments

marco-carvalho commented Jun 3, 2018

Version

Reproduction link

Steps to reproduce

What is expected?

What is actually happening?

marco-carvalho commented Jun 3, 2018

marco-carvalho commented Jun 3, 2018 • edited Loading

yyx990803 commented Jun 3, 2018 • edited Loading

ar53n commented Jun 4, 2018 • edited Loading

ffxsam commented Jul 22, 2018

bassplayer7 commented Jul 25, 2018

bbugh commented Aug 27, 2018

latel commented Sep 10, 2018 • edited Loading

ivaaaan commented Dec 10, 2018 • edited Loading

yyx990803 commented Dec 10, 2018

hello2parth commented Dec 20, 2018

raphaelsaunier commented Dec 20, 2018

jkzing commented Dec 20, 2018 • edited Loading

hello2parth commented Dec 23, 2018

haoqunjiang commented Dec 28, 2018

manish87sharma commented Apr 8, 2019

Nerphist commented Oct 28, 2019 • edited Loading

vikas-agent commented Nov 7, 2019

god-of-js commented Dec 3, 2021

Birdknothing commented Oct 10, 2022 • edited Loading

Dashsoap commented Oct 10, 2022 via email

marco-carvalho commented Jun 3, 2018 •

edited

Loading

yyx990803 commented Jun 3, 2018 •

edited

Loading

ar53n commented Jun 4, 2018 •

edited

Loading

latel commented Sep 10, 2018 •

edited

Loading

ivaaaan commented Dec 10, 2018 •

edited

Loading

jkzing commented Dec 20, 2018 •

edited

Loading

Nerphist commented Oct 28, 2019 •

edited

Loading

Birdknothing commented Oct 10, 2022 •

edited

Loading