Laravel-mix: Dependencies were not found in node_modules

Created on 27 Jan 2017 · 13Comments · Source: JeffreyWay/laravel-mix

webpack.mix.js: https://gist.github.com/xKairu/ed783f81fbad6d7925197f072f82ad13
package.json: https://gist.github.com/xKairu/d520efcc92b518c19578d67c32b02a9d
error: https://gist.github.com/xKairu/92da8542aa8e0c19c53edd4a58be2dae

Using Laravel 5.4 + Spark 3.0.5 with Homestead on Windows 10. I have Homestead booting with admin privileges so symlinks work. Tried yarn and npm, both with and without --no-bin-links. Removing the extract method results in the same error but with only 65 errors rather than 77.

Am I doing something wrong or does Spark not wanna work with Mix at the moment?

Source

xKairu

Most helpful comment

I'm getting the same error. It says 5 errors and it wants the Bootstrap glyphicons. Any help would be appreciated.

dugajean on 3 Feb 2017

👍20

All 13 comments

To start, your module loaders section is in the format for Webpack 1, not Webpack 2. You need module.rules: [].

JeffreyWay on 27 Jan 2017

Is everything else in the config right? I get the same error with or without the loaders config.

xKairu on 27 Jan 2017

And, just to be perfectly sure, there's a node_modules/moment folder in your project?

JeffreyWay on 27 Jan 2017

Yup, everything showing an error has a folder in node_modules.

xKairu on 28 Jan 2017

Alright fixed that issue by adding 'node_modules', into the resolve array. Now I'm getting:

These dependencies were not found in node_modules:

* ./fonts/toolkit-entypo.eot
* ./fonts/toolkit-entypo.woff2
* ./fonts/toolkit-entypo.woff
* ./fonts/toolkit-entypo.ttf

Which is caused by:

@icon-font-path: "../../fonts/";
@icon-font-name: "toolkit-entypo";

...

@font-face {
  font-family: "toolkit-entypo";
  src: url('@{icon-font-path}@{icon-font-name}.eot');
  src: url('@{icon-font-path}@{icon-font-name}.eot?#iefix') format('eot'),
       url('@{icon-font-path}@{icon-font-name}.woff2') format('woff2'),
       url('@{icon-font-path}@{icon-font-name}.woff') format('woff'),
       url('@{icon-font-path}@{icon-font-name}.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

Solved this by changing the icon-font-path to "../../../../fonts/" and moving fonts into ./resources/fonts. Compiling works, now I'm getting in console:

Uncaught TypeError: Cannot read property 'interceptors' of undefined
    at Object.<anonymous> (vue-bootstrap.js:17)
    at __webpack_require__ (bootstrap f356060…:52)
    at Object.<anonymous> (spark-bootstrap.js:46)
    at Object.module.exports.el (app.d6f2cbe….js:13165)
    at __webpack_require__ (bootstrap f356060…:52)
    at Object.<anonymous> (app.js:17)
    at __webpack_require__ (bootstrap f356060…:52)
    at Object.<anonymous> (app.d6f2cbe….js:16554)
    at __webpack_require__ (bootstrap f356060…:52)
    at webpackJsonpCallback (bootstrap f356060…:23)

Might just wait for the official Spark update :/

xKairu on 29 Jan 2017

Hi @JeffreyWay

Issues running npm run dev on Windows machine.

Windows 8.1
node v6.9.5
npm 4.1.2

webpack.mix.js is default

I have updated package.json scripts to cross-env NODE_ENV=development... to make sure things run on windows as per #165

It seems its a file path issue error and weirdly npm run dev is moving loads of my public/img assets to the public folder and fails with:

ERROR  Failed to compile with 4 errors

These dependencies were not found in node_modules:

* ../img/dark_wood.png
* ../img/tick.png?2
* ../img/bleed-sky-high.jpg
* ../img/bleed-finished.jpg

Did you forget to run npm install --save for them?
                                                                   Asset       Size  Chunks                    Chunk Names
                        quotes-open.png?f57dc5c5e9c0b90350f8d6628f885de8  738 bytes          [emitted]
                   client-tile-gray.png?1cd2a7694ef124e5e33dfe68739ed943    46.9 kB          [emitted]
         header-triangles-exp-grad4.png?8ad882db932102b69493098b0bca7615     202 kB          [emitted]
                              flags.png?b7e354724626fd076cea044cd20e9044     163 kB          [emitted]
 fonts/glyphicons-halflings-regular.eot?7ad17c6085dee9a33787bac28fb23d46    20.3 kB          [emitted]
          fonts/fontawesome-webfont.eot?25a32416abee198dd821b0b17a198a8f    76.5 kB          [emitted]
                     bleed-keyboard.png?5c3fd178bdb7a4d02a9204d189d12559     294 kB          [emitted]  [big]
                         demo-back3.png?c0f9ecb15e3da0c2ad8777481b58e3c1     303 kB          [emitted]  [big]
                       quotes-close.png?3a7d6733abedea8f4f620924fb840ae0  548 bytes          [emitted]
                        client-tile.png?66b30b2250e98eb57af21afc80dc4dbb    46.8 kB          [emitted]
 fonts/glyphicons-halflings-regular.svg?ff423a4251cf2986555523dfe315c42b    62.9 kB          [emitted]
 fonts/glyphicons-halflings-regular.ttf?e49d52e74b7689a0727def99da31f3eb    41.3 kB          [emitted]
fonts/glyphicons-halflings-regular.woff?68ed1dac06bf0409c18ae7bc62889170    23.3 kB          [emitted]
          fonts/fontawesome-webfont.svg?24c601e721ebd8279d38e2cfa0d01bc6     392 kB          [emitted]  [big]
          fonts/fontawesome-webfont.ttf?1dc35d25e61d819a9c357074014867ab     153 kB          [emitted]
         fonts/fontawesome-webfont.woff?c8ddf1e5e5bf3682bc7bebf30f394148    90.4 kB          [emitted]
        fonts/fontawesome-webfont.woff2?e6cf7c6ec7c2d6f670ae9d762604cb0b    71.9 kB          [emitted]
                                                              /js/app.js     759 kB       0  [emitted]  [big]  /js/app
                                                       mix-manifest.json   32 bytes          [emitted]

npm ERR! Windows_NT 6.3.9600
npm ERR! argv "C:\\Program Files\\nodejs\\node.exe" "C:\\Users\\pearson\\AppData\\Roaming\\npm\\node_modules\\npm\\bin\\npm-cli.js" "run" "dev"
npm ERR! node v6.9.5
npm ERR! npm  v4.1.2
npm ERR! code ELIFECYCLE
npm ERR! @ dev: `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 2
npm ERR!
npm ERR! Failed at the @ dev script '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! 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  package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR!     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! You can get information on how to open an issue for this project with:
npm ERR!     npm bugs
npm ERR! Or if that isn't available, you can get their info via:
npm ERR!     npm owner ls
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR!     C:\wamp64\www\ec4p2\npm-debug.log

Thanks, didn't know whether to post this here or #200

thatdoorsajar on 1 Feb 2017

I'm getting the same error. It says 5 errors and it wants the Bootstrap glyphicons. Any help would be appreciated.

dugajean on 3 Feb 2017

👍20

@dugajean

I'm getting the same error. It says 5 errors and it wants the Bootstrap glyphicons. Any help would be appreciated.

Same here.

` Last login: Thu Feb 2 15:52:14 on ttys001
ERROR Failed to compile with 5 errors

These dependencies were not found in node_modules:

../fonts/bootstrap/glyphicons-halflings-regular.eot
../fonts/bootstrap/glyphicons-halflings-regular.woff2
../fonts/bootstrap/glyphicons-halflings-regular.woff
../fonts/bootstrap/glyphicons-halflings-regular.ttf
../fonts/bootstrap/glyphicons-halflings-regular.svg

Did you forget to run npm install --save for them?
Asset Size Chunks Chunk Names
/js/app.js 1.16 MB 0 [emitted] [big] /js/app
mix-manifest.json 32 bytes [emitted]
`

christopherarter on 3 Feb 2017

I need someone to give me specific reproducible steps for a fresh project.

JeffreyWay on 3 Feb 2017

To reproduce the error, try fresh install on Windows 10.

npm install
npm run dev

I tried font-awesome and same error

npm ERR! Windows_NT 10.0.14393
npm ERR! argv "C:\\Program Files\\nodejs\\node.exe" "C:\\Users\\xxyyzz\\AppData\\Roaming\\npm\\node_modules\\npm\\bin\\npm-cli.js" "run" "dev"
npm ERR! node v6.9.5
npm ERR! npm  v4.1.2
npm ERR! code ELIFECYCLE
npm ERR! @ dev: `node node_modules/cross-env/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 2
npm ERR!
 ERROR  Failed to compile with 6 errors

These dependencies were not found in node_modules:

* ../fonts/fontawesome-webfont.eot?v=4.7.0
* ../fonts/fontawesome-webfont.eot
* ../fonts/fontawesome-webfont.woff2?v=4.7.0
* ../fonts/fontawesome-webfont.woff?v=4.7.0
* ../fonts/fontawesome-webfont.ttf?v=4.7.0
* ../fonts/fontawesome-webfont.svg?v=4.7.0

abixalmon on 3 Feb 2017

👍14

To those with bootstrap font errors, something like this PR supposedly addresses that

https://github.com/laravel/laravel/pull/4109

Sorry for being another hijacking this issue but I have a problem of my own: In some of my vue files, I do a require('font-awesome-webpack2'); to load the font awesome stylesheet when needed. This worked on laravel 5.3 and laravel elixir, but doesn't after upgrading to laravel 5.4 and laravel mix. The same code now gives me the following error upon compilation:

This dependency was not found in node_modules:

* style!css!less!./font-awesome-styles.loader!./font-awesome.config.js

georaldc on 3 Feb 2017

👍3

I have the exact same issue with the following output:

ERROR Failed to compile with 5 errors

These dependencies were not found in node_modules:

../fonts/bootstrap/glyphicons-halflings-regular.eot
../fonts/bootstrap/glyphicons-halflings-regular.woff2
../fonts/bootstrap/glyphicons-halflings-regular.woff
../fonts/bootstrap/glyphicons-halflings-regular.ttf
../fonts/bootstrap/glyphicons-halflings-regular.svg

This is with no changes made to the default Laravel project at all, so this probably breaks for everyone who tries to make a new project!

My setup in a nutshell:

Laravel 5.4.9
Laravel Installer 1.3.4
Laravel Valet 2.0.3
Laravel Mix 0.6.3
Node 7.5
NPM 4.1.2
I ran a fresh "laravel new testproject" followed by "npm update"(/install)" and then ran "npm run dev" and I get the errors as shown above.