Upgrading from v0.5.3 to v0.5.9 causes the following errors:

Module parse failed: ...resources\assets\sass\portal.scss Unexpected character '@' (1:0) You may need an appropriate loader to handle this file type. | @font-face { | font-family: 'Open Sans'; | font-style: normal;

Switching back to v0.5.3 or v0.5.7 without any other config changes everything is ok...

• Laravel Mix Version: 1.4.2 (npm list --depth=0)
• Node Version (node -v): v8.2.1
• NPM Version (npm -v): 5.3.0
• OS: Debian 8

Description:

When I'm running the command npm run dev, I'm getting the following output with an error:

root@gra2-status:/var/www/webinterface# npm run dev

> @ dev /var/www/webinterface
> npm run development


> @ development /var/www/webinterface
> cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js

events.js:182
      throw er; // Unhandled 'error' event
      ^

Error: spawn node_modules/webpack/bin/webpack.js ENOENT
    at exports._errnoException (util.js:1024:11)
    at Process.ChildProcess._handle.onexit (internal/child_process.js:192:19)
    at onErrorNT (internal/child_process.js:374:16)
    at _combinedTickCallback (internal/process/next_tick.js:138:11)
    at process._tickCallback (internal/process/next_tick.js:180:9)
    at Function.Module.runMain (module.js:607:11)
    at startup (bootstrap_node.js:158:16)
    at bootstrap_node.js:575:3
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! @ development: `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 1
npm ERR!
npm ERR! Failed at the @ development script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /root/.npm/_logs/2017-07-29T07_18_17_185Z-debug.log
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! @ dev: `npm run development`
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.

npm ERR! A complete log of this run can be found in:
npm ERR!     /root/.npm/_logs/2017-07-29T07_18_17_205Z-debug.log

Steps To Reproduce:

Clean Laravel Installation ( composer create-project laravel/laravel webinterface)

1. run: composer install
2. run: npm install
3. run: npm run dev

This is currently blocked by an issue with webpack 4 regarding CSS chunk splitting.

All but one test currently pass.

I've gathered some data on which plugins have releases (beta or otherwise) that work with webpack 4. Any help here would be 👌

Working Loaders / Plugins

• babel-loader (7.1.3)
• css-loader (0.28.10)
• less-loader (4.0.6)
• resolve-url-loader (2.3.0)
• sass-loader (6.0.7)
• sass-resources-loader (1.3.3)
• stylus-loader (3.0.2)
• ts-loader (4.0.0)
• friendly-errors-webpack-plugin (1.7.0)
• webpack-chunk-hash (0.6.0)

Likely Working Loaders / Plugins

These have not been updated but appear to work

• coffee-loader

Unknown

• html-loader
• img-loader
• postcss-loader

• Laravel Mix Version: 0.8.7
• Node Version (node -v): 7.6.0
• NPM Version (npm -v): 4.3.0
• OS: MacOS

Description:

I am using Spark (latest version) but when I compiled css and js by using npm run dev then I got an error:

Cannot find module '/PATH/node_modules/cross-env/bin/cross-env.js'
    at Function.Module._resolveFilename (module.js:470:15)
    at Function.Module._load (module.js:418:25)
    at Module.runMain (module.js:605:10)
    at run (bootstrap_node.js:422:7)
    at startup (bootstrap_node.js:143:9)
    at bootstrap_node.js:537:3

npm ERR! Linux 3.19.0-25-generic
npm ERR! argv "/usr/local/bin/node" "/usr/local/bin/npm" "run" "dev"
npm ERR! node v7.6.0
npm ERR! npm  v4.3.0
npm ERR! code ELIFECYCLE
npm ERR! errno 1
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 1
npm ERR! 
npm ERR! Failed at the @ dev script '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! 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!     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! 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!     /home/vagrant/.npm/_logs/2017-02-26T08_26_31_924Z-debug.log

I tried to update npm, node, laravel-mix and remove all modules in node_modules and re-install but I still got that error.

Hey, everyone. I just pushed the first beta release of Laravel Mix 4. This is the big one that catches us up to webpack 4, Babel 7, and vue-loader 15. This comes with a whole host of improvements.

For the next week or so, I'd like as many people as possible to try it out. We had to rewrite a lot of code as part of this update, and even though all our tests are passing, you never know...

You can install the beta release of Mix, like so:

npm install laravel-mix@beta

Upgrade Notes

• If upgrading from Mix 2.*, and your project includes Babel plugins that are not provided by Mix out of the box, you'll need to update them. Review the Mix 3.0 release notes for more information. Don't worry, it's a quick update.
• For optimization/minification, we've switched from uglify-js to terser. If your project was overriding any of our default uglify config, you'll need to update it to terser (very similar API).

Gotchas

As part of our webpack update, to require() a module or Vue SFC with the CommonJS approach, you'll now need to append .default, like so:

Before

Vue.component('example-component', require('./components/ExampleComponent.vue'));

After

Vue.component('example-component', require('./components/ExampleComponent.vue').default);

Alternatively, you can/should switch to ES modules.

import ExampleComponent from './components/ExampleComponent.vue';

Vue.component('example-component', ExampleComponent);

With this in mind, the default Laravel app resources/assets/js/app.js boilerplate code will need to be updated accordingly. One of us will take care of that once Mix 4.0 is out of beta.

Please share any issues you come across in this thread, and we'll address them as quickly as possible.

• Laravel Mix Version: 0.11.4
• Node Version: v6.10.0
• NPM Version: 3.10.10
• OS: Windows 7 Ultimate 64x

Description:

When I'm using the version() function, it doesn't matter if I'm running in production mode or not, the old versioned files are not been deleted (BTW this is not a Laravel project)

Steps To Reproduce:

Put this setting in the webpack.mix.js

• Laravel Mix Version: 1.4.2 (github:jeffreyway/laravel-mix#5aad0dfde5349e284e0876388a6f307547f7c002)
• Node Version (node -v): 8.2.1
• NPM Version (npm -v): 5.3.0
• OS: macOS Sierra 10.12.6

Description:

When using browserSync, css changes are injected however the page is also reloaded due to the fact that the JS bundle is re-emitted even when the only file that changed was a sass file.

Steps To Reproduce:

webpack.mix.js:

mix
	.js('resources/assets/js/main.js', 'public/assets/js/bundle.js')
	.extract(['jquery', 'babel-polyfill'])
	.autoload({
		jquery: ['$', 'jQuery', 'window.jQuery']
	})
	.sass('resources/assets/sass/style.scss', 'public/assets/css')
	.disableNotifications()
	.options({
			processCssUrls: false
	})
	.sourceMaps()
	.browserSync({
		proxy: process.env.APP_URL,
        files: [
            'app/**/*.php',
            'resources/views/**/*.php',
            'public/assets/js/**/*.js',
            'public/assets/css/**/*.css'
        ]
    })

Run npm run watch, site is served at localhost:3000, save a sass file and watch the browser refresh rather than just inject the changes.

Hi

Upgraded from 0.10 today to 1.2.2 due to some issues I was having on our live servers, and have realised it has created another issue, now with the versioning.

Let's say you have 2...n servers, that all individually update their code, and run npm run production, they are all set up so they share a session state so, for the most part, it doesn't matter which server they hit.

In the pre 1.0 versioning you might get a code update that for a short period of time creates an inconsistent state: The browser gets told by server 1 /css/app.5ee7141a759a5fb7377a.css is current, due to true Load Balancing it might try getting it from server 2 which hasn't quite finished npm run production yet. It gets a 404, no big deal, the browser requests that file next time and either manages to get it from a different server, or the other one had finished processing it.

Post 1.0, this creates a larger issue: The browser gets told by server 1 /css/app..css?id=5ee7141a759a5fb7377a is current, if server 2 hasn't finished compiling yet, it might serve that client the old CSS code, the browser will cache this old code for days/weeks/months.

If we throw a CDN in the mix (something that I'm planning on doing), this creates an even larger issue, because it is possible in that small window, that it caches the old code (even though cachebusting on the new ID), and will serve that to many browsers. CDN even means that any Load Balancer stickiness (for browsers) is completely off the table as well.

It would be great to have the old versioning back (even as an option),
I realise the query string keeps things a bit tidier, but it does mean in multi-server setups there's no guarantee that the file version being served is actually the right version - having the file existing/not existing is really the only guarantee here.

Thanks

Ben

• Laravel Mix Version: [email protected] (npm list --depth=0)
• Node Version (node -v): v10.10.0
• NPM Version (npm -v): 6.5.0
• OS:

Description:

css files are empty (0 bytes), with no error, whenever a js file has been processed before.

mix
  .js('resources/front/visitors/visitors.js', 'public/js')
  .sass('resources/front/visitors/sass/visitors.scss', 'public/css')
  .extract([....])

leads to a 0 bytes css file whenever

mix
  .js('resources/front/visitors/visitors.js', 'public/js')
  .sass('resources/front/visitors/sass/visitors.scss', 'public/css')

creates the wanted css.

Steps To Reproduce:

Running npm run dev or npm run prod. Specifying the array of libs you want to extract (.extract([...])) or letting Mix do the guessing job (.extract()) does not change the problem.

Output in the first case:

 DONE  Compiled successfully in 11268ms
                     Asset      Size                                         Chunks             Chunk Names
/css/semantic-visitors.css   0 bytes                     /js/manifest, /js/visitors  [emitted]  /js/manifest, /js/visitors
         /css/visitors.css   0 bytes                     /js/manifest, /js/visitors  [emitted]  /js/manifest, /js/visitors
           /js/manifest.js  9.08 KiB                                   /js/manifest  [emitted]  /js/manifest
             /js/vendor.js  2.14 MiB                                     /js/vendor  [emitted]  /js/vendor
           /js/visitors.js  1.28 MiB                                   /js/visitors  [emitted]  /js/visitors

and in the second case:

 DONE  Compiled successfully in 11111ms
                     Asset        Size                                         Chunks             Chunk Names
/css/semantic-visitors.css     653 KiB                                   /js/visitors  [emitted]  /js/visitors
         /css/visitors.css    14.5 KiB                                   /js/visitors  [emitted]  /js/visitors
           /js/visitors.js    2.93 MiB                                   /js/visitors  [emitted]  /js/visitors

• Laravel Mix Version: +-- [email protected]
• Node Version: v8.1.3
• NPM Version: 5.2.0
• OS: Windows 10

npm list --depth=0 does give me an error though (even when manually installing webpack):

`-- [email protected]

npm ERR! peer dep missing: webpack@^2.2.0, required by [email protected]

Complete list:

+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
`-- [email protected]

npm ERR! peer dep missing: webpack@^2.2.0, required by [email protected]

Description:

Since updating laravel-mix and npm I receive the following error:

These dependencies were not found:

* C:\Projects\project-name\resources\assets\js\cms\cms.js in multi ./resources/assets/js/cms/cms.js ./resources/assets/sass/cms/cms.scss ./resources/assets/sass/website/style.scss
* C:\Projects\project-name\resources\assets\js\website\website.js in multi ./resources/assets/js/website/website.js
* C:\Projects\project-name\resources\assets\sass\cms\cms.scss in multi ./resources/assets/js/cms/cms.js ./resources/assets/sass/cms/cms.scss ./resources/assets/sass/website/style.scss
* C:\Projects\project-name\resources\assets\sass\website\style.scss in multi ./resources/assets/js/cms/cms.js ./resources/assets/sass/cms/cms.scss ./resources/assets/sass/website/style.scss

To install them, you can run: npm install --save C:\Projects\project-name\resources\assets\js\cms\cms.js C:\Projects\project-name\resources\assets\js\website\website.js C:\Projects\project-name\resources\assets\sass\cms\cms.scss C:\Projects\project-name\resources\assets\sass\website\style.scss

So I tried reverting the update back but the error does not go away. When I empty to files to // the error still occurs. Only when removing the mix entries the error goes away.

My webpack.mix.js file:

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

mix.disableNotifications();

mix.options({
    processCssUrls: false
});

mix.js('resources/assets/js/cms/cms.js', 'public/build/js/cms.js')
    .js('resources/assets/js/website/website.js', 'public/build/js/website.js')
    .sass('resources/assets/sass/cms/cms.scss', 'public/build/css/cms.css')
    .sass('resources/assets/sass/website/style.scss', 'public/build/css/website.css');

if (mix.inProduction()) {
    mix.version();
}

The following scripts gives me that error:

npm run dev

npm run prod

npm run watch

My package.json:

{
	"private": true,
	"scripts": {
		"dev": "npm run development",
		"development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
		"watch": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
		"watch-poll": "npm run watch -- --watch-poll",
		"hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
		"prod": "npm run production",
		"production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
	},
	"devDependencies": {
		"cross-env": "^5.0.1",
		"laravel-mix": "^1.1.1",
		"webpack": "2.2.0"
	},
	"dependencies": {
		"axios": "^0.15.2",
		"bootstrap-sass": "^3.3.7",
		"cropperjs": "^1.0.0-beta.2",
		"flatpickr": "^2.3.7",
		"jquery": "^3.1.0",
		"jquery-mousewheel": "^3.1.13",
		"lodash": "^4.16.2",
		"malihu-custom-scrollbar-plugin": "^3.1.5",
		"nouislider": "^9.2.0",
		"owl.carousel": "^2.2.0",
		"tinymce": "^4.6.4",
		"vue": "^2.0.1"
	},
	"eslintConfig": {
		"extends": "eslint:recommended",
		"parserOptions": {
			"ecmaVersion": 6,
			"sourceType": "module"
		},
		"env": {
			"browser": true,
			"node": true
		},
		"globals": {
			"_": true,
			"axios": true
		}
	}
}

Hey, everyone. I could use some help from Windows users. If you have the time, would you mind doing:

laravel new example
npm install
npm run dev

Did you get an error related to "node_modules not being an external command", or anything along those lines? If so, can you try running a variant of this command?

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

This ends up being more complicated, because Yarn has this weird thing where it doesn't symlink bin installs to node_modules/.bin. So, if you install Mix with NPM, no problem. But if you do it through Yarn, the NPM script can't find webpack or webpack-dev-server.

So we updated the NPM script to specify the full path to these executable, but now some Windows users are having issues, and I'm not quite sure what the root of it is.

Any help would be appreciated! :)

• Laravel Mix Version: 6.0.37
• Node Version: v15.14.0
• NPM Version: 7.7.6
• OS: Mac OS Big Sur 11.6

Description:

I setup HMR on my laravel/vue app per the instructions from the mix docs here: https://laravel-mix.com/docs/6.0/hot-module-replacement

Everything works perfectly when editing .vue files (The change is applied without the entire page reloading).

However, when I edit any .js files (including but not limited to vuex store files), the entire page is reloaded. This is not ideal - I would like it to work the same as when editing .vue files.

Any ideas on how to debug this issue? Any clues about what would make the entire page reload as opposed to just the chunks that were edited? Any tips on documentation or articles somewhere that would point me in the right direction?

Any help would be appreciated. Thanks!

Prototype Pollution in JSON5 via Parse Method - https://github.com/advisories/GHSA-9c47-m6qq-7p4h

It looks like an update to [email protected] should fix the issue, but I'm not familiar enough with the mix library to know what the breaking changes might affect.

• Laravel Mix Version: 4.1.4
• Node Version (node -v): 16.7.1
• NPM Version (npm -v): 8.15.0
• OS: Linux

Description:

So all I'm trying to do is get Babel to output something more modern than ES5. I added this:

mix.babelConfig({
    presets: [
        [
            "@babel/preset-env",
            {
                targets: [
                    "last 2 Chrome versions",
                    "last 2 Firefox versions",
                ],
            },
        ],
    ],
})

And now the build breaks! I can "fix it" by adding forceAllTransforms: true, which is for some reason Laravel Mix's default Babel config. However, I don't want ES5 output. I only need to support the most recent browsers. As a bonus, this saves a lot of building time.

Steps To Reproduce:

Add the above configuration, have some modern syntax like foo ?? bar in a JS file: build breaks with the following:

ERROR in ./resources/js/bla.js 12:34
Module parse failed: Unexpected token (12:34)
File was processed with these loaders:
 * ./node_modules/babel-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.

Bumps express from 4.17.1 to 4.18.2.

Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

Bumps decode-uri-component from 0.2.0 to 0.2.2.

Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

• Laravel Mix Version: 6.0.49
• Node Version: 16.17.1
• NPM Version: 8.19.2
• OS: Ventura 13.0.1

Description:

var mix = require("laravel-mix");
const webpack = require("webpack")

mix.webpackConfig({
    plugins:
        [
            new webpack.optimize.LimitChunkCountPlugin({
                maxChunks: 1,
            }),
        ]

});

mix.css("build/css/a.css", "build/dist/a-compiled.css");
mix.postCss("build/css/b.css", "build/dist/b-compiled.css");
mix.sass("build/css/c.scss", "build/dist/c-compiled.css");

// returns one "mix.css"

Steps To Reproduce:

Just run the above webpack.mix.js

Same issue happens when either of these three is called.

Thanks for laravel-mix! Im using it for years, and this is the first time i run into a bug i just cant fix.