According to the docs, in order to maintain the directory's structure I should use copyDirectory but I obtain the following:
/webpack.mix.js:16
.copyDirectory('resources/assets/bower', 'public/js');
^
TypeError: mix.js(...).sass(...).copyDirectory is not a function
This is my webpack file:
const { mix } = require('laravel-mix');
mix.js('resources/assets/js/app.js', 'public/js')
.sass('resources/assets/sass/app.scss', 'public/css')
.copyDirectory('resources/assets/bower', 'public/js');
Any ideas? Thanks
Nevermid, the docs aren't correct: you should pass false to the copy funcion, as follows:
mix.copy('resources/assets/bower', 'public/js', false);
This way it won't flatten the source directory
I have got the same error message.
TypeError: mix.copyDirectory is not a function
Actually, it's because you were using an old version of Laravel mix that does not support the mix.copyDirectory.
All you have to do is:
npm install laravel-mix#^1.0 --save-dev
npm run dev
Related
I use Vue with Laravel. But I get this error "mix.js() is missing required parameter" when I run
npm run watch.
Here is my code:
const mix = require("laravel-mix");
mix.js("resources/js/app.js", "public/js").vue();
mix.sass("public/assets/scss/style.scss", "public/assets/css");
mix.browserSync("127.0.0.1:8000");
Please share with me how to handle this error.
Change in version works well with laravel 7.3.* see link below
The solution was to change to version ^6.0.6 in package.json and run npm install, as the .vue() call is a new feature in Laravel Mix 6.
"devDependencies": {
// ...
"laravel-mix": "^6.0.6",
// ...
},
Then on webpack.mix.js.
mix.js('resources/js/app.js', 'public/js').vue();
https://nono.ma/assertionerror-mix-js-is-missing-required-parameter-1-entry
I have a web SPA where I need to refresh the cache with the version() in the mix but I do not know why it does not always work.
My webpack mix is this:
const mix = require('laravel-mix');
mix.js('resources/js/app.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css')
.sass('resources/sass/sb-admin-2.scss', 'public/css');
mix.version();
I run npm run prod to create a new version when I see the manifest in public it always says same thing:
"/js/app.js": "/js/app.js?id=483eeaadc3aea67d8738",
"/css/app.css": "/css/app.css?id=92edc7a3cf0ac26de570",
"/css/sb-admin-2.css": "/css/sb-admin-2.css?id=495b8048a2d714a67e56"
the id does not change, I though that it could be because I did not do any change in the website so I made many changes and I ran again npm run prod and it does not change at all it keeps old version, and that's the problem the browser does not refresh so I wonder what could the problem be?
I am using laravel 6 and Vuejs 2.
Given the webpack.mix.js of a fresh Laravel project :
const mix = require('laravel-mix');
/*
|--------------------------------------------------------------------------
| Mix Asset Management
|--------------------------------------------------------------------------
|
| Mix provides a clean, fluent API for defining some Webpack build steps
| for your Laravel application. By default, we are compiling the Sass
| file for the application as well as bundling up all the JS files.
|
*/
mix.js('resources/js/app.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css');
What is the equivalent using just webpack and a webpack.config.js? (Im looking to remove laravel mix as a dependency on an existing project.)
I did find this default file in the source but it did not help me. Is there a way I can see the "compiled/resulting" webpack configuration or a template/starting point that corresponds to laravel mix default settings?
You can, but the result is not very satisfactory.
Create a JS script with this:
console.log (JSON.stringify(
require('./node_modules/laravel-mix/setup/webpack.config.js'), null, 4)
);
and save it in the root folder of your laravel project. Run it with Node and the output will be the configuration object Laravel Mix receives and inputs to webpack.
However, this file is very long and covers a vast amount of settings, which you wouldn't need if you made your file from scratch. Yes, you could try and remove every extra setting you think you can remove without breaking your output, but in the end it's better to learn how Webpack works so you can write better, mode adjusted configs. At least you can use it to understand how it does certain things.
Just put into webpack.mix.js
Mix.listen('configReady', function (config) {
RegExp.prototype.toJSON = RegExp.prototype.toString;
console.log(JSON.stringify(config));
});
So you will get webpack config from your laravel.mix.
With recent laravel-mix you just need to invoke mix.dump() (in the webpack.mix.js script).
The file you referenced seems to point exactly to the default configuration. Why did this not help?
In order to migrate you could
Learn the basics
Extract the dependencies from Laravel mix aÇıd add them to your package.json
Hint: The dependencies there are your devDependencies
Start by installing npm install --save-dev everything "webpack", "babel" and prefixed with "-loader".
If you need Sass and extracted css - npm install --save-dev node-sass sass-loader mini-css-extract-plugin.
Minimal example of a webpack config for your mix example from above would be
const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = {
entry: './resources/js/app.js',
output: {
filename: 'js/[name].js',
path: path.join(__dirname, 'public')
},
plugins: [
new MiniCssExtractPlugin({
filename: 'css/[name].css'
})
],
module: {
rules: [
{
test: /\.(sa|sc|c)ss$/,
use: [
{
loader: MiniCssExtractPlugin.loader,
},
'css-loader',
'sass-loader'
]
}
]
}
};
Learn the more advanced basics for your use case
I have been able to get this to work on just a basic vue application but I am having trouble bringing it across to laravel vue. I was able to add module in vue.config.js in the vue application that would import any scss files i added. Using the same code in the laravel vue app in the webpack.mix.js file it is not compiling correctly. This is my webpack.mis.js file:
let mix = require('laravel-mix');
module.exports = {
css: {
loaderOptions: {
sass: {
data: `#import "./resources/assets/sass/variables.scss";`
}
}
}
};
mix.js('resources/assets/js/app.js', 'public/js')
.sass('resources/assets/sass/app.scss', 'public/css');
I have also attempted the other configurations suggested from the docs but I haven't succeeded. I have also seen a lot of answers suggesting to just include the relative path to the files I wish to include in every component but this is inefficient and error prone as the application develops. There must be a way to achieve this and I have just got the configuration incorrect.
Any advice is appreciated, thanks.
Laravel Mix has an option exactly for this. It's globalVueStyles.
Check out the documentation: https://github.com/JeffreyWay/laravel-mix/blob/master/docs/options.md.
It will only work with extractVueStyles active:
mix.js('resources/js/app.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css')
.options({
extractVueStyles: true,
globalVueStyles: 'resources/sass/_variables.scss',
})
.version();
I am using Laravel Mix but it is not creating one of the files specified. My webpack.mix.js looks like this:
mix.js('resources/assets/js/app.js', 'public/js')
.sass('resources/assets/sass/app.scss', 'public/css')
.sass('resources/assets/sass/mail.scss', 'resources/views/vendor/mail/html/themes/default.css');
It does compile successfully, but the default.css file is not created. The app.js and app.css is working as it should. However, the themes folder is empty.
It turns out Laravel Mix uses the public folder as default. Meaning, my file was created (as were the directories) in the public folder. To "bypass" this, I added ../ to the path, like this:
mix.sass('resources/assets/sass/mail.scss', '../resources/views/vendor/mail/html/themes/default.css');
First you should add the error messages in your question but I think its due to this:
You do not need to specify a path with a filename just use the path like this:
mix.js('resources/assets/js/app.js', 'public/js')
.sass('resources/assets/sass/app.scss', 'public/css')
.sass('resources/assets/sass/mail.scss', 'resources/views/vendor/mail/html/themes');