There is no webpack.mix.js in my node_modules - npm

Question

After installing laravel mix via terminal and running the command cp node_modules/laravel-mix/setup/webpack.mix.js ./ I'm getting this error.
cp : Cannot find path 'C:\Users\COBNETCKNN\Local Sites\portofolio\app\p
ublic\wp-content\themes\wp-portofolio\node_modules\laravel-mix\setup\we
At line:1 char:1
+ cp node_modules/laravel-mix/setup/webpack.mix.js ./
+ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+ CategoryInfo : ObjectNotFound: (C:\Users\COBNET...\webp
ack.mix.js:String) [Copy-Item], ItemNotFoundException
+ FullyQualifiedErrorId : PathNotFound,Microsoft.PowerShell.Comman
ds.CopyItemCommand
I also looked inside node_modules/laravel-mix/setup/ and there was no webpack.mix.js so I couldn't pull it from there, did the directory changed or what happened? Can I copy webpack.mix.js from my previous projects and modify it for my needs?

Answer 1

For non-Laravel standalone projects, you should do the following.
mkdir my-app && cd my-app
npm init -y
npm install laravel-mix --save-dev
Create a Mix config file within the root of your project.
touch webpack.mix.js
Open webpack.mix.js and add the following code:
// webpack.mix.js
let mix = require('laravel-mix');
mix.js('src/app.js', 'dist').setPublicPath('dist');
Compile with npx mix or npm run dev.
Your webpack.mix.js should not be in /node-modules, it needs to be in the root of your project instance.
Your package.json should look more like the following with the latest version of Laravel Mix.
{
"private": true,
"scripts": {
"dev": "npm run development",
"development": "mix",
"watch": "mix watch",
"watch-poll": "mix watch -- --watch-options-poll=1000",
"hot": "mix watch --hot",
"prod": "npm run production",
"production": "mix --production"
},
"devDependencies": {
"#fortawesome/fontawesome-free": "^5.15.2",
"autoprefixer": "^10.2.4",
"browser-sync": "^2.26.14",
"browser-sync-webpack-plugin": "^2.3.0",
"cross-env": "^7.0.3",
"laravel-mix": "^6.0.11",
"postcss": "^8.2.4",
"sass": "^1.32.6",
"sass-loader": "^10.1.1",
"tailwindcss": "^2.0.2",
"vue-template-compiler": "^2.6.12"
}
}

Answer 2

Managed to solve it by lowering version of the Laravel Mix, it looks like in latest version you just don't get webpack.mix.js in your node_modules after installing laravel mix, something that should be tackled by the team... So solution for this is that inside your package.json file copy these dependencies below
"devDependencies": {
"autoprefixer": "^9.8.6",
"browser-sync": "^2.26.13",
"browser-sync-webpack-plugin": "^2.0.1",
"cross-env": "^7.0.3",
"laravel-mix": "^5.0.9",
"postcss": "^7.0.35",
"sass": "^1.30.0",
"sass-loader": "^8.0.2",
"tailwindcss": "npm:#tailwindcss/postcss7-compat#^2.0.1",
"vue-template-compiler": "^2.6.12"
},
"dependencies": {
"#fortawesome/fontawesome-free": "^5.15.1"
}
This is from my old project package.json file, after setting this up you just install laravel mix again via npm install laravel-mix --save-dev and then run cp node_modules/laravel-mix/setup/webpack.mix.js ./ which will pull webpack.mix.js from your node_modules