I get this error when I try to use gulp in my Laravel project. I tried deleting node_modules and running npm install, but no lock.
λ gulp
module.js:471
throw err;
^
Error: Cannot find module 'laravel-elixir-vue-2'
at Function.Module._resolveFilename (module.js:469:15)
at Function.Module._load (module.js:417:25)
at Module.require (module.js:497:17)
at require (internal/module.js:20:19)
at Object.<anonymous> (C:\wamp64\www\ibpc\gulpfile.js:3:1)
at Module._compile (module.js:570:32)
at Object.Module._extensions..js (module.js:579:10)
at Module.load (module.js:487:32)
at tryModuleLoad (module.js:446:12)
at Function.Module._load (module.js:438:3)
I also tried to add it to package.json.
package.json
{
"private": true,
"scripts": {
"prod": "gulp --production",
"dev": "gulp watch"
},
"devDependencies": {
"bootstrap-sass": "^3.3.7",
"gulp": "^3.9.1",
"jquery": "^3.1.0",
"laravel-elixir": "^6.0.0-9",
"laravel-elixir-webpack-official": "^1.0.2",
"lodash": "^4.16.2",
"vue": "^2.0.1",
"vue-resource": "^1.0.3"
}
}
Any ideas?
Probably, you don't have laravel-elixir-vue-2 in your package.json file.
Try to install package with the next command:
npm install laravel-elixir-vue-2 --save-dev
Or add in your package.json this line:
"laravel-elixir-vue-2": "^0.3.0"
I've got same problem.
I tried to run this command
npm install laravel-elixir-webpack-official
And it fixed...
Related
i'm receiving this error whenever i try to run npm run dev
npm run development
npm WARN config global `--global`, `--local` are deprecated. Use `--location=global` instead.
> development
> cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --config=node_modules/laravel-mix/setup/webpack.config.js
[webpack-cli] TypeError: Cannot redefine property: tap
at Function.defineProperty (<anonymous>)
at Object.<anonymous> (C:\Users\dell\Downloads\fay\Modules\Votes\node_modules\laravel-mix\src\helpers.js:21:8)
at Module._compile (node:internal/modules/cjs/loader:1105:14)
at Object.Module._extensions..js (node:internal/modules/cjs/loader:1159:10)
at Module.load (node:internal/modules/cjs/loader:981:32)
at Function.Module._load (node:internal/modules/cjs/loader:822:12)
at Module.require (node:internal/modules/cjs/loader:1005:19)
at require (node:internal/modules/cjs/helpers:102:18)
at Object.<anonymous> (C:\Users\dell\Downloads\fay\Modules\Votes\node_modules\laravel-mix\src\index.js:16:1)
at Module._compile (node:internal/modules/cjs/loader:1105:14)
My package.json
"scripts": {
"rtlcss": "rtlcss",
"postinstall": "lerna bootstrap",
"dev": "npm run development",
"development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --config=node_modules/laravel-mix/setup/webpack.config.js",
"watch": "npm run development -- --watch",
"watch-poll": "npm run watch -- --watch-poll",
"prod": "npm run production",
"production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --progress --config=node_modules/laravel-mix/setup/webpack.config.js"
},
"devDependencies": {
"#babel/preset-env": "^7.16.4",
"cross-env": "^6.0.3",
"eslint": "^4.9.0",
"eslint-config-spatie": "^2.0.3",
"eslint-plugin-import": "^2.7.0",
"glob": "^7.1.2",
"laravel-mix": "^6.0.39",
"laravel-mix-merge-manifest": "^0.1.2",
"lerna": "^2.9.0",
"rtlcss": "^2.4.0",
"sass": "^1.25.0",
"sass-loader": "^8.0.2",
"vue-template-compiler": "^2.6.11",
"webpack-shell-plugin": "^0.5.0"
},
"dependencies": {
"webpack": "^5.74.0",
"yarn": "^1.22.19"
}
}
a suggested solution on Laravel-mix github is to change versions but that didn't solve it for me. any reason for that error?
i also delete node_module and package_lock.json and again run
npm install
but it still same
i'm receiving this error whenever i try to run npm run dev
[webpack-cli] TypeError: Cannot redefine property: tap
at Function.defineProperty (<anonymous>)
at Object.<anonymous> (C:\xampp\htdocs\Themes\Storefront\node_modules\laravel-mix\src\helpers.js:21:8)
at Module._compile (C:\xampp\htdocs\node_modules\v8-compile-cache\v8-compile-cache.js:192:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:1092:10)
at Module.load (internal/modules/cjs/loader.js:928:32)
at Function.Module._load (internal/modules/cjs/loader.js:769:14)
at Module.require (internal/modules/cjs/loader.js:952:19)
at require (C:\xampp\htdocs\node_modules\v8-compile-cache\v8-compile-cache.js:159:20)
at Object.<anonymous> (C:\xampp\htdocs\Themes\Storefront\node_modules\laravel-mix\src\index.js:3:1)
at Module._compile (C:\xampp\htdocs\node_modules\v8-compile-cache\v8-compile-cache.js:192:30)
my package.json file
"scripts": {
"rtlcss": "rtlcss",
"postinstall": "lerna bootstrap",
"dev": "npm run development",
"development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --config=node_modules/laravel-mix/setup/webpack.config.js",
"watch": "npm run development -- --watch",
"watch-poll": "npm run watch -- --watch-poll",
"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": {
"cross-env": "^6.0.2",
"eslint": "^4.9.0",
"eslint-config-spatie": "^2.0.3",
"eslint-plugin-import": "^2.7.0",
"glob": "^7.1.2",
"laravel-mix": "^6.0.13",
"laravel-mix-merge-manifest": "^0.1.2",
"lerna": "^4.0.0",
"postcss": "8.1",
"rtlcss": "^2.4.0",
"sass": "^1.25.0",
"sass-loader": "^8.0.2",
"vue-template-compiler": "^2.6.11",
"webpack-dev-server": "^3.11.2",
"webpack-shell-plugin": "^0.5.0"
},
"dependencies": {
"schema-utils": "^3.0.0",
"webpack": "^5.24.2",
"webpack-cli": "^4.5.0"
}
a suggested solution on Laravel-mix github is to change versions but that didn't solve it for me. any reason for that error?
Trying to make css files from scss with node-sass.
My package.json:
{
"name": "hello-webpack",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"scss": "node-sass -watch scss -o css"
},
"author": "",
"license": "ISC",
"devDependencies": {
"sass": "^1.26.10",
"sass-loader": "^9.0.3",
"webpack": "^4.44.1",
"webpack-cli": "^3.3.11"
},
"dependencies": {
"node-sass": "^4.14.1"
}
}
But when i try npm run scss i see this error:
> node-sass -watch scss -o css
internal/validators.js:120
throw new ERR_INVALID_ARG_TYPE(name, 'string', value);
^
TypeError [ERR_INVALID_ARG_TYPE]: The "path" argument must be of type string. Received undefined
at validateString (internal/validators.js:120:11)
at Object.extname (path.js:1229:5)
at getOptions (/Users/mac/Documents/Website/node_modules/node-sass/bin/node-sass:192:40)
at Object.<anonymous> (/Users/mac/Documents/Website/node_modules/node-sass/bin/node-sass:376:15)
at Module._compile (internal/modules/cjs/loader.js:1137:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:1157:10)
at Module.load (internal/modules/cjs/loader.js:985:32)
at Function.Module._load (internal/modules/cjs/loader.js:878:14)
at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:71:12)
at internal/main/run_main_module.js:17:47 {
code: 'ERR_INVALID_ARG_TYPE'
}
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! hello-webpack#1.0.0 scss: `node-sass -watch scss -o css`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the hello-webpack#1.0.0 scss 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/mac/.npm/_logs/2020-08-20T14_02_52_371Z-debug.log
What's wrong with path? It's correct, i got directories scss & css, and have some files in both.
You're using the watch option with the full name which requires 2 dashes:
node-sass scss --watch -o css
Otherwise use 1 dash with the shorthand w name:
node-sass scss -w -o css
https://www.npmjs.com/package/node-sass#command-line-interface
Any call to npm run after upgrading to Mix v4.x results in mix being undefined. I see errors like this on every run:
> npm run development
> # development /project
> cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js
/project/node_modules/webpack-cli/bin/cli.js:235
throw err;
^
TypeError: Cannot read property 'js' of undefined
at Object.<anonymous> (/project/webpack.mix.js:15:5)
at Module._compile (/project/node_modules/v8-compile-cache/v8-compile-cache.js:178:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:732:10)
at Module.load (internal/modules/cjs/loader.js:620:32)
at tryModuleLoad (internal/modules/cjs/loader.js:560:12)
at Function.Module._load (internal/modules/cjs/loader.js:552:3)
at Module.require (internal/modules/cjs/loader.js:657:17)
at require (/project/node_modules/v8-compile-cache/v8-compile-cache.js:159:20)
at Object.<anonymous> (/project/node_modules/laravel-mix/setup/webpack.config.js:12:1)
at Module._compile (/project/node_modules/v8-compile-cache/v8-compile-cache.js:178:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:732:10)
at Module.load (internal/modules/cjs/loader.js:620:32)
at tryModuleLoad (internal/modules/cjs/loader.js:560:12)
at Function.Module._load (internal/modules/cjs/loader.js:552:3)
at Module.require (internal/modules/cjs/loader.js:657:17)
at require (/project/node_modules/v8-compile-cache/v8-compile-cache.js:159:20)
at WEBPACK_OPTIONS (/project/node_modules/webpack-cli/bin/convert-argv.js:113:13)
at requireConfig (/project/node_modules/webpack-cli/bin/convert-argv.js:115:6)
at /project/node_modules/webpack-cli/bin/convert-argv.js:122:17
at Array.forEach (<anonymous>)
at module.exports (/project/node_modules/webpack-cli/bin/convert-argv.js:120:15)
at yargs.parse (/project/node_modules/webpack-cli/bin/cli.js:232:39)
at Object.parse (/project/node_modules/yargs/yargs.js:567:18)
at /project/node_modules/webpack-cli/bin/cli.js:210:8
at Object.<anonymous> (/project/node_modules/webpack-cli/bin/cli.js:500:3)
at Module._compile (internal/modules/cjs/loader.js:721:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:732:10)
at Module.load (internal/modules/cjs/loader.js:620:32)
at tryModuleLoad (internal/modules/cjs/loader.js:560:12)
at Function.Module._load (internal/modules/cjs/loader.js:552:3)
at Module.require (internal/modules/cjs/loader.js:657:17)
at require (internal/modules/cjs/helpers.js:22:18)
at Object.<anonymous> (/project/node_modules/webpack/bin/webpack.js:155:2)
at Module._compile (internal/modules/cjs/loader.js:721:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:732:10)
at Module.load (internal/modules/cjs/loader.js:620:32)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
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 1
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.
I'm running this with Laravel 5.5. I upgraded package.json to match the version in the laravel repo that is used with mix v4.
Here 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 --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"
},
"devDependencies": {
"accounting": "^0.4.1",
"axios": "^0.18.0",
"bootstrap": "^4.1.3",
"bootstrap-sass": "^3.4.0",
"cross-env": "^5.2.0",
"fancybox": "^3.0.1",
"jquery": "^3.3.1",
"jquery-slimscroll": "^1.3.8",
"ladda": "^2.0.1",
"laravel-mix": "^4.0.13",
"locutus": "^2.0.10",
"metismenu": "^2.7.9",
"moment": "^2.23.0",
"vue": "^2.5.21",
"webpack": "^4.28.3",
"webpack-cli": "^3.2.0"
},
"dependencies": {
"ajv": "^6.6.2",
"bootstrap-vue": "^2.0.0-rc.11",
"extract-text-webpack-plugin": "^4.0.0-beta.0",
"imagemin": "^6.0.0",
"jsonexport": "^2.4.1",
"laravel-echo": "^1.5.2",
"lodash": "^4.17.11",
"node-sass": "^4.11.0",
"pusher-js": "^4.3.1",
"sweetalert2": "^7.32.4",
"vue-api-query": "^1.2.0",
"vue-events": "^3.1.0",
"vue-multiselect": "^2.1.3",
"vue-sweetalert2": "^1.6.3",
"vuetable-2": "^2.0.0-beta.4",
"vuex": "^3.0.1"
}
}
My webpack.mix.js:
const { mix } = require('laravel-mix');
mix.js('resources/assets/js/app.js', 'public/js')
.sass('resources/assets/sass/app.scss', 'public/css')
.version()
.sourceMaps();
I've tried deleting node_modules and yarn install again but that doesn't fix it.
If I downgrade to v3, there are no issues other than problems compiling some SASS.
npm v6.4.1
node v11.5.0
yarn v1.12.3
Without seeing your webpack.mix.js file it's hard to say what the problem could be. I cloned the Laravel 5.5 branch and upgraded to version ^4.0.13 of laravel-mix and successfully ran both yarn dev and yarn prod, although I am using more recent versions of npm and node.
NPM 6.5.0-next.0
Node 11.6.0
Yarn 1.12.3
Here's a GitHub repo to demo.
Update
// TypeError: Cannot read property 'js' of undefined
const { mix } = require('laravel-mix');
// works
const mix = require('laravel-mix');
I'm new to Laravel and react and I just wanted to use react component along side with Laravel. I followed the process described here but when I run gulp watch I get this error:
C:\wamp64\www\laravel51\node_modules\laravel-elixir-webpack-react\main.js:3
Elixir.ready(function() {
^
TypeError: Elixir.ready is not a function
at Object.<anonymous> (C:\wamp64\www\laravel51\node_modules\laravel-elixir-webpack-react\main.js:3:8)
at Module._compile (module.js:570:32)
at Object.Module._extensions..js (module.js:579:10)
at Module.load (module.js:487:32)
at tryModuleLoad (module.js:446:12)
at Function.Module._load (module.js:438:3)
at Module.require (module.js:497:17)
at require (internal/module.js:20:19)
at Object.<anonymous> (C:\wamp64\www\laravel51\gulpfile.js:23:1)
at Module._compile (module.js:570:32)
I also run command npm install --save-dev laravel-elixir-webpack-react but get same error.
my package.json file is:
{
"private": true,
"devDependencies": {
"gulp": "^3.8.8",
"laravel-elixir-webpack-official": "^1.0.10",
"laravel-elixir-webpack-react": "^1.0.1",
"react": "^15.4.2",
"react-dom": "^15.4.2"
},
"dependencies": {
"laravel-elixir": "^4.0.0",
"bootstrap-sass": "^3.0.0"
}
}
my gulpfile is:
var elixir = require('laravel-elixir');
require('laravel-elixir-webpack-react');
elixir(function(mix) {
mix.webpack('app.js');
});
and I work with Laravel 5.1 in windows.