Vuepress: Compiling crashes as soon as a Vue component is added.

[chrtz]

Bug report

Version

VuePress 0.9.0

Steps to reproduce

• install VuePress
• add vue component to .vuepress/components/ folder

What is expected?

Adding vue components to the ./vuepress/components folder. (f.g. v-button.vue (see below for the sourcecode))

What is actually happening?

Since today I got a compiling error as soon as I add a vue component to the components folder.
Yesterday it just worked.

As I thought I may corrupted a dependency or npm while updating it and couldn't find any other solution – I totally wiped node/npm and all modules from my system and reinstalled everything via brew install node.

After restart the project (npm install -g vuepress) and running vuepress dev, the issue occours again. Even after a fresh install.

The error-log:

✖ ｢wdm｣: Hash: XXX
Version: webpack 4.8.3
Time: 15707ms
Built at: 25.05.2018 14:39:36
                         Asset       Size             Chunks             Chunk Names
                assets/js/0.js   55.5 KiB                  0  [emitted]
assets/img/search.83621669.svg  216 bytes                     [emitted]
              assets/js/app.js   2.76 MiB                app  [emitted]  app
                assets/js/1.js   15.4 KiB                  1  [emitted]
                assets/js/2.js   16.8 KiB                  2  [emitted]
                assets/js/3.js     17 KiB                  3  [emitted]
                assets/js/4.js     17 KiB                  4  [emitted]
                assets/js/5.js   17.6 KiB                  5  [emitted]
                assets/js/6.js   21.4 KiB                  6  [emitted]
                assets/js/7.js   43.3 KiB                  7  [emitted]
                assets/js/8.js   17.7 KiB                  8  [emitted]
                assets/js/9.js   34.3 KiB                  9  [emitted]
               assets/js/10.js   17.9 KiB                 10  [emitted]
               assets/js/11.js     20 KiB                 11  [emitted]
               assets/js/12.js   37.1 KiB                 12  [emitted]
               assets/js/13.js     52 KiB                 13  [emitted]
               assets/js/14.js   20.9 KiB                 14  [emitted]
               assets/js/15.js   20.8 KiB                 15  [emitted]
               assets/js/16.js   30.9 KiB                 16  [emitted]
               assets/js/17.js   18.1 KiB                 17  [emitted]
               assets/js/18.js   18.6 KiB                 18  [emitted]
assets/js/vendors~docsearch.js    548 KiB  vendors~docsearch  [emitted]  vendors~docsearch
                    index.html  287 bytes                     [emitted]
Entrypoint app = assets/js/app.js
[../../../../../../usr/local/lib/node_modules/vuepress/lib/app/.temp/polyfill.js] /usr/local/lib/node_modules/vuepress/lib/app/.temp/polyfill.js 318 bytes {app} [built]
[../../../../../../usr/local/lib/node_modules/vuepress/lib/app/.temp/siteData.js] /usr/local/lib/node_modules/vuepress/lib/app/.temp/siteData.js 9.74 KiB {app} [built]
[../../../../../../usr/local/lib/node_modules/vuepress/lib/app/.temp/themeEnhanceApp.js] /usr/local/lib/node_modules/vuepress/lib/app/.temp/themeEnhanceApp.js 114 bytes {app} [built]
[../../../../../../usr/local/lib/node_modules/vuepress/lib/app/ClientOnly.js] /usr/local/lib/node_modules/vuepress/lib/app/ClientOnly.js 389 bytes {app} [built]
[../../../../../../usr/local/lib/node_modules/vuepress/lib/app/Content.js] /usr/local/lib/node_modules/vuepress/lib/app/Content.js 533 bytes {app} [built]
[../../../../../../usr/local/lib/node_modules/vuepress/lib/app/app.js] /usr/local/lib/node_modules/vuepress/lib/app/app.js 3.51 KiB {app} [built]
[../../../../../../usr/local/lib/node_modules/vuepress/lib/app/clientEntry.js] /usr/local/lib/node_modules/vuepress/lib/app/clientEntry.js 2.15 KiB {app} [built]
[../../../../../../usr/local/lib/node_modules/vuepress/lib/app/store.js] /usr/local/lib/node_modules/vuepress/lib/app/store.js 253 bytes {app} [built]
[../../../../../../usr/local/lib/node_modules/vuepress/node_modules/register-service-worker/index.js] /usr/local/lib/node_modules/vuepress/node_modules/register-service-worker/index.js 3.32 KiB {app} [built]
[../../../../../../usr/local/lib/node_modules/vuepress/node_modules/webpack-hot-client/client/hot.js] (webpack)-hot-client/client/hot.js 4.91 KiB {app} [built]
[../../../../../../usr/local/lib/node_modules/vuepress/node_modules/webpack-hot-client/client/index.js?a026f4cb-fe06-4e7b-a3ec-0605cef5033f] (webpack)-hot-client/client?a026f4cb-fe06-4e7b-a3ec-0605cef5033f 1.86 KiB {app} [built]
[../../../../../../usr/local/lib/node_modules/vuepress/node_modules/webpack-hot-client/client/log.js] (webpack)-hot-client/client/log.js 2.4 KiB {app} [built]
[../../../../../../usr/local/lib/node_modules/vuepress/node_modules/webpack-hot-client/client/socket.js] (webpack)-hot-client/client/socket.js 1.39 KiB {app} [built]
[0] multi /usr/local/lib/node_modules/vuepress/lib/app/clientEntry.js 28 bytes {app} [built]
[1] multi webpack-hot-client/client?a026f4cb-fe06-4e7b-a3ec-0605cef5033f /usr/local/lib/node_modules/vuepress/lib/app/clientEntry.js 40 bytes {app} [built]
    + 310 hidden modules

