Laravel TypeError：无法读取未定义的属性“js”

Question

I know there are other questions about "Cannot read property 'X' of undefined" error in Laravel, but each of them have different fix depended to X .

Error i receive when i run npm run watch or npm run dev is:

 @ dev C:\Users\ME\Documents\CBLOG
> node node_modules/cross-env/dist/bin/cross-env.js NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/s
etup/webpack.config.js

C:\Users\ME\Documents\CBLOG\webpack.mix.js:15
mix.js('resources/assets/js/app.js', 'public/js')
    ^

TypeError: Cannot read property 'js' of undefined
    at Object.<anonymous> (C:\Users\ME\Documents\CBLOG\webpack.mix.js:15:5)
    at Module._compile (internal/modules/cjs/loader.js:688:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:699:10)
    at Module.load (internal/modules/cjs/loader.js:598:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:537:12)
    at Function.Module._load (internal/modules/cjs/loader.js:529:3)
    at Module.require (internal/modules/cjs/loader.js:636:17)
    at require (internal/modules/cjs/helpers.js:20:18)
    at Object.<anonymous> (C:\Users\ME\Documents\CBLOG\node_modules\laravel-mix\setup\webpack.config.js:12:1)
    at Module._compile (internal/modules/cjs/loader.js:688:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:699:10)
    at Module.load (internal/modules/cjs/loader.js:598:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:537:12)
    at Function.Module._load (internal/modules/cjs/loader.js:529:3)
    at Module.require (internal/modules/cjs/loader.js:636:17)
    at require (internal/modules/cjs/helpers.js:20:18)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! @ dev: `node node_modules/cross-env/dist/bin/cross-env.js NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_module
s/laravel-mix/setup/webpack.config.js`
npm ERR! Exit status 1
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.

I tried many Install/uninstall fixes about npm , webpack and even deleting node_modules folder and reinstalling by npm install command, but no luck.

Package.json

 "private": true,
  "scripts": {
    "dev": "node node_modules/cross-env/dist/bin/cross-env.js NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
    "watch": "node node_modules/cross-env/dist/bin/cross-env.js NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
    "hot": "node node_modules/cross-env/dist/bin/cross-env.js NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
    "production": "node node_modules/cross-env/dist/bin/cross-env.js 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.2.0",
    "jquery": "^3.4.1",
    "laravel-mix": "^4.0.16",
    "lodash": "^4.16.2",
    "vue": "^2.6.10"
  },
  "dependencies": {
    "laravel-echo": "^1.5.4",
    "pusher-js": "^4.4.0",
    "webpack": "^2.1.0-beta.22",
    "webpack-cli": "^3.3.5"
  }

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

Answer 1

Simply remove the braces surrounding the mix on your first line:

const mix = require('laravel-mix');

It does not work with the braces because laravel-mix does not use a named export.

You can have a look at this answer for more information about imports and exports: When should I use curly braces for ES6 import?