Laravel-mix: `npx` causing issues with Yarn

[zulaica]

• Laravel Mix Version: ^6.0.18 (npm list --depth=0)
• Node Version (node -v): v14.16.0
• NPM Version (npm -v): 6.14.11
• Yarn Version: 2.x and 3.0.0-rc.2
• OS: macOS 11.2.3

Description:

The watch and build commands run npx under the hood. This causes issues when using Yarn as the package manager and forces users to install webpack and webpack-cli as dependencies manually resulting in a confusing experience.

Steps To Reproduce:

• Create a project using Yarn as the package manager
• Add laravel-mix as a dev dependency
• Add a webpack.mix file (or compatible variant)
  
  
  
  • This only needs to contain the import at the top of the file (const mix = require('laravel-mix');)
  
  
• Run mix using Yarn — yarn mix

On first run, the user is prompted to install webpack-cli. If the user chooses to install at that time, the command then subsequently fails as it can't find webpack. In order to fix this issue, webpack must also be installed as a dev dependency.

Solution:

Rather than running these commands with npx, build and watch should call webpack directly and both webpack and webpack-cli should be listed as peer dependencies.

[zulaica]

I have this solution working locally and will be submitting a PR shortly.

[zulaica]

I've been digging into this further and it seems to me the larger issue is how webpack is called. Rather than compiling all the options and running them as a shell script, it might be better to execute webpack directly from Node. I'm working on it right now, but it would effectively look something like this:

// ./bin/cli.js
...

const webpack = require('webpack');
const webpackConfig = require('../setup/webpack.config.js');

...

async function commandScript(cmd, opts) {
    const config = await webpackConfig();
    webpack(config); // for build
    webpack(config).watch({}, err => {}); // for watch

...

Setting my current PR as a draft until I have this completed.

[thecrypticace]

I've thought about that myself but it's a non starter since we'll lose the automatic setup of things handled by webpack-cli and would need to replicate all options. Right now we support passing arbitrary options to webpack-cli like so: mix -- --cli-option-goes-here

[thecrypticace]

Something we could do is run npx if running under npm and yarn run webpack if running via yarn — I think that'd work? I'd have to do some testing to check.

[zulaica]

I see! Okay, that makes sense. I'm gonna keep poking around in the meantime. The workaround for Yarn 2+ to add webpack and webpack-cli as dev dependencies isn't the worst solution, but it would be nice to not have to.

[zulaica]

Something we could do is run npx if running under npm and yarn run webpack if running via yarn — I think that'd work? I'd have to do some testing to check.

I can give that a shot. I've got everything all set up and running at the moment, so it's worth trying and reporting back.