Vue-cli: URIError: Failed to decode param '/%3C%=%20webpackConfig.output.publicPath%20%%3Efavicon.ico'

[marco-carvalho]

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]

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

[marco-carvalho]

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]

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]

@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]

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

[bassplayer7]

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]

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:

1. Add a scss @import to the view for a file that doesn't exist:
   <style lang="scss"> @import "~assets/stylesheets/variables"; </style>
2. yarn serve
3. 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]

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

[ivaaaan]

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

[yyx990803]

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]

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

[raphaelsaunier]

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]

There are two possible reasons to see this error:

1. 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.

1. 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]

There are two possible reasons to see this error:

1. 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.

1. 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'
   }

[sodatea]

@jkzing It was added because of webpack-hot-middleware requires it
https://github.com/vuejs-templates/webpack/commit/7a82c03618219fed4fdb173894ea1bd46d767f2e
I think we can now safely remove it.

[manish87sharma]

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

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]

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]

xed that by adding below cod

in which file you have added this code

[towry]

I have a case that is caused by adding html-loader.

config.module
      .rule('html')
      .test(/\.html$/)
      .use('html-loader')
      .loader('html-loader')

// config index html
  config.plugin("html").tap(function(args) {
    args[0].vueDll = dllPublicDir + bundleConfig.vueDll.js;
    args[0].template =
      process.env.NODE_ENV === "development"
        ? "public/index.html"
        : "public/index.prod.html";

    return args;
  });

error:

URIError: Failed to decode param '/position/%3C%=%20htmlWebpackPlugin.options.vueDll%20%%3E'
[0]     at decodeURIComponent (<anonymous>)
[0]     at decode_param (/Users/towry/moseeker/wechat-fe/node_modules/express/lib/router/layer.js:172:12)
[0]     at Layer.match (/Users/towry/moseeker/wechat-fe/node_modules/express/lib/router/layer.js:123:27)
[0]     at matchLayer (/Users/towry/moseeker/wechat-fe/node_modules/express/lib/router/index.js:574:18)
[0]     at next (/Users/towry/moseeker/wechat-fe/node_modules/express/lib/router/index.js:220:15)
[0]     at expressInit (/Users/towry/moseeker/wechat-fe/node_modules/express/lib/middleware/init.js:40:5)
[0]     at Layer.handle [as handle_request] (/Users/towry/moseeker/wechat-fe/node_modules/express/lib/router/layer.js:95:5)
[0]     at trim_prefix (/Users/towry/moseeker/wechat-fe/node_modules/express/lib/router/index.js:317:13)
[0]     at /Users/towry/moseeker/wechat-fe/node_modules/express/lib/router/index.js:284:7
[0]     at Function.process_params (/Users/towry/moseeker/wechat-fe/node_modules/express/lib/router/index.js:335:12)
[0]     at next (/Users/towry/moseeker/wechat-fe/node_modules/express/lib/router/index.js:275:10)
[0]     at query (/Users/towry/moseeker/wechat-fe/node_modules/express/lib/middleware/query.js:45:5)
[0]     at Layer.handle [as handle_request] (/Users/towry/moseeker/wechat-fe/node_modules/express/lib/router/layer.js:95:5)
[0]     at trim_prefix (/Users/towry/moseeker/wechat-fe/node_modules/express/lib/router/index.js:317:13)
[0]     at /Users/towry/moseeker/wechat-fe/node_modules/express/lib/router/index.js:284:7
[0]     at Function.process_params (/Users/towry/moseeker/wechat-fe/node_modules/express/lib/router/index.js:335:12)

"vue": "^2.6.11",
"@vue/cli-service": "^4.5.4",
"vue-template-compiler": "^2.6.11",
"html-loader": "^1.3.2",
"webpack": "^4.35.2",
"webpack-cli": "^3.3.5",
 "webpack-merge": "^5.1.4"