I am going to test vue components in Laravel application environment.
My package.json "scripts" are following:
"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": "npm run development -- --watch",
"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",
"test": "mocha-webpack --webpack-config=node_modules/laravel-mix/setup/webpack.config.js --require tests/Vue/setup.js tests/Vue/**/*.spec.js"
},
When I ran "npm run test" it shows a callstack with following error. Did I do anything wrong?
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! # test: `mocha-webpack --webpack-config=node_modules/laravel-mix/setup/webpack.config.js --require tests/Vue/setup.js tests/Vue/**/*.spec.js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the # test script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
I think you have to setup laravel-mix webpackConfig.
Ex.
resolve: {
alias: {
'#': path.resolve(__dirname, 'resources/assets/'),
},
},
Related
I am trying to run npm run build command on local server but unfortuntly getting error using vuejs. please help me how can i resolve that thanks.
package.json
"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": "npm run development -- --watch",
"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"
},
ERROR
developer#developer-ThinkCentre-M93p:~/htdocs/yourstitichart/yourstitichart.com/cms$ npm run
build
npm ERR! missing script: build
npm ERR! A complete log of this run can be found in:
npm ERR! /home/developer/.npm/_logs/2021-03-14T19_37_00_327Z-debug.log
developer#developer-ThinkCentre-M93p:~/htdocs/yourstitichart/yourstitichart.com/cms$
you dont have a script as build
"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": "npm run development -- --watch",
"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",
"build":"write something here"//<-------
},
It looks like there is no build script. Looking at your package.json you probly want to run
npm run prod
To achieve the same behaviour
this is my package.json
{
"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": "npm run development -- --watch",
"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 --disable-host-check --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",
"serve": "node --version",
"test": "echo \"Error: no test specified\" && exit 1",
"start": "node your-script.js"
},
"devDependencies": {
"axios": "^0.19",
"core-js": "^2.6.5",
"cross-env": "^7.0.2",
"laravel-mix": "^0.10.0np",
"lodash": "^4.17.19",
"resolve-url-loader": "^3.1.0",
"webpack": "^2.1.0-beta.22"
}
}
and the error is
$ npm run dev
# dev C:\xampp\htdocs\laspp
npm run development
# development C:\xampp\htdocs\laspp
cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js
95% emitting
ERROR Failed to compile with 3 errors 5:48:21 PM
These dependencies were not found:
* jquery in ./resources/assets/js/bootstrap.js
* bootstrap-sass in ./resources/assets/js/bootstrap.js
* vue in ./resources/assets/js/bootstrap.js
To install them, you can run: npm install --save jquery bootstrap-sass vue
Asset Size Chunks Chunk Names
/js/app.js 603 kB 0 [emitted] [big] /js/app
mix-manifest.json 32 bytes [emitted]
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! # development: `cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js`
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the # development 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! C:\Users\Natty\AppData\Roaming\npm-cache\_logs\2020-10-13T00_48_22_038Z-debug.log
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! # dev: `npm run development`
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the # dev 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! C:\Users\Natty\AppData\Roaming\npm-cache\_logs\2020-10-13T00_48_22_141Z-debug.log
finally, I tried this
rm -rf node-modules
rm packageson-lock.json
npm cache clean --force
npm install
but it does not work
Looking your error and your package.json, this error tell you this :
To install them, you can run: npm install --save jquery bootstrap-sass vue
Can you do this and restart your npm run development ?
I've been using Bulma as a CSS framework for a site I'm building using Laravel, and for some reason, none of the overrides I've been writing have actually been taking place. In fact, if I remove everything from my app.scss file (including the line to import Bulma), nothing changes. I tried following the docs given for node-sass, and when i try to execute the npm css-build command, I get the following error:
> # css-build /Users/userName/Sites/siteName
> node-sass --omit-source-map-url sass/app.scss css/app.css
An output directory must be specified when compiling a directory
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! # css-build: `node-sass --omit-source-map-url sass/app.scss css/app.css`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the # css-build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
I know this is probably a terribly worded question, but I'd appreciate if anyone could point me in the right direction. I'm just genuinely lost.
app.scss:
#charset "utf-8";
#import url("https://fonts.googleapis.com/icon?family=Material+Icons");
// Variables
#import "_variables";
// Font Awesome
#import "font-awesome/scss/font-awesome";
// Bulma
#import "bulma/bulma";
// Bulma Vue Modules
#import "buefy/src/scss/buefy";
// Other SCSS Files
#import "overrides";
#import "helpers";
#import "manage";
#import "styles";
scripts portion of package.json:
"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": "npm run development -- --watch",
"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 --disable-host-check --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",
"css-build": "node-sass --omit-source-map-url sass/app.scss css/app.css",
"css-watch": "npm run css-build -- --watch",
"start": "npm run css-watch"
},
Laravel version 5.5
Laravel Mix Version 4.0.16
Node Version v10.16.0
NPM Version 6.9.0
OS Centos 7
Description
After I upgrade laravel-mix from 1* to 4.0.16 by using npm update command, npm run production doesn't work but npm run watch command works correctly.
package.json
{
"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 --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
},
"devDependencies": {
"axios": "^0.19.0",
"bootstrap-sass": "^3.4.1",
"cross-env": "^5.0.1",
"jquery": "^3.4.1",
"laravel-mix": "^4.0.16",
"lodash": "^4.17.4",
"vue": "^2.6.10"
},
"dependencies": {
"vue-js-modal": "^1.3.31",
"vue-router": "^3.0.6",
"vue-slider-component": "^3.0.32",
"vue-template-compiler": "^2.6.10"
}
}
npm run production error
[jezygroup#server jezyGroup]$ npm run production
> # production /home/jezygroup/jezyGroup
> cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js
10% building 0/1 modules 1 active ...p/resources/assets/js/AdminPanel/app.j 10% building 1/1 modules 0 activenpm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! # production: `cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the # production 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/jezygroup/.npm/_logs/2019-06-06T11_39_30_311Z-debug.log
log file
[jezygroup#server jezyGroup]$ cat /home/jezygroup/.npm/_logs/2019-06-06T11_39_30_311Z-debug.log
0 info it worked if it ends with ok
1 verbose cli [ '/home/jezygroup/.nvm/versions/node/v10.16.0/bin/node',
1 verbose cli '/home/jezygroup/.nvm/versions/node/v10.16.0/bin/npm',
1 verbose cli 'run',
1 verbose cli 'production' ]
2 info using npm#6.9.0
3 info using node#v10.16.0
4 verbose run-script [ 'preproduction', 'production', 'postproduction' ]
5 info lifecycle #~preproduction: #
6 info lifecycle #~production: #
7 verbose lifecycle #~production: unsafe-perm in lifecycle true
8 verbose lifecycle #~production: PATH: /home/jezygroup/.nvm/versions/node/v10.16.0/lib/node_modules/npm/node_modules/npm-lifecycle/node-gyp-bin:/home/jezygroup/jezyGroup/node_modules/.bin:/home/jezygroup/.nvm/versions/node/v10.16.0/bin:/usr/local/cpanel/3rdparty/lib/path-bin:/usr/local/bin:/usr/bin:/usr/local/sbin:/usr/sbin:/opt/cpanel/composer/bin:/home/jezygroup/.local/bin:/home/jezygroup/bin
9 verbose lifecycle #~production: CWD: /home/jezygroup/jezyGroup
10 silly lifecycle #~production: Args: [ '-c',
10 silly lifecycle 'cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js' ]
11 silly lifecycle #~production: Returned: code: 1 signal: null
12 info lifecycle #~production: Failed to exec production script
13 verbose stack Error: # production: `cross-env NODE_ENV=production 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> (/home/jezygroup/.nvm/versions/node/v10.16.0/lib/node_modules/npm/node_modules/npm-lifecycle/index.js:301:16)
13 verbose stack at EventEmitter.emit (events.js:198:13)
13 verbose stack at ChildProcess.<anonymous> (/home/jezygroup/.nvm/versions/node/v10.16.0/lib/node_modules/npm/node_modules/npm-lifecycle/lib/spawn.js:55:14)
13 verbose stack at ChildProcess.emit (events.js:198:13)
13 verbose stack at maybeClose (internal/child_process.js:982:16)
13 verbose stack at Process.ChildProcess._handle.onexit (internal/child_process.js:259:5)
14 verbose pkgid #
15 verbose cwd /home/jezygroup/jezyGroup
16 verbose Linux 3.10.0-962.3.2.lve1.5.24.7.el7.x86_64
17 verbose argv "/home/jezygroup/.nvm/versions/node/v10.16.0/bin/node" "/home/jezygroup/.nvm/versions/node/v10.16.0/bin/npm" "run" "production"
18 verbose node v10.16.0
19 verbose npm v6.9.0
20 error code ELIFECYCLE
21 error errno 1
22 error # production: `cross-env NODE_ENV=production 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 # production script.
23 error This is probably not a problem with npm. There is likely additional logging output above.
24 verbose exit [ 1, true ]
webpack.mix.js
let mix = require('laravel-mix');
// panel assets
mix.scripts([
'resources/assets/vendor/js/jquery-3.2.1.min.js',
'resources/assets/vendor/admin-panel/js/bootstrap.min.js',
'resources/assets/vendor/admin-panel/js/material.min.js',
'resources/assets/vendor/admin-panel/js/perfect-scrollbar.jquery.min.js',
'resources/assets/vendor/admin-panel/js/arrive.min.js',
'resources/assets/vendor/admin-panel/js/jquery.validate.min.js',
'resources/assets/vendor/admin-panel/js/bootstrap-notify.js',
'resources/assets/vendor/admin-panel/js/jquery.select-bootstrap.js',
'resources/assets/vendor/admin-panel/js/material-dashboard.js',
], 'public/js/AdminPanel.js');
mix.js('resources/assets/js/AdminPanel/app.js', 'public/js/app.js').version();
mix.styles([
'resources/assets/vendor/admin-panel/css/bootstrap.min.css',
'resources/assets/vendor/admin-panel/css//bootstrap-rtl.min.css',
'resources/assets/vendor/admin-panel/css/material-dashboard.css',
'resources/assets/vendor/admin-panel/css/mokas.css',
'resources/assets/vendor/admin-panel/css/custom.css',
], 'public/css/AdminPanel.css');
//================================================================
//=========================FRONTEND MIX ==========================
//================================================================
//===Main
mix.styles([
'resources/assets/vendor/frontend/css/bootstrap-rtl.css',
'resources/assets/vendor/frontend/css/elegant-icons.css',
'resources/assets/vendor/frontend/css/animate.css',
'resources/assets/vendor/frontend/css/slick.css',
'resources/assets/vendor/frontend/css/magnific-popup.css',
'resources/assets/vendor/frontend/css/fontiran.css',
'resources/assets/vendor/frontend/css/FontAwesome.min.css',
'resources/assets/vendor/frontend/css/toastr.min.css',
'resources/assets/vendor/frontend/css/style.css',
'resources/assets/vendor/frontend/css/responsive.css',
],'public/css/front.min.css');
mix.scripts([
'resources/assets/vendor/frontend/js/jquery-2.1.1.min.js',
'resources/assets/vendor/frontend/js/bootstrap.min.js',
'resources/assets/vendor/frontend/js/jquery.easing.js',
'resources/assets/vendor/frontend/js/wow.min.js',
'resources/assets/vendor/frontend/js/toastr.min.js',
'resources/assets/vendor/frontend/js/magnific-popup.min.js',
'resources/assets/vendor/frontend/js/jquery.scrollUp.min.js',
'resources/assets/vendor/frontend/js/slick.min.js',
'resources/assets/vendor/frontend/js/main.js',
],'public/js/front.min.js').version();
// Request wizard
mix.js('resources/assets/js/RequestWizard/app.js', 'public/js/wizard-request.min.js').version();
Update your package.json with the latest, specifically the "scripts" part.
{
"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": "npm run development -- --watch",
"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": {
"axios": "^0.19",
"bootstrap": "^4.1.0",
"cross-env": "^5.1",
"jquery": "^3.4.1",
"laravel-mix": "^4.0.16",
"lodash": "^4.17.5",
"popper.js": "^1.12",
"resolve-url-loader": "^2.3.1",
"sass": "^1.15.2",
"sass-loader": "^7.1.0",
"vue": "^2.6.10",
"vue-js-modal": "^1.3.31",
"vue-router": "^3.0.6",
"vue-slider-component": "^3.0.32",
"vue-template-compiler": "^2.6.10"
}
}
Attempting to use react in a Laravel project.
I have run npm install
my webpack.mix.js file is mix.react('resources/assets/js/app.js', 'public/js');
and running npm run dev
gives me an error
/Users/jacobchen/www/fusion2/webpack.mix.js:14
mix.react('resources/assets/js/app.js', 'public/js');
^
TypeError: mix.react is not a function
webpack.mix.js
const { mix } = require('laravel-mix');
mix.react('resources/assets/js/app.js', 'public/js');
Anyone had any experience with this?
Best Regards
Jacob
You additionally need to set up laravel-mix in npm script section in package.json.
From Laravel's package.json:
"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": "npm run development -- --watch",
"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"
},
Full example here:
https://github.com/laravel/laravel/blob/master/package.json