vuejs 2 : npm ERR! Could not install from "#/config" as - npm

Question

I have :
$ nodejs --version
v8.9.4
$ npm --version
5.6.0
I try to join that https://github.com/wxs77577/adminify vuejs/vuetify template with latest laravel.
I do as next:
1) laravel new Songs
2) cd Songs
php artisan --version
Laravel Framework 5.6.8
3) I copied all files from adminify/src/ into /resources/assets/js/ in Songs project folder
4) I modified my webpack.mix.js as :
let mix = require('laravel-mix');
mix.js('resources/assets/js/main.js', 'public/js') // main.js is entry point of the project
.sass('resources/assets/sass/app.scss', 'public/css');
5) Into my resources/assets/js/http.js I added axios headers configuration from Laravel's resources/assets/js/bootstrap.js, so it has content :
import Vue from 'vue'
import axios from 'axios'
import config from './config'
// enable mock
// import mock from './mock'
// if (!config.debug.mock) {
// mock.restore()
// }
window.axios = require('axios');
window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
/**
* Next we will register the CSRF Token as a common header with Axios so that
* all outgoing HTTP requests automatically have it attached. This is just
* a simple convenience so we don't have to attach every token manually.
*/
let token = document.head.querySelector('meta[name="csrf-token"]');
if (token) {
window.axios.defaults.headers.common['X-CSRF-TOKEN'] = token.content;
} else {
console.error('CSRF token not found: https://laravel.com/docs/csrf#csrf-x-csrf-token');
}
var http = axios.create({
baseURL: config.api,
timeout: 1000
// headers: { 'Authorization': 'Bearer ' + localStorage.getItem('token') }
})
http.interceptors.request.use(function (request) {
return request
}, function (error) {
// Do something with request error
return Promise.reject(error)
})
http.interceptors.response.use(function (response) {
const request = response.config
if (config.debug.http) {
console.log(
'>>>', request.method.toUpperCase(), request.url, request.params,
'\n ', response.status, response.data
)
}
return response
}, function (error) {
if (config.debug.http) {
let { response, config: request } = error
if (request) {
console.log(
'>>>', request.method.toUpperCase(), request.url, request.params,
'\n ', response.status, response.data
)
}
}
// Do something with response error
return Promise.reject(error)
})
Vue.prototype.$http = http
6) In package.json I added dependencies from adminify/package.json, so now my /package.json has content :
{
"private": true,
"scripts": {
"dev": "npm run development",
"development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
"watch": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
"watch-poll": "npm run watch -- --watch-poll",
"hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
"prod": "npm run production",
"production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
},
"dependencies": {
"adonis-websocket-client": "^1.0.2",
"babel-runtime": "^6.23.0",
"i": "^0.3.5",
"indicative": "^2.2.1",
"vue": "^2.3.3",
"vue-i18n": "^6.1.1",
"vue-quill-editor": "^2.1.6",
"vue-router": "^2.3.1",
"vue-timeago": "^3.3.1",
"vue2-dropzone": "^2.0.0"
},
"devDependencies": {
"axios": "^0.18",
"bootstrap": "^4.0.0",
"popper.js": "^1.12",
"cross-env": "^5.1",
"jquery": "^3.2",
"laravel-mix": "^2.0",
"lodash": "^4.17.4",
"vue": "^2.5.7"
"Validator": "^1.0.4",
"autoprefixer": "^6.7.2",
"axios-mock-adapter": "^1.8.1",
"babel-core": "^6.22.1",
"babel-eslint": "^7.1.1",
"babel-loader": "^6.2.10",
"babel-plugin-transform-runtime": "^6.22.0",
"babel-preset-env": "^1.3.2",
"babel-preset-stage-2": "^6.22.0",
"babel-register": "^6.22.0",
"chalk": "^1.1.3",
"connect-history-api-fallback": "^1.3.0",
"copy-webpack-plugin": "^4.0.1",
"css-loader": "^0.28.0",
"eslint": "^3.19.0",
"eslint-config-standard": "^6.2.1",
"eslint-friendly-formatter": "^2.0.7",
"eslint-loader": "^1.7.1",
"eslint-plugin-html": "^2.0.0",
"eslint-plugin-promise": "^3.4.0",
"eslint-plugin-standard": "^2.0.1",
"eventsource-polyfill": "^0.9.6",
"express": "^4.14.1",
"extract-text-webpack-plugin": "^2.0.0",
"file-loader": "^0.11.1",
"friendly-errors-webpack-plugin": "^1.1.3",
"html-webpack-plugin": "^2.28.0",
"http-proxy-middleware": "^0.17.3",
"indicative": "^2.2.1",
"mockjs": "^1.0.1-beta3",
"opn": "^4.0.2",
"optimize-css-assets-webpack-plugin": "^1.3.0",
"ora": "^1.2.0",
"pug": "^2.0.0-rc.1",
"rimraf": "^2.6.0",
"semver": "^5.3.0",
"shelljs": "^0.7.6",
"style-loader": "^0.13.1",
"stylus": "^0.54.5",
"stylus-loader": "^2.1.1",
"url-loader": "^0.5.8",
"vue-loader": "^12.1.0",
"vue-style-loader": "^3.0.1",
"vue-template-compiler": "^2.3.3",
"vuetify": "^0.14",
"vuex": "^2.3.1",
"webpack": "^2.6.1",
"webpack-bundle-analyzer": "^2.2.1",
"webpack-dev-middleware": "^1.10.0",
"webpack-hot-middleware": "^2.18.0",
"webpack-merge": "^4.1.0"
}
}
7) After that I run
$ npm install
npm WARN The package vue is included as both a dev and production dependency.
npm WARN The package indicative is included as both a dev and production dependency.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents#1.1.3 (node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents#1.1.3: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})
8) and last :
$ npm run watch-poll
> # watch-poll /mnt/_work_sdb8/wwwroot/lar/Songs
> npm run watch -- --watch-poll
> # watch /mnt/_work_sdb8/wwwroot/lar/Songs
> cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js "--watch-poll"
10% building modules 1/1 modules 0 active
Webpack is watching the files…
78% advanced chunk optimization/mnt/_work_sdb8/wwwroot/lar/Songs/node_modules/laravel-mix/node_modules/extract-text-webpack-plugin/dist/index.js:188
chunk.sortModules();
^
TypeError: chunk.sortModules is not a function
at /mnt/_work_sdb8/wwwroot/lar/Songs/node_modules/laravel-mix/node_modules/extract-text-webpack-plugin/dist/index.js:188:19
at /mnt/_work_sdb8/wwwroot/lar/Songs/node_modules/async/dist/async.js:3096:16
at eachOfArrayLike (/mnt/_work_sdb8/wwwroot/lar/Songs/node_modules/async/dist/async.js:1055:9)
at eachOf (/mnt/_work_sdb8/wwwroot/lar/Songs/node_modules/async/dist/async.js:1103:5)
at Object.eachLimit (/mnt/_work_sdb8/wwwroot/lar/Songs/node_modules/async/dist/async.js:3158:5)
at Compilation.<anonymous> (/mnt/_work_sdb8/wwwroot/lar/Songs/node_modules/laravel-mix/node_modules/extract-text-webpack-plugin/dist/index.js:184:27)
at Compilation.applyPluginsAsyncSeries (/mnt/_work_sdb8/wwwroot/lar/Songs/node_modules/tapable/lib/Tapable.js:206:13)
at Compilation.seal (/mnt/_work_sdb8/wwwroot/lar/Songs/node_modules/webpack/lib/Compilation.js:579:8)
at /mnt/_work_sdb8/wwwroot/lar/Songs/node_modules/webpack/lib/Compiler.js:493:16
at /mnt/_work_sdb8/wwwroot/lar/Songs/node_modules/tapable/lib/Tapable.js:289:11
at _addModuleChain (/mnt/_work_sdb8/wwwroot/lar/Songs/node_modules/webpack/lib/Compilation.js:481:11)
at processModuleDependencies.err (/mnt/_work_sdb8/wwwroot/lar/Songs/node_modules/webpack/lib/Compilation.js:452:13)
at _combinedTickCallback (internal/process/next_tick.js:131:7)
at process._tickCallback (internal/process/next_tick.js:180:9)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! # watch: `cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js "--watch-poll"`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the # watch 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! /home/serge/.npm/_logs/2018-03-07T12_24_13_366Z-debug.log
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! # watch-poll: `npm run watch -- --watch-poll`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the # watch-poll 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! /home/serge/.npm/_logs/2018-03-07T12_24_13_388Z-debug.log
Content of 018-03-07T12_33_56_015Z-debug.log :
0 info it worked if it ends with ok
1 verbose cli [ '/usr/bin/node', '/usr/bin/npm', 'run', 'development' ]
2 info using npm#5.6.0
3 info using node#v8.9.4
4 verbose run-script [ 'predevelopment', 'development', 'postdevelopment' ]
5 info lifecycle #~predevelopment: #
6 info lifecycle #~development: #
7 verbose lifecycle #~development: unsafe-perm in lifecycle true
8 verbose lifecycle #~development: PATH: /usr/lib/node_modules/npm/node_modules/npm-lifecycle/node-gyp-bin:/mnt/_work_sdb8/wwwroot/lar/Songs/node_modules/.bin:/usr/lib/node_modules/npm/node_modules/npm-lifecycle/node-gyp-bin:/mnt/_work_sdb8/wwwroot/lar/Songs/node_modules/.bin:/home/serge/.composer/vendor/bin:/home/serge/.composer/vendor/bin:/usr/local/sbin:/usr/local/bin:/usr/sbin:/usr/bin:/sbin:/bin:/usr/games:/usr/local/games:/snap/bin
9 verbose lifecycle #~development: CWD: /mnt/_work_sdb8/wwwroot/lar/Songs
10 silly lifecycle #~development: Args: [ '-c',
10 silly lifecycle 'cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js' ]
11 silly lifecycle #~development: Returned: code: 1 signal: null
12 info lifecycle #~development: Failed to exec development script
13 verbose stack Error: # development: `cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js`
13 verbose stack Exit status 1
13 verbose stack at EventEmitter.<anonymous> (/usr/lib/node_modules/npm/node_modules/npm-lifecycle/index.js:285:16)
13 verbose stack at emitTwo (events.js:126:13)
13 verbose stack at EventEmitter.emit (events.js:214:7)
13 verbose stack at ChildProcess.<anonymous> (/usr/lib/node_modules/npm/node_modules/npm-lifecycle/lib/spawn.js:55:14)
13 verbose stack at emitTwo (events.js:126:13)
13 verbose stack at ChildProcess.emit (events.js:214:7)
13 verbose stack at maybeClose (internal/child_process.js:925:16)
13 verbose stack at Process.ChildProcess._handle.onexit (internal/child_process.js:209:5)
14 verbose pkgid #
15 verbose cwd /mnt/_work_sdb8/wwwroot/lar/Songs
16 verbose Linux 4.13.0-36-generic
17 verbose argv "/usr/bin/node" "/usr/bin/npm" "run" "development"
18 verbose node v8.9.4
19 verbose npm v5.6.0
20 error code ELIFECYCLE
21 error errno 1
22 error # development: `cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js`
22 error Exit status 1
23 error Failed at the # development script.
23 error This is probably not a problem with npm. There is likely additional logging output above.
24 verbose exit [ 1, true ]

Answer 1

You have a problem with your webpack configuration. A couple of options:
Fix the imports
In ./resources/assets/js/i18n/index.js:
Replace:
import config from '#/config'
with:
import config from '../config'
And in /resources/assets/js/main.js:
Replace:
import '#/styles/main.styl'
with:
import './styles/main.styl'
Try the above. If it doesn't work, undo it and try the one below.
Alternative: Changing webpack config
If you are going to try this option, undo the suggested changes above.
To update your webpack config, in your webpack.mix.js, which is like:
let mix = require('laravel-mix');
mix.js('resources/assets/js/main.js', 'public/js')
.sass('resources/assets/sass/app.scss', 'public/css');
Add a mix.webpackConfig({, making it like:
let mix = require('laravel-mix');
mix.webpackConfig({
resolve:{
/* Path Shortcuts */
alias:{
'#': path.resolve(__dirname, 'resources/assets/js')
}
}
})
mix.js('resources/assets/js/main.js', 'public/js')
.sass('resources/assets/sass/app.scss', 'public/css');