Documenting Installation Problem with vue-beautiful-chat

REF:

https://github.com/mattmezza/vue-beautiful-chat
$ git clone https://github.com/mattmezza/vue-beautiful-chat.git
Cloning into 'vue-beautiful-chat'...
remote: Enumerating objects: 534, done.
remote: Total 534 (delta 0), reused 0 (delta 0), pack-reused 534
Receiving objects: 100% (534/534), 1.89 MiB | 517.00 KiB/s, done.
Resolving deltas: 100% (335/335), done

OK so far, next ....


$ cd vue*
$ npm install

> fsevents@1.2.4 install /Users/Tim/Desktop/vue-beautiful-chat/node_modules/fsevents
> node install

[fsevents] Success: "/Users/Tim/Desktop/vue-beautiful-chat/node_modules/fsevents/lib/binding/Release/node-v64-darwin-x64/fse.node" already installed
Pass --update-binary to reinstall or --build-from-source to recompile

> node-sass@4.9.2 install /Users/Tim/Desktop/vue-beautiful-chat/node_modules/node-sass
> node scripts/install.js

Cached binary found at /Users/Tim/.npm/node-sass/4.9.2/darwin-x64-64_binding.node

> node-sass@4.9.2 postinstall /Users/Tim/Desktop/vue-beautiful-chat/node_modules/node-sass
> node scripts/build.js

Binary found at /Users/Tim/Desktop/vue-beautiful-chat/node_modules/node-sass/vendor/darwin-x64-64/binding.node
Testing binary
Binary is fine
added 1375 packages from 785 contributors and audited 19875 packages in 169.573s
found 578 vulnerabilities (2 low, 572 moderate, 4 high)
  run `npm audit fix` to fix them, or `npm audit` for details

not looking great, but next ...

$ npm audit fix

> fsevents@1.2.7 install /Users/Tim/Desktop/vue-beautiful-chat/node_modules/fsevents
> node install

node-pre-gyp WARN Using request for node-pre-gyp https download 
[fsevents] Success: "/Users/Tim/Desktop/vue-beautiful-chat/node_modules/fsevents/lib/binding/Release/node-v64-darwin-x64/fse.node" is installed via remote

> node-sass@4.11.0 install /Users/Tim/Desktop/vue-beautiful-chat/node_modules/node-sass
> node scripts/install.js

Cached binary found at /Users/Tim/.npm/node-sass/4.11.0/darwin-x64-64_binding.node

> node-sass@4.11.0 postinstall /Users/Tim/Desktop/vue-beautiful-chat/node_modules/node-sass
> node scripts/build.js

Binary found at /Users/Tim/Desktop/vue-beautiful-chat/node_modules/node-sass/vendor/darwin-x64-64/binding.node
Testing binary
Binary is fine
npm WARN ajv-keywords@3.2.0 requires a peer of ajv@^6.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN extract-text-webpack-plugin@3.0.2 requires a peer of webpack@^3.1.0 but none is installed. You must install peer dependencies yourself.
npm WARN img-loader@3.0.0 requires a peer of imagemin@^5.0.0 but none is installed. You must install peer dependencies yourself.

+ node-sass@4.11.0
+ webpack-dev-server@3.3.1
added 43 packages from 18 contributors, removed 19 packages, updated 77 packages and moved 7 packages in 38.93s
fixed 168 of 578 vulnerabilities in 19875 scanned packages
  4 package updates for 410 vulns involved breaking changes
  (use `npm audit fix --force` to install breaking changes; or refer to `npm audit` for steps to fix these manually)

what a mess, next ...

$ npm install ajv@^6 --save
npm WARN extract-text-webpack-plugin@3.0.2 requires a peer of webpack@^3.1.0 but none is installed. You must install peer dependencies yourself.
npm WARN img-loader@3.0.0 requires a peer of imagemin@^5.0.0 but none is installed. You must install peer dependencies yourself.

+ ajv@6.10.0
added 12 packages from 1 contributor, updated 3 packages and audited 19889 packages in 10.844s
found 4 vulnerabilities (2 low, 1 moderate, 1 high)
  run `npm audit fix` to fix them, or `npm audit` for details

$ npm audit fix
npm WARN extract-text-webpack-plugin@3.0.2 requires a peer of webpack@^3.1.0 but none is installed. You must install peer dependencies yourself.
npm WARN img-loader@3.0.0 requires a peer of imagemin@^5.0.0 but none is installed. You must install peer dependencies yourself.

up to date in 7.359s
fixed 0 of 4 vulnerabilities in 19889 scanned packages
  1 vulnerability required manual review and could not be updated
  2 package updates for 3 vulns involved breaking changes
  (use `npm audit fix --force` to install breaking changes; or refer to `npm audit` for steps to fix these manually)

WHAT A MESS! ....

$ npm install  webpack@^3 --save

> uglifyjs-webpack-plugin@0.4.6 postinstall /Users/Tim/Desktop/vue-beautiful-chat/node_modules/webpack/node_modules/uglifyjs-webpack-plugin
> node lib/post_install.js

npm WARN img-loader@3.0.0 requires a peer of imagemin@^5.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN url-loader@1.1.1 requires a peer of webpack@^4.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN webpack-cli@2.1.5 requires a peer of webpack@^4.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN webpack-dev-middleware@3.6.2 requires a peer of webpack@^4.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN webpack-dev-server@3.3.1 requires a peer of webpack@^4.0.0 but none is installed. You must install peer dependencies yourself.

+ webpack@3.12.0
added 47 packages from 79 contributors, removed 28 packages, updated 18 packages and audited 18791 packages in 16.67s
found 4 vulnerabilities (2 low, 1 moderate, 1 high)
  run `npm audit fix` to fix them, or `npm audit` for details

this is the most broken vue.js package I have ever installed:

$ npm install webpack@^4 --save
npm WARN extract-text-webpack-plugin@3.0.2 requires a peer of webpack@^3.1.0 but none is installed. You must install peer dependencies yourself.
npm WARN img-loader@3.0.0 requires a peer of imagemin@^5.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN acorn-dynamic-import@4.0.0 requires a peer of acorn@^6.0.0 but none is installed. You must install peer dependencies yourself.

+ webpack@4.29.6
added 56 packages from 58 contributors, removed 46 packages, updated 2 packages and audited 19903 packages in 14.895s
found 4 vulnerabilities (2 low, 1 moderate, 1 high)
  run `npm audit fix` to fix them, or `npm audit` for details

it's a node.js disaster, really ....

$ npm install webpack@^4 --save
npm WARN extract-text-webpack-plugin@3.0.2 requires a peer of webpack@^3.1.0 but none is installed. You must install peer dependencies yourself.
npm WARN img-loader@3.0.0 requires a peer of imagemin@^5.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN acorn-dynamic-import@4.0.0 requires a peer of acorn@^6.0.0 but none is installed. You must install peer dependencies yourself.

+ webpack@4.29.6
added 56 packages from 58 contributors, removed 46 packages, updated 2 packages and audited 19903 packages in 14.895s
found 4 vulnerabilities (2 low, 1 moderate, 1 high)
  run `npm audit fix` to fix them, or `npm audit` for details

$ npm install imagemin@^5 --save
npm WARN acorn-dynamic-import@4.0.0 requires a peer of acorn@^6.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN extract-text-webpack-plugin@3.0.2 requires a peer of webpack@^3.1.0 but none is installed. You must install peer dependencies yourself.

+ imagemin@5.3.1
added 4 packages from 2 contributors and audited 19931 packages in 9.406s
found 4 vulnerabilities (2 low, 1 moderate, 1 high)
  run `npm audit fix` to fix them, or `npm audit` for details
CYBER-SA:vue-beautiful-chat Tim$ npm install acorn@^6 --save
npm WARN extract-text-webpack-plugin@3.0.2 requires a peer of webpack@^3.1.0 but none is installed. You must install peer dependencies yourself.

+ acorn@6.1.1
added 1 package from 78 contributors, updated 1 package and audited 19932 packages in 9.176s
found 4 vulnerabilities (2 low, 1 moderate, 1 high)
  run `npm audit fix` to fix them, or `npm audit` for details
CYBER-SA:vue-beautiful-chat Tim$ npm install  webpack@^3.1.0 --save

> uglifyjs-webpack-plugin@0.4.6 postinstall /Users/Tim/Desktop/vue-beautiful-chat/node_modules/webpack/node_modules/uglifyjs-webpack-plugin
> node lib/post_install.js

npm WARN url-loader@1.1.1 requires a peer of webpack@^4.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN webpack-cli@2.1.5 requires a peer of webpack@^4.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN webpack-dev-middleware@3.6.2 requires a peer of webpack@^4.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN webpack-dev-server@3.3.1 requires a peer of webpack@^4.0.0 but none is installed. You must install peer dependencies yourself.

+ webpack@3.12.0
added 46 packages from 78 contributors, removed 55 packages, updated 3 packages and audited 18820 packages in 13.403s
found 4 vulnerabilities (2 low, 1 moderate, 1 high)
  run `npm audit fix` to fix them, or `npm audit` for details

How could this even be released to GIT in this shape?

clear the screen and try again ...

$ npm install
npm WARN url-loader@1.1.1 requires a peer of webpack@^4.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN webpack-cli@2.1.5 requires a peer of webpack@^4.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN webpack-dev-middleware@3.6.2 requires a peer of webpack@^4.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN webpack-dev-server@3.3.1 requires a peer of webpack@^4.0.0 but none is installed. You must install peer dependencies yourself.

audited 18820 packages in 9.486s
found 4 vulnerabilities (2 low, 1 moderate, 1 high)
  run `npm audit fix` to fix them, or `npm audit` for details

Enough is enough.... this GIT package is seriously broken:

$ npm install webpack@^4.0.0 --save
npm WARN extract-text-webpack-plugin@3.0.2 requires a peer of webpack@^3.1.0 but none is installed. You must install peer dependencies yourself.

+ webpack@4.29.6
added 55 packages from 58 contributors, removed 47 packages, updated 2 packages and audited 19932 packages in 15.578s
found 4 vulnerabilities (2 low, 1 moderate, 1 high)
  run `npm audit fix` to fix them, or `npm audit` for details


Let's try to build it now:

$ npm run 
Scripts available in vue-beautiful-chat via `npm run-script`:
  build:client
    webpack --config ./build/webpack.client.config.js --progress --hide-modules
  build:ssr
    webpack --config ./build/webpack.ssr.config.js --progress --hide-modules
  lint
    eslint --fix --ext .js,.vue src
  build
    npm run build:client && npm run build:ssr
  watch
    webpack --config ./build/webpack.client.config.js --progress --hide-modules --watch
  prepublishOnly
    npm run build

a total mess ....

$ npm run build

> vue-beautiful-chat@2.2.0 build /Users/Tim/Desktop/vue-beautiful-chat
> npm run build:client && npm run build:ssr


> vue-beautiful-chat@2.2.0 build:client /Users/Tim/Desktop/vue-beautiful-chat
> webpack --config ./build/webpack.client.config.js --progress --hide-modules

/Users/Tim/Desktop/vue-beautiful-chat/node_modules/webpack-cli/bin/config-yargs.js:89
				describe: optionsSchema.definitions.output.properties.path.description,
				                                           ^

TypeError: Cannot read property 'properties' of undefined
    at module.exports (/Users/Tim/Desktop/vue-beautiful-chat/node_modules/webpack-cli/bin/config-yargs.js:89:48)
    at /Users/Tim/Desktop/vue-beautiful-chat/node_modules/webpack-cli/bin/webpack.js:60:27
    at Object.<anonymous> (/Users/Tim/Desktop/vue-beautiful-chat/node_modules/webpack-cli/bin/webpack.js:515:3)
    at Module._compile (internal/modules/cjs/loader.js:701:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:712:10)
    at Module.load (internal/modules/cjs/loader.js:600:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:539:12)
    at Function.Module._load (internal/modules/cjs/loader.js:531:3)
    at Module.require (internal/modules/cjs/loader.js:637:17)
    at require (internal/modules/cjs/helpers.js:22:18)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! vue-beautiful-chat@2.2.0 build:client: `webpack --config ./build/webpack.client.config.js --progress --hide-modules`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the vue-beautiful-chat@2.2.0 build:client script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/Tim/.npm/_logs/2019-04-12T07_26_13_035Z-debug.log
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! vue-beautiful-chat@2.2.0 build: `npm run build:client && npm run build:ssr`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the vue-beautiful-chat@2.2.0 build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/Tim/.npm/_logs/2019-04-12T07_26_13_063Z-debug.log

LOL, there should be a GitHub law not to upload packages like this on the net...

I give up! :slight_smile:

Let's try yarn v. npm:

$  git clone https://github.com/mattmezza/vue-beautiful-chat.git
Cloning into 'vue-beautiful-chat'...
remote: Enumerating objects: 534, done.
remote: Total 534 (delta 0), reused 0 (delta 0), pack-reused 534
Receiving objects: 100% (534/534), 1.89 MiB | 1.05 MiB/s, done.
Resolving deltas: 100% (335/335), done.

$ cd vue*
$ yarn watch
yarn run v1.15.2
$ webpack --config ./build/webpack.client.config.js --progress --hide-modules --watch
One CLI for webpack must be installed. These are recommended choices, delivered as separate packages:
 - webpack-cli (https://github.com/webpack/webpack-cli)
   The original webpack full-featured CLI.
We will use "yarn" to install the CLI via "yarn add -D".
Do you want to install 'webpack-cli' (yes/no): yes
Installing 'webpack-cli' (running 'yarn add -D webpack-cli')...
warning package-lock.json found. Your project contains lock files generated by tools other than Yarn. It is advised not to mix package managers in order to avoid resolution inconsistencies caused by unsynchronized lock files. To clear this warning, remove package-lock.json.
[1/4] �����  Resolving packages...
[2/4] ������  Fetching packages...

waiting .... (i have a feeling the yarn installation may work better than npm..... fingers crossed) ....

but nope...

warning " > eslint-config-standard@11.0.0" has unmet peer dependency "eslint-plugin-node@>=5.2.1".
warning " > extract-text-webpack-plugin@3.0.2" has incorrect peer dependency "webpack@^3.1.0".
warning " > img-loader@3.0.0" has unmet peer dependency "imagemin@^5.0.0".
[4/4] ������  Building fresh packages...
success Saved lockfile.
success Saved 4 new dependencies.
info Direct dependencies
└─ webpack-cli@3.3.0
info All dependencies
├─ detect-file@1.0.0
├─ findup-sync@2.0.0
├─ v8-compile-cache@2.0.2
└─ webpack-cli@3.3.0
{ Error: Cannot find module 'webpack-cli'
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:582:15)
    at Function.Module._load (internal/modules/cjs/loader.js:508:25)
    at Module.require (internal/modules/cjs/loader.js:637:17)
    at require (internal/modules/cjs/helpers.js:22:18)
    at runCommand.then (/usr/local/lib/node_modules/webpack/bin/webpack.js:142:5)
    at process._tickCallback (internal/process/next_tick.js:68:7) code: 'MODULE_NOT_FOUND' }
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

Let's try anyway...

$ yarn watch
yarn run v1.15.2
$ webpack --config ./build/webpack.client.config.js --progress --hide-modules --watch
  0% compiling
webpack is watching the files...

Hash: 5c06892aee82010fd608                                                               
Version: webpack 4.19.0
Time: 17666ms
Built at: 04/12/2019 2:46:08 PM
   Asset     Size  Chunks                    Chunk Names
index.js  316 KiB       0  [emitted]  [big]  main
Entrypoint main [big] = index.js

WARNING in configuration
The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults for each environment.
You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/concepts/mode/

WARNING in asset size limit: The following asset(s) exceed the recommended size limit (244 KiB).
This can impact web performance.
Assets: 
  index.js (316 KiB)

WARNING in entrypoint size limit: The following entrypoint(s) combined asset size exceeds the recommended limit (244 KiB). This can impact web performance.
Entrypoints:
  main (316 KiB)
      index.js


WARNING in webpack performance recommendations: 
You can limit the size of your bundles by using import() or require.ensure to lazy load some parts of your application.
For more info visit https://webpack.js.org/guides/code-splitting/

Nope.... the yarn way is also broken:

$ cd demo
$ yarn dev
yarn run v1.15.2
warning package.json: No license field
$ cross-env NODE_ENV=development webpack-dev-server --open --hot
/bin/sh: cross-env: command not found
error Command failed with exit code 127.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
$ npm install cross-env 
npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN demo@1.0.0 No description
npm WARN demo@1.0.0 No repository field.
npm WARN demo@1.0.0 No license field.

+ cross-env@3.2.4
added 10 packages from 9 contributors and audited 10 packages in 1.422s
found 0 vulnerabilities

CYBER-SA:demo Tim$ yarn dev
yarn run v1.15.2
warning package.json: No license field
$ yarn dev
yarn run v1.15.2
warning package.json: No license field
$ cross-env NODE_ENV=development webpack-dev-server --open --hot

�- 「wdm」: Hash: da4a69f2db50eebb82fa
Version: webpack 4.19.0
Time: 9121ms
Built at: 04/12/2019 2:49:13 PM
 1 asset
Entrypoint main = build.js
 [3] ../node_modules/vue/dist/vue.esm.js 286 KiB {0} [built]
[10] ../node_modules/webpack/hot/log.js 1.11 KiB {0} [built]
[22] multi ../node_modules/webpack-dev-server/client?http://localhost:8081 ../node_modules/webpack/hot/dev-server.js ./src/main.js 52 bytes {0} [built]
[23] ../node_modules/webpack-dev-server/client?http://localhost:8081 7.78 KiB {0} [built]
[24] ../node_modules/url/url.js 22.8 KiB {0} [built]
[30] ../node_modules/strip-ansi/index.js 161 bytes {0} [built]
[32] ../node_modules/loglevel/lib/loglevel.js 7.68 KiB {0} [built]
[33] ../node_modules/webpack-dev-server/client/socket.js 1.05 KiB {0} [built]
[35] ../node_modules/webpack-dev-server/client/overlay.js 3.58 KiB {0} [built]
[40] ../node_modules/webpack/hot sync nonrecursive ^\.\/log$ 170 bytes {0} [built]
[42] ../node_modules/webpack/hot/dev-server.js 1.61 KiB {0} [built]
[43] ../node_modules/webpack/hot/log-apply-result.js 1.27 KiB {0} [built]
[44] ./src/main.js 646 bytes {0} [built]
[48] ./src/App.vue 1.87 KiB {0} [built]
[59] ../dist/index.js 390 KiB {0} [built]
    + 45 hidden modules

WARNING in configuration
The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults for each environment.
You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/concepts/mode/

ERROR in ./src/main.js
Module not found: Error: Can't resolve 'vue-js-modal' in '/Users/Tim/Desktop/vue-beautiful-chat/demo/src'
 @ ./src/main.js 15:18-41
 @ multi ../node_modules/webpack-dev-server/client?http://localhost:8081 ../node_modules/webpack/hot/dev-server.js ./src/main.js

Again. the endless and circular install errors continue (not posted).

Now I really give up with vue-beautiful-chat !

Additionally, I tried installing vue-beautiful-chat as a component in my usercp build.

I also could not get it to work, but I did get it to compile (finally) without errors.

The Final Verdict

I'm not going to continue trying to integrate vue-beautiful-chat into the usercp (next version).

End of story.