Sponsored Content
Top Forums Web Development Documenting Installation Problem with vue-beautiful-chat Post 303033818 by Neo on Friday 12th of April 2019 03:54:43 AM
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 !
 

6 More Discussions You Might Find Interesting

1. 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

2. 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

3. 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

4. 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

5. 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

6. 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
All times are GMT -4. The time now is 02:14 PM.
Unix & Linux Forums Content Copyright 1993-2022. All Rights Reserved.
Privacy Policy