vue-cli-service build fails due to wrong filename since v3.10.0

[RSeidelsohn]

Version

4.0.5

Reproduction link

cli-service-bug-reproduction

Environment info

Environment Info:

  System:
    OS: Linux 4.4 Ubuntu 18.04.3 LTS (Bionic Beaver)
    CPU: (8) x64 Intel(R) Core(TM) i7-8550U CPU @ 1.80GHz
  Binaries:
    Node: 12.7.0 - ~/.nvm/versions/node/v12.7.0/bin/node
    Yarn: 1.19.1 - ~/.yarn/bin/yarn
    npm: 6.11.3 - ~/.nvm/versions/node/v12.7.0/bin/npm
  Browsers:
    Chrome: Not Found
    Firefox: Not Found
  npmPackages:
    @storybook/vue:  5.2.1
    @vue/babel-helper-vue-jsx-merge-props:  1.0.0
    @vue/babel-plugin-transform-vue-jsx:  1.0.0
    @vue/babel-preset-app:  3.11.0
    @vue/babel-preset-jsx:  1.1.0
    @vue/babel-sugar-functional-vue:  1.0.0
    @vue/babel-sugar-inject-h:  1.0.0
    @vue/babel-sugar-v-model:  1.0.0
    @vue/babel-sugar-v-on:  1.1.0
    @vue/cli-overlay:  4.0.0-rc.7
    @vue/cli-plugin-babel: ^3.8.0 => 3.11.0
    @vue/cli-plugin-e2e-cypress: ^3.8.0 => 3.11.0
    @vue/cli-plugin-typescript: ^3.8.0 => 3.11.0
    @vue/cli-plugin-unit-jest: ^3.8.0 => 3.11.0
    @vue/cli-service: ^4.0.0 => 4.0.0-rc.7
    @vue/cli-shared-utils:  3.11.0 (4.0.0-rc.7)
    @vue/component-compiler-utils:  3.0.0 (2.6.0)
    @vue/preload-webpack-plugin:  1.1.0
    @vue/test-utils: 1.0.0-beta.29 => 1.0.0-beta.29
    @vue/web-component-wrapper:  1.2.0
    eslint-plugin-vue: ^5.2.3 => 5.2.3
    jest-serializer-vue:  2.0.2
    storybook-vue-router: ^1.0.7 => 1.0.7
    typescript: ^3.4.3 => 3.6.3
    vue: ^2.6.10 => 2.6.10
    vue-class-component: ^7.0.2 => 7.1.0
    vue-cli-plugin-storybook: ^0.6.1 => 0.6.1
    vue-eslint-parser:  5.0.0
    vue-hot-reload-api:  2.3.3
    vue-jest:  3.0.5
    vue-loader:  15.7.0
    vue-meta: ^2.0.5 => 2.3.1
    vue-property-decorator: ^8.1.0 => 8.2.2
    vue-router: ^3.0.3 => 3.1.3
    vue-style-loader:  4.1.2
    vue-template-compiler: ^2.6.10 => 2.6.10
    vue-template-es2015-compiler:  1.9.1
    vuex: ^3.0.1 => 3.1.1
  npmGlobalPackages:
    @vue/cli: Not Found

Steps to reproduce

run "yarn build"

What is expected?

Build runs through

What is actually happening?

Command fails with exit code 1 because one file created can not be accessed:

"Error: ENOENT: no such file or directory, open '/your/path/here/dist/js/article%20page0.852bf769.js'" - the file exists, but the space between "article" and "page15" has to be escaped or written as space, not as "%20". The file system can not find it with the percent sign. This happens also on a MacBook of a colleague.

---

I tracked the bug down to cli-service version 3.10.0 - up to 3.9.3 the build is fine, from version 3.10.0 on all versions until 4.0.5 fail with the exact same error. I might be allowed to send a copy of the repo affected to one dev for debugging purposes. I have created a completely stripped down version of our repository that should enable everyone to reproduce the bug. See link in the top section.

[RSeidelsohn]

Ok, I tracked the issue down to the following commit:

5ddcc13

When I remove this commit, cli-service build runs without any problems. So somehow this commit seems to URLencode file names with spaces to file names with %20 and then the file system can not access the file any more leading to a fatal error.

[dhrubo55]

hey @RSeidelsohn can i work on this?

[RSeidelsohn]

hey @RSeidelsohn can i work on this?

Sure, I'd be happy. I would love to do it myself, but I so far do not find the time to dig into the details of why that commit was done and how to not break the functionality it introduced (if at all) and how to fix the issue with the filenames I have.
Possibly the commit was not needed at all. I contacted the author of that commit, but possibly since she/he seems to be Chinese and I only know English I didn't receive any response.
I can definitely state, though, that removing that single (and luckily small) commit fixes my error.

[Tofandel]

I can tell you what the feature of the commit was, it's to correctly parse the name of the file without query string when in the config it's defined as [name].js?v=xxx

I don't know if it's really a useful feature though

So instead of url.parse() you could .split("?")[0]

Eg:

assets = assets
  .map(a => {
    a.name = a.name.split("?")[0]
    return a
  })

[RSeidelsohn]

[...] So instead of url.parse() you could .split("?")[0] [...]
Thanks a lot, @Tofandel , I'll try to change this and create a pull request, unless you feel like doing it. I will have to find the time for it first. But this explanation already helps me a lot!

[RSeidelsohn]

@Tofandel : I created a pull request (#4809) - it actually fixes my issue.

[RSeidelsohn]

Pull request #4809 has been accepted and fixes this issue.