Laravel-mix: Cannot find module webpack.mix

[aspitzer]

• Node Version (node -v): v7.4.0
• NPM Version (npm -v): v4.0.5
• OS: Ubuntu 16

Description:

On production server get an error when running npm run dev or production. On local env works fine.
Server is a DO server with forge and Envoyer for deploymemts. I think there is something related to the virtual links.

Error I get is:

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

module.js:472
throw err;
^

Error: Cannot find module '/home/forge/XXXX/storage/app/webpack.mix'
at Function.Module._resolveFilename (module.js:470:15)
at Function.Module._load (module.js:418:25)
at Module.require (module.js:498:17)
at require (internal/module.js:20:19)
at Mix.initialize (/home/forge/pitz.es/storage/app/node_modules/laravel-mix/src/Mix.js:45:9)
at Object. (/home/forge/pitz.es/storage/app/node_modules/laravel-mix/setup/webpack.config.js:18:5)
at Module._compile (module.js:571:32)
at Object.Module._extensions..js (module.js:580:10)
at Module.load (module.js:488:32)
at tryModuleLoad (module.js:447:12)
at Function.Module._load (module.js:439:3)
at Module.require (module.js:498:17)
at require (internal/module.js:20:19)
at requireConfig (/home/forge/pitz.es/storage/app/node_modules/webpack/bin/convert-argv.js:96:18)
at /home/forge/pitz.es/storage/app/node_modules/webpack/bin/convert-argv.js:109:17
at Array.forEach (native)

npm ERR! Linux 4.4.0-57-generic
npm ERR! argv "/usr/local/bin/node" "/usr/local/bin/npm" "run" "dev"
npm ERR! node v7.4.0
npm ERR! npm v4.0.5
npm ERR! code ELIFECYCLE
npm ERR! [email protected] 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
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] dev script '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'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the pitz package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR! 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
npm ERR! You can get information on how to open an issue for this project with:
npm ERR! npm bugs pitz
npm ERR! Or if that isn't available, you can get their info via:
npm ERR! npm owner ls pitz
npm ERR! There is likely additional logging output above.

Steps To Reproduce:

npm run dev

[JeffreyWay]

And there is definitely a storage/app/webpack.mix.js file?

[garethnic]

@aspitzer @JeffreyWay I just got the same issue. Using the solution https://github.com/JeffreyWay/laravel-mix/issues/478 here helped. Basically changing cross-env/bin/cross-env.js to cross-env/dist/bin/cross-env.js - changing it for all the commands.

[aspitzer]

@JeffreyWay No that file is not existing on that path. Don't know where that path is coming from. As I said on my local works and also I don't have nothing on that path. webpack.mix.js is on the root.

@garethnic I already have the dist/ folder added on the path, otherwise the error would be different.

Any other ideas?
Thanks!

[aspitzer]

@JeffreyWay I'm pretty sure is a problem with envoyer and symbolic links. Folder where project is deployed is on the current. And node_modules is a symbolic link. I think problem is when on the node_modules tryes to go up a directory and that directory is not laravel root. (because node_modules is a symbolic link to avoid download everything on every deploy)

So is looking in this directory:
/home/forge/XXX/storage/app/webpack.mix

When it should be looking here:
/home/forge/XXX/current/webpack.mix

[aspitzer]

Also tried updating web pack config with:

let path = require('path');
mix.webpackConfig({
resolve: {
fallback: [path.join(__dirname, 'node_modules')],
root: [path.join(__dirname, 'node_modules')],
modulesDirectories: [path.join(__dirname, 'node_modules')],
}

But then receiving another error:
Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.

• configuration.resolve has an unknown property 'modulesDirectories'. These properties are valid:
  object { alias?, aliasFields?, cachePredicate?, descriptionFiles?, enforceExtension?, enforceModuleExtension?, extensions?, fileSystem?, mainFields?, mainFiles?, moduleExtensions?, modules?, plugins?, resolver?, symlinks?, unsafeCache?, useSyncFileSystemCalls? }

[JeffreyWay]

Mix needs to have a webpack.mix.js file in the project root, so if it can't find one, it makes sense that it will fail. I don't think there's anything we can do to this repo to fix your issue.

A lot of people prefer to do their production builds locally.

[jplhomer]

Hi @aspitzer! My workaround for using a symlinked node_modules folder was to copy/paste the webpack.config.js from this repo to my project root (sibling to webpack.mix.js and package.json).

Then, I added a line to the copied file before Mix.initialize() which corrects the root path to the current directory (not the location of the symlinked modules):

// imports...

/**
 * Set the root path to where this current file is. Since we symlink
 * node_modules on production, Mix thinks we are in the shared folder instead
 * of the current build folder, which causes a failed build.
 */
Mix.Paths.setRootPath( path.resolve(__dirname) );

Mix.initialize();

Finally, I updated the production script inside package.json to "node node_modules/cross-env/bin/cross-env.js NODE_ENV=production node_modules/webpack/bin/webpack.js --progress --hide-modules --config=webpack.config.js"

This is necessary because the constructor value for Mix.Paths.root() uses path.resolve() to find the current context. I don't know NodeJS well enough to suggest an alternative approach, and the workaround above works fine for me :)

cc https://github.com/JeffreyWay/laravel-mix/issues/386

[xel1045]

Hi @JeffreyWay. Why not check for an environment variable to define the root path? If the variable is not defined, fallback to the automatic root path detection.

[cerw]

This fix does not work on newest version? Anyone has fix?

[pavelpage]

Has the same problem. Does anybody has an idea to improve it instead of making production builds locally?

[cerw]

@pavelpage I have sorted it by doing copy of node_modules before and after deployments and not have it as symlink.
eg:

cd {{ release_path }}
cp -a ~/node_modules .
npm install
npm run prod
rsync -a node_modules ~/

This is not perfect but allows it deploy under 1m 👌 (without this sometimes the npm task fail , timeout..)

[pavelpage]

@cerw Thanks for your idea. But all in all, I decided to realize the idea of @jplhomer
copy webpack.config.js in a root directory and modify composer.json for it.
Start of the webpack.config.js file:

require(__dirname + '/node_modules/laravel-mix/src/index');
Mix.paths.setRootPath( path.resolve(__dirname) );
require(Mix.paths.mix());

Anyway, I hope that Jeffrey will fix it in the next releazes.

[jdavidbakr]

@JeffreyWay - this may not be the best place to ask this, but your comment that a lot of people prefer to do their builds locally ... I would love to do my builds locally, but there are a few reasons why I feel it doesn't work:

1) It means that I have to remember to re-compile everything before I deploy. Sure, it could be part of my deployment process (tagging the release, merging into the main branch, etc) but it feels like a completely unnecessary step and could easily accidentally release with a non-optimized/source-mapped site.
2) When multiple people are working on a project, it results in a great deal of merge conflicts if everyone's compiled assets are checked in.

I'd love to know what the best practices for this are, because these sure don't seem like good practices at all.

[browner12]

Recently upgraded from Elixir to Mix, and am loving it so far. Just ran into this issue myself trying to deploy to production and compile the assets there. Not sure what solution I'm going to use. Might just get rid of the symlink as long as the yarn install doesn't take too long.

I'll definitely throw my hat in the ring for compiling assets during deployment. I find it easier when working in teams (or even alone) so you avoid the conflicts. I'm not sure there is One True Way™, but there are ups and downs to both options that you have to weigh for your project.

[Fedcomp]

surprised it wasn't solved. Was running into the same issue.

A lot of people prefer to do their production builds locally.

And a lot of people don't, simply because production server has more ram/cores/better hdd and other reasons. Both ways is ok.

[mrextreme]

I don't understand this error message. It's looking for a non-existing module in the wrong directory. I have my stuff installed in public/vendor, and there is a webpack-mix module. Mix is looking for public/webpack.mix. Now, if I copy webpack-mix to that location having that name, it'll run without any errors - and any output, at all.

I tried the aformentioned copying of webpack.mix.js file, but no one said which one of the several existing ones should I copy? Also, there is no Mix.initialize() line in any of them.

Laravel 5.6
Yarn 1.7.0
NPM 6.1.0
Laravel Mix 2.1.11

[stephan-v]

I don't see why webpack is perfectly fine being able to resolve to a webpack configuration file from a symlinked node_modules directory but this can not be properly solved for laravel-mix. I have been struggling for this for an hour now because of the confusing import fest within laravel-mix.

Laravel-mix is simplying trying to resolve something relatively while Webpack is doing something entirely different to fetch the default webpack config.

I hope I can respond with some more information if I figure this out.

[izshreyansh]

@garethnic In which file do you make this changes?
cross-env/bin/cross-env.js to cross-env/dist/cross-env.js

[sayhelloelijah]

I know this is old but running npm install laravel-mix fixed my issue.

[preeteshjain]

I was using v2 and ran into this issue. Upgrading to v4 resolved it for me.

[vlasikov]

there were problems with the version laravel 5.5.
install laravel 5.8
npm install && npm install vue-router
npm run watch
__
no error
__
nodejs 8.16