Bdtjtk

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');