yarn serve stuck at "95% emitting CopyPlugin"

[intijk]

Version

3.9.2

Reproduction link

https://github.com/intijk/vue-cli3-bug-report-copyplugin-stuck

Environment info

phao@mm:~/workspace/athena-vc3$ vue info

Environment Info:

  System:
    OS: Linux 4.15 Ubuntu 16.04.6 LTS (Xenial Xerus)
    CPU: (12) x64 Intel(R) Core(TM) i7-5820K CPU @ 3.30GHz
  Binaries:
    Node: 12.5.0 - /usr/bin/node
    Yarn: 1.16.0 - /usr/bin/yarn
    npm: 6.9.0 - /usr/bin/npm
  Browsers:
    Chrome: 75.0.3770.100
    Firefox: 67.0.4
  npmPackages:
    @vue/babel-helper-vue-jsx-merge-props:  1.0.0 
    @vue/babel-plugin-transform-vue-jsx:  1.0.0 
    @vue/babel-preset-app:  3.9.2 
    @vue/babel-preset-jsx:  1.0.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.0.0 
    @vue/cli-overlay:  3.9.0 
    @vue/cli-plugin-babel: ^3.8.0 => 3.9.2 
    @vue/cli-plugin-e2e-cypress: ^3.8.0 => 3.9.0 
    @vue/cli-plugin-eslint: ^3.8.0 => 3.9.2 
    @vue/cli-plugin-pwa: ^3.8.0 => 3.9.0 
    @vue/cli-plugin-typescript: ^3.8.0 => 3.9.0 
    @vue/cli-plugin-unit-jest: ^3.8.0 => 3.9.0 
    @vue/cli-service: ^3.8.0 => 3.9.2 
    @vue/cli-shared-utils:  3.9.0 
    @vue/component-compiler-utils:  2.6.0 
    @vue/eslint-config-prettier: ^4.0.1 => 4.0.1 
    @vue/eslint-config-typescript: ^4.0.0 => 4.0.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.0.0 => 5.2.3 (4.7.1)
    jest-serializer-vue:  2.0.2 
    typescript: ^3.4.3 => 3.5.2 
    vue: ^2.6.10 => 2.6.10 
    vue-eslint-parser:  5.0.0 (2.0.3)
    vue-hot-reload-api:  2.3.3 
    vue-jest:  3.0.4 
    vue-loader: ^15.7.0 => 15.7.0 
    vue-markdown: ^2.2.4 => 2.2.4 
    vue-resource: ^1.5.1 => 1.5.1 
    vue-router: ^3.0.3 => 3.0.7 
    vue-style-loader:  4.1.2 
    vue-template-compiler: ^2.6.10 => 2.6.10 
    vue-template-es2015-compiler:  1.9.1 
    vuetable-2: ^1.7.5 => 1.7.5 
    vuex: ^3.0.1 => 3.1.1 
  npmGlobalPackages:
    @vue/cli: Not Found

Steps to reproduce

cd public

ln -s / root

cd ..

yarn serve

What is expected?

compile without issue

What is actually happening?

stuck at 95% emitting CopyPlugin

---

My need is simple, I want to serve files belong to a folder as is, a huge one, with symlink.

I am not sure if I am using the public in correct way, but in vue cli 2, that was a valid usage.

Maybe I should add ignore for copy plugin ? But really need some guide here on how to do that. Thank you very much!

[jestima-mpr]

Having the same issue.

[haoqunjiang]

Vue CLI is not meant to be a static web server so this is not a valid use case.

[intijk]

Hi @sodatea

Maybe give a little bit more consideration on this one?

I read the documentation, and seems my case is exactly the second one, you have thousands of images and need to dynamically reference their paths.

When to use the public folder

You need a file with a specific name in the build output.
You have thousands of images and need to dynamically reference their paths.
Some library may be incompatible with Webpack and you have no other option but to include it as a <script> tag.

I tried to copy the the file into the public folder, the bug reproduced also.

So could you be more specific of your claim? Because how the documentation describe here is strongly imply user to use it as a static file service.

Vue CLI is not meant to be a static web server so this is not a valid use case.

[haoqunjiang]

Even if it does static file serving at some extent, it’s not a full featured static web server like serve. Those files in public folder are just assets that does not need extra processing to be used in the actual web application.
In your case you symlinked the / directory, I don’t think it make sense to access the entire file system in the dev server. That’s why I say it’s not valid use case. (if you do need, please run a standalone server and proxy it to the dev server)
And the symptom is caused by the / path: the dev server just don’t have the privilege to access files inside it. Of course it can be fixed by disabling copy plugin, but why would you do that?

[intijk]

My point is , I have a huge folder , I tried copy this huge folder into public path instead of symlink make no difference, it also make copy plugin stuck.

This raise a new question: What is the safely allowed size to put under public/ folder?

[haoqunjiang]

Then you provided the wrong reproduction.

And I’ve just symlinked a folder with nearly 1GB of content into public, everything’s fine.
So I think the upper limit maybe the memory available to the nodejs process.

[intijk]

Thank you for clarify this. My copied folder has about 2TB, so seems I have no lucky on this.

I am trying to use vue.config.js to inject ignore rule into copy plugin, hope this will work.

Maybe warn a little bit in the documentation would be better for future user to avoid wasting time on this :)

[haoqunjiang]

Well, typically, HTML/JS/CSS and large files are stored separately… (CDN for the former, object or block storage for the latter)
I still don't think it makes sense to serve such a large folder in dev server.
Though, I'll consider adding a warning on this in the documentation.

[intijk]

Yes, cdn will be used for file distribution, but mount at dev mode brings a lot of convenient benefits.

Thanks for considering adding the warning in doc.

[jestima-mpr]

FYI, the problem in my scenario appeared to be related to not enough memory available in the environment I was working on for the node process, after I increased memory it solved the issue.

[givingwu]

may this can help more

[RaymondAtivie]

In my case, I recheck again my code, and I found my import path is invalid, something like :

import { myComponent } from ''

After fix the code, It works again.

[Robin3D]

@intijk How do I configure to ignore some files in public when I execute npm run serve?