ERROR in ./.vuepress/components/v-button.vue?vue&type=script&lang=js (/usr/local/lib/node_modules/vuepress/node_modules/cache-loader/dist/cjs.js??ref--3-0!/usr/local/lib/node_modules/vuepress/node_modules/babel-loader/lib??ref--3-1!/usr/local/lib/node_modules/vuepress/node_modules/vue-loader/lib??vue-loader-options!./.vuepress/components/v-button.vue?vue&type=script&lang=js)
Module build failed: SyntaxError: /Users/chrtz/Desktop/portefeuille_docs/portefeuille-docs/package.json: Unexpected end of JSON input
    at JSON.parse (<anonymous>)
    at Object.Module._extensions..json (internal/modules/cjs/loader.js:721:27)
    at Module.load (internal/modules/cjs/loader.js:612:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:551:12)
    at Function.Module._load (internal/modules/cjs/loader.js:543:3)
    at Module.require (internal/modules/cjs/loader.js:650:17)
    at require (internal/modules/cjs/helpers.js:20:18)
    at find (/usr/local/lib/node_modules/vuepress/node_modules/babel-loader/lib/resolve-rc.js:14:49)
    at find (/usr/local/lib/node_modules/vuepress/node_modules/babel-loader/lib/resolve-rc.js:24:12)
    at find (/usr/local/lib/node_modules/vuepress/node_modules/babel-loader/lib/resolve-rc.js:24:12)
    at find (/usr/local/lib/node_modules/vuepress/node_modules/babel-loader/lib/resolve-rc.js:24:12)
    at Object.module.exports (/usr/local/lib/node_modules/vuepress/node_modules/babel-loader/lib/index.js:111:132)
 @ ./.vuepress/components/v-button.vue?vue&type=script&lang=js 1:0-393 1:409-412 1:414-804 1:414-804
 @ ./.vuepress/components/v-button.vue
 @ /usr/local/lib/node_modules/vuepress/lib/app/.temp/routes.js
 @ /usr/local/lib/node_modules/vuepress/lib/app/app.js
 @ /usr/local/lib/node_modules/vuepress/lib/app/clientEntry.js
 @ multi /usr/local/lib/node_modules/vuepress/lib/app/clientEntry.js
Child html-webpack-plugin for "index.html":
         Asset      Size  Chunks  Chunk Names
    index.html  1.38 MiB       0
    Entrypoint undefined = index.html
    [../../../../../../usr/local/lib/node_modules/vuepress/node_modules/lodash/lodash.js] /usr/local/lib/node_modules/vuepress/node_modules/lodash/lodash.js 527 KiB {0} [built]
    [../../../../../../usr/local/lib/node_modules/vuepress/node_modules/vuepress-html-webpack-plugin/lib/loader.js!../../../../../../usr/local/lib/node_modules/vuepress/lib/app/index.dev.html] /usr/local/lib/node_modules/vuepress/node_modules/vuepress-html-webpack-plugin/lib/loader.js!/usr/local/lib/node_modules/vuepress/lib/app/index.dev.html 431 bytes {0} [built]
    [../../../../../../usr/local/lib/node_modules/vuepress/node_modules/webpack/buildin/module.js] (webpack)/buildin/module.js 519 bytes {0} [built]

After deleting the vue component it just successfully compiles again.

v-button.vue:

    <button class="button" type="button" >
        <slot>Button</slot>
    </button>
</template>

<script>
export default {

}
</script>

<style scoped>
button:hover {
    background: #1a1a1a;
}

button {
    display: inline;
    font-size: 1.2rem;
    color: #ffffff;
    background: #000000;
    margin: 1.8rem auto;
    padding: 0.8rem 1.6rem;
    border-radius: 4px;
    transition: background-color 0.1s ease;
    box-sizing: border-box;
    border-bottom: 1px solid #000000;
}
</style>

Other relevant information

• Your OS: macOS 10.12.6
• Node.js version: v10.2.1
• npm version: 6.1.0
• Browser version: Chrome v66
• Is this a global or local install? global
• Which package manager did you use for the install? npm

[ulivz]

Could you provide the reproduction repo?

BTW, If you can learn empathy, if I just describe a lot of problems and code, but do not give you a running environment, how do you think of it? 🙂

[ulivz]

@chen-j You can create a git repository and pushed your code(only minimal reproduction code required) there. then give me this repo's link.

[chrtz]

https://github.com/chrtz/vuepress_repo

Strangely, this seems to work for now.
But in my actual project it still throws the error shown above as soon as I add a component to the components folder.
But I can't show the real repo in public for now, as it is still under development and part of my bachelor thesis.

But I could invite you to the private repo to have a look there - if interested.

[genedronek]

@chartz, I sympathize in frustration; ready to publish, 10 seconds from completion; no way past go. For grins, after two days of hair pulling, ahem, I tried moving the script into "enhanceApp". That worked, but I had to twist all the script code pretty hard.

[mikerockett]

~Same thing for me – worked before, and then stopped working after running npm up.~

My apologies, looks like this has something to do with me changing my Node version, and node-sass henceforth throwing a tantrum.

[chrtz]

I think it could be possible this has to do with the new npm (6.10) and the audit function. As there are two vulnerabilities according to string.js.

(https://github.com/vuejs/vuepress/issues/493)

[ulivz]

Closing it since you just said you cannot repro it anymore.

But in my actual project it still throws the error shown above as soon as I add a component to the components folder.

Well this is another issue and duplicate of #351

[chrtz]

isn't #351 about getting error when deleting the component?
I get an error as soon as I add one (as written in #500). when I delete it - everything runs flawless.

I'll check the next updates and then have it a look, if it's still occurring or not.

[ulivz]

Unlinking is equivalent to deleting. so #351 is the same problem as you said.