Documenting Installation Problem with vue-beautiful-chat


 
Thread Tools Search this Thread
Top Forums Web Development Documenting Installation Problem with vue-beautiful-chat
# 1  
Old 04-12-2019
Documenting Installation Problem with vue-beautiful-chat

REF:

Code:
https://github.com/mattmezza/vue-beautiful-chat

Code:
$ 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 ....

Code:
$ 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 ...

Code:
$ 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 ...

Code:
$ 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! ....

Code:
$ 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:

Code:
$ 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 ....

Code:
$ 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 ...

Code:
$ 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:

Code:
$ 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:

Code:
$ 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 ....

Code:
$ 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! Smilie
# 2  
Old 04-12-2019
Let's try yarn v. npm:

Code:
$  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...

Code:
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...

Code:
$ 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:

Code:
$ 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.

Code:
$ 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

Code:
$ 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 !
# 3  
Old 04-12-2019
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.
Login or Register to Ask a Question

Previous Thread | Next Thread

6 More Discussions You Might Find Interesting

1. Web Development

Vue.js component: Beautiful code highlighter

Sooner than later I will render forum discussions in Vue.js to complement the standard way of showing forum threads. Today, I ran across this component, vue-code-highlight Beautiful code syntax highlighting as Vue.js component. https://www.unix.com/members/1-albums225-picture1199.jpg ... (1 Reply)
Discussion started by: Neo
1 Replies

2. Web Development

Vue.js Steam Chat

This Vue.js chat component installed easily: npm i --save vue-steam-chat I was able to set it up and change the background color in the component css file to match the forums in seconds: https://www.unix.com/members/1-albums225-picture1162.png <template> <div style="height: 600px;... (17 Replies)
Discussion started by: Neo
17 Replies

3. Web Development

Vue JS 2 Tutorial by The Net Ninja: A Recommended Vue.js Video Tutorial Series

A number of people have asked me how to get started with Vue.js and my reply before today was to Google "Vue.js". That has changed and my recommendation to anyone who wants to learn the fastest growing, easiest to learn and use Vue.js web dev framework is to watch this video tutorial series: ... (0 Replies)
Discussion started by: Neo
0 Replies

4. Web Development

Simple Vue.js Component to Redirect to External Web Page Using Vue Router

Vue Router has some quirks and on of the quirks is that it is not reliable when adding external links using the vue-router library. After struggling with many solutions, I have found that creating a simple Vue.js component like this one seems to work the best (so far): Component Example: ... (0 Replies)
Discussion started by: Neo
0 Replies

5. What is on Your Mind?

Very Funny and Somewhat Amazing 2006 Chat Bot Chat

Working on the badging system, Just found this old thread for 2006 and started reading it. ROTFL ... what a great discussion between forum members and our chat bot Gollum "back in the good old days"... You must check this out if you want a laugh and big smile: ... (1 Reply)
Discussion started by: Neo
1 Replies

6. Web Development

Can you embed Skype or any other video chat/chat program into a webpage?

Hi, I am trying to embed Skype or any other video chat/chat program into a webpage. Has anyone had success doing this? or know how? Thanks Phil (2 Replies)
Discussion started by: phil_heath
2 Replies
Login or Register to Ask a Question