I try to use npm run development but i become the follow error.
Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
- configuration.entry should be one of these:
object { : non-empty string | [non-empty string] } | non-empty string | [non-empty string] | function
-> The entry point(s) of the compilation.
Details:
* configuration.entry['/js/app'] should be a string.
-> The string is resolved to a module which is loaded upon startup.
* configuration.entry['/js/app'] should not contain the item '.../resources/assets/sass/app.scss' twice.
* configuration.entry should be a string.
-> An entry point without name. The string is resolved to a module which is loaded upon startup.
* configuration.entry should be an array:
[non-empty string]
* configuration.entry should be an instance of function
-> A Function returning an entry object, an entry string, an entry array or a promise to these things.
My webpack.mix.js
let 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.scripts([
'public/assets/js/jquery-3.3.1.min.js',
'public/assets/js/popper.min.js',
'public/assets/js/bootstrap.min.js',
'public/assets/js/moment.min.js',
'public/assets/js/sweetalert.min.js',
'public/assets/js/delete.handler.js',
'public/assets/plugins/js-cookie/js.cookie.js',
'public/vendor/jsvalidation/js/jsvalidation.js',
'public/assets/plugins/bootstrap-datepicker/bootstrap-datepicker.min.js',
'public/assets/plugins/croppie/croppie.js'
], 'public/assets/js/vendor.js');
mix.styles([
'public/assets/css/fontawesome-all.min.css',
'public/assets/plugins/bootstrap-datepicker/bootstrap-datepicker.min.css',
'public/assets/plugins/croppie/croppie.css',
], 'public/assets/css/vendor.css');
mix.sass('resources/assets/sass/app.scss', 'public/assets/css');
mix.copy('node_modules/toastr/build/toastr.min.js', 'public/vendor/toastr/toastr.min.js');
mix.js('resources/assets/js/app.js', 'public/js')
.sass('resources/assets/sass/app.scss', 'public/css');
if (mix.inProduction()) {
mix.version();
}
Instead of copying all of your packages (jQuery, Popper, Bootstrap, Moment), why don't you compile the majority of your assets?
npm i jquery
npm i bootstrap
npm i #fortawesome/fontawesome-free
npm i moment, etc.
Then in your /resources/js/bootstrap.js you can include those packages.
try {
window.Popper = require('popper.js').default;
window.$ = window.jQuery = require('jquery');
Then run.
npm run prod
Related
I built a single page application (SPA) using Laravel 8 + Vue.js + InertiaJs. Everything is working fine in the development environment, but when I compile assets for production, it shows me a blank page, and there is no error in the console. All assets are loading correctly with a 200 code, and everything seems to be OK, but the Vue app is not mounting!
webpack.mix.js
const mix = require('laravel-mix');
require('laravel-mix-workbox');
mix.webpackConfig({
output: {
filename: '[name].js',
chunkFilename: 'js/[name].js',
}
}).js('resources/js/app.js', 'public/js')
.extract(['vue'])
.version();
Image1
Image2
Image3
try using the inertiajs webpack.mix.js provided by the pingCRM github:
const path = require('path')
const mix = require('laravel-mix')
const cssImport = require('postcss-import')
const cssNesting = require('postcss-nesting')
/*
|--------------------------------------------------------------------------
| 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')
.vue()
.postCss('resources/css/app.css', 'public/css', [
// prettier-ignore
cssImport(),
cssNesting(),
require('tailwindcss'),
])
.webpackConfig({
output: { chunkFilename: 'js/[name].js?id=[chunkhash]' },
resolve: {
alias: {
vue$: 'vue/dist/vue.runtime.esm.js',
'#': path.resolve('resources/js'),
},
},
})
.version()
.sourceMaps()
note you may have to follow the instructions for setting up tailwindcss which can be found here, only do this if you plan to use it otherwise remove the require('tailwindcss'), from the webpack file
you also may need to npm install --save-dev postcss-import and npm install --save-dev postcss-nesting the --save-dev flag will add it to your package.json file for future reference
I'm trying to build a PWA with offline support using Laravel and Vue.js. I'm using the laravel-mix-workbox plugin to setup my service worker, but I'm having a massive amount of trouble trying to accomplish what should be a simple task. I have some static assets (images, XML files etc.) that are served out of my application, and I can't get workbox to add them to the precached file list.
I have tried moving the assets to /resources/img and adding a call to copyDirectory to try to get them included, also, I have tried the webpack-copy-plugin, but only the compiled assets are included(js, css, fonts etc). Here is my webpack.mix.js file:
const mix = require('laravel-mix');
//mp035 add workbox plugin and copy-webpack-plugin
require('laravel-mix-workbox');
const CopyPlugin = require('copy-webpack-plugin');
/*
|--------------------------------------------------------------------------
| 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.
|
*/
//mp035 fix issue with laravel-mix outputting bad urls in precache manifest for app.js (//js/app.js) and app.css
// and copy assets into place (so they are in the build tree)
mix.webpackConfig({
output: {
publicPath: ''
},
plugins: [
new CopyPlugin([
{ from: 'resources/img/*', to: 'public/img', flatten:true },
{ from: 'resources/root/*', to: 'public', flatten:true },
]),
],
})
.js('resources/js/app.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css')
.sourceMaps().version()
// mp035 add inject manifest plugin to inject workbox manifest into the service worker.
.injectManifest({
swSrc: './resources/pwa/service-worker.js',
maximumFileSizeToCacheInBytes: 20000000, // ******************************DEBUG ONLY!!!
});
Does anyone know how I can include all files in my /resources/img (or /public/img) in the precached files list?
Ok, so it looks like this is an issue with laravel-mix-workbox. Removing it and using the generic workbox webpack plugin solves the problem. For anyone finding this, here is the updated webpack.mix.js:
const mix = require('laravel-mix');
//mp035 add workbox plugin and copy-webpack-plugin
const CopyPlugin = require('copy-webpack-plugin');
const {InjectManifest} = require('workbox-webpack-plugin');
/*
|--------------------------------------------------------------------------
| 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.
|
*/
//mp035 fix issue with laravel-mix outputting bad urls in precache manifest for app.js (//js/app.js) and app.css
// and copy assets into place (so they are in the build tree)
mix.webpackConfig({
output: {
publicPath: ''
},
plugins: [
new CopyPlugin([
{ from: 'resources/img/*', to: 'public/img', flatten:true },
{ from: 'resources/root/*', to: 'public', flatten:true },
]),
new InjectManifest({
swSrc: './resources/pwa/service-worker.js',
maximumFileSizeToCacheInBytes: 20000000, // ******************************DEBUG ONLY!!!
}),
],
})
.js('resources/js/app.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css')
.sourceMaps().version();
All in all, using workbox with laravel-mix has been an extremely painful process with all of the 'minor' tweaks that laravel-mix does breaking the workbox plugin. I'd recommend sticking to plain webpack if possible.
Am building a web application with Vue and Laravel.
Am utilizing code splitting and versioning with Laravel mix and Webpack under the hood.
However, whenever i make changes to my code, run npm run production and upload on the live server, on frequent occations i receive TypeError: "e[r] is undefined"
I have to manually clear browser cache before the page loads correctly.
I already have versioning enabled and thus cache busting should be automated.
Below is my webpack.mix.js file
const mix = require('laravel-mix');
const webpack = require('webpack');
mix.webpackConfig({
plugins: [
new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/)
]
})
const CompressionPlugin = require('compression-webpack-plugin');
module.exports = {
plugins: [new CompressionPlugin()],
optimization: {
minimize: true,
namedModules: true,
namedChunks: true,
removeAvailableModules: true,
flagIncludedChunks: true,
occurrenceOrder: false,
usedExports: true,
concatenateModules: true,
sideEffects: false, // <----- in prod defaults to true if left blank
}
};
/*
|--------------------------------------------------------------------------
| 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/main/main.js', 'public/v1.4.0/js')
.sass('resources/sass/app.scss', 'public/css')
.extract(['vue'])
.version();
I had a similar problem and I found a solution that wasn't quite good but it worked: set in webpack config options optimization.concatenateModules and optimization.minimize to false.
After a lot of hustle,
my best approach was to control cache from the server software itself.
Ex: you can prevent JS and CSS caching from nginx / apache/http configurations
I have installed https://github.com/puikinsh/gentelella on my application, is there a way to link the assets to laravel elixir?
here is my template directory
Root
|-app/
|-node_module/
| |-gentelella/ # -> this is my template
|-gulpfile.js
|-public/
// other laravel folders to follow.
Inside ./gulpfile.js
var elixir = require('laravel-elixir');
/*
|--------------------------------------------------------------------------
| Elixir Asset Management
|--------------------------------------------------------------------------
|
| Elixir provides a clean, fluent API for defining some basic Gulp tasks
| for your Laravel application. By default, we are compiling the Sass
| file for our application, as well as publishing vendor resources.
|
*/
elixir(function(mix) {
mix.sass('app.scss');
});
Try this:
elixir(function(mix) {
mix.sass('app.scss');
mix.styles([
'node_modules/path/to/gentelella/css.css'
], 'public/css/app.css', './');
mix.version('public/css/app.css');
});
I'm having the following gulpfile.js:
var elixir = require('laravel-elixir');
/*
|--------------------------------------------------------------------------
| Elixir Asset Management
|--------------------------------------------------------------------------
|
| Elixir provides a clean, fluent API for defining some basic Gulp tasks
| for your Laravel application. By default, we are compiling the Less
| file for our application, as well as publishing vendor resources.
|
*/
var paths = {
'jquery': './vendor/bower_components/jquery/',
'bootstrap': './vendor/bower_components/bootstrap-sass-official/assets/',
'js': './resources/js/'
}
elixir(function (mix) {
mix.sass('app.scss', 'public/css/')
.copy(paths.bootstrap + 'fonts/bootstrap/**', 'public/fonts')
.scripts(
[
paths.jquery + "dist/jquery.js",
paths.bootstrap + "javascripts/bootstrap.js",
paths.js + "app.js"
],
'public/js/app.js', './')
.version(['js/app.js', 'css/app.css']);
mix.copy('public/js/app.js.map', 'public/build/js/app.js.map');
mix.copy('public/css/app.css.map', 'public/build/css/app.css.map');
});
However, the .map-files are not copied to the public/build/ folder. Am I doing something wrong with mix.copy()? How can I see why the files are not copied?
I actually think this is a bug in Laravel Elixir as well, since mix.version() should already copy the .map files already without the need for manual copying.
UPDATE
I filed a issue on Github: github.com/laravel/framework/issues/7650
As #Thomas said, it's fixed now: https://github.com/laravel/elixir/commit/77464c615b0fd2640eedd2954cd9c8cb3dfc6f44
Commit message:
When versioning files, copy over .map files as well.