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 am currently building a web application using Laravel and Vue. The error that I am getting is for all the components that I have.
ERROR in ./resources/assets/js/components/App 1:0
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
> <template>
| <div id="layout-wrapper">
| <app-topbar></app-topbar>
# ./resources/assets/js/app.js 6:0-35 41:11-14
# multi ./resources/assets/js/app.js ./resources/assets/sass/style.scss
the App.vue file looks like this:
<template>
<div id="layout-wrapper">
<app-topbar></app-topbar>
<app-menu></app-menu>
<div class="main-content">
<div class="page-content">
<router-view></router-view>
<app-footer></app-footer>
</div>
</div>
</div>
</template>
<script>
import AppTopbar from './_partials/AppTopbar'
import AppMenu from './_partials/AppMenu'
import AppFooter from './_partials/AppFooter'
import Users from './users/Users'
import Dashboard from './dashboard/Dashboard'
export default {
components: {
'app-topbar': AppTopbar,
'app-menu': AppMenu,
'app-footer': AppFooter,
Users,
Dashboard,
},
beforeMount() {
axios.get('/metadata')
.then(response => {
window.Laravel = {
response: response,
current_year: response.current_year,
csrf: response.csrf,
asset(path){
return this.response.asset+'/'+path;
},
trans(text){
return this.response.trans[text];
},
route(name){
return this.response.base_url+'/'+this.response.routes[name];
}
};
});
},
}
</script>
From the error, I understand that the problem is that <template></template> tags are not being parsed. From what I found out I need the vue-loader and vue-template-compiler dependencies for them. I have already installed those, however, I still keep getting these errors.
I also found that trying the older version (current 15.x.x , older 14.x.x) of vue-loader could help, but it did not.
My versions are:
laravel 8.12.3
npm 6.14.4
package.json dependencies:
"devDependencies": {
"axios": "^0.19",
"cross-env": "^7.0",
"laravel-mix": "^5.0.1",
"lodash": "^4.17.19",
"resolve-url-loader": "^3.1.0",
"sass": "^1.29.0",
"sass-loader": "^8.0.2",
"vue-template-compiler": "^2.6.12"
},
"dependencies": {
"vue": "^2.6.12",
"vue-loader": "^14.2.4",
"vue-router": "^3.4.9"
}
Since I am not skilled in Vue, I understand that I did something wrong. However, I have not found solutions online. So, I would like to ask for your help.
Update:
Since Laravel has a pre-configured webpack.config file then probably, this is what I think I am able to show you.
webpack.mix.js :
const mix = require('laravel-mix');
/*
|--------------------------------------------------------------------------
| Mix Asset Management
|--------------------------------------------------------------------------
|
| Mix provides a clean, fluent API for defining some Webpack build steps
| for your Laravel applications. By default, we are compiling the CSS
| file for the application as well as bundling up all the JS files.
|
*/
mix.sass('resources/assets/sass/style.scss', 'public/assets')
.js('resources/assets/js/app.js', 'public/js')
.styles([
// Layout
'resources/assets/template/system/css/bootstrap.min.css',
'resources/assets/template/system/css/icons.min.css',
'resources/assets/template/system/css/app.min.css',
// Data Table
'resources/assets/template/system/css/dataTables.bootstrap4.min.css',
'resources/assets/template/system/css/responsive.bootstrap4.min.css',
// Custom
'public/assets/style.css'
], 'public/css/style.min.css')
.scripts([
// Layout
'resources/assets/template/system/js/jquery.min.js',
'resources/assets/template/system/js/bootstrap.bundle.min.js',
'resources/assets/template/system/js/metisMenu.min.js',
'resources/assets/template/system/js/simplebar.min.js',
'resources/assets/template/system/js/waves.min.js',
'resources/assets/template/system/js/jquery.sparkline.min.js',
'resources/assets/template/system/js/morris.min.js',
'resources/assets/template/system/js/raphael.min.js',
'resources/assets/template/system/js/app.js',
// Data Tables
'resources/assets/template/system/js/jquery.dataTables.min.js',
'resources/assets/template/system/js/dataTables.bootstrap4.min.js',
'resources/assets/template/system/js/dataTables.responsive.min.js',
'resources/assets/template/system/js/responsive.bootstrap4.min.js',
// Vue
//'resources/assets/template/system/js/vue.js',
// Custom
//'resources/assets/js/vue.js',
'public/js/app.js',
'resources/assets/js/script.js'
], 'public/js/script.min.js');
In Laravel 8 the compilation of assets works in a slightly different way. It will only add vue compilers as a dependency if you declare that you want to compile a vue file in webpack.mix.js.
See what happened to me after doing this: http://prntscr.com/whr7wv
Try changing
.js('resources/assets/js/app.js', 'public/js')
to
.js('resources/assets/js/app.js', 'public/js').vue()
and return to post if successful.
Note: consider not using laravel/ui and manually creating app.js
Application Laravel 8 + Vue 2.6 versions then please change the code in the
webpack.mix.js
mix.js('resources/js/app.js', 'public/js')
.postCss('resources/css/app.css', 'public/css', [
//
]);
To
mix.js('resources/js/app.js', 'public/js')
.postCss('resources/css/app.css', 'public/css', [
//
]).vue();
"you may need an appropriate loader to handle this file type" laravel and vue application error reason >> package.json - "laravel-mix": "^6.0.6" is version 6 or higher.
This is what worked for me (Laravel 8 + Vue 2.6). Change the code in the
webpack.mix.js
mix.js('resources/js/app.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css')
.sourceMaps();
to
mix.js('resources/js/app.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css')
.vue();
then run
npm update vue-loader
Actually you have not installed ui for vue files in laravel, that's why it does not recognize the template tag in vue file. So run few commands in new terminal:
composer require laravel/ui
php artisan ui vue
npm install && npm run dev
I'm following Laravel documentation and have this file structure:
In app.scss I have:
#import 'style12';
.real-demo{
}
and in style12.scss some css code which i try to import.
When I run npm run dev I get following error:
Module build failed: Error: "../../resources/assets/sass/style12.scss" is not in the SourceMap.
at BasicSourceMapConsumer.SourceMapConsumer_sourceContentFor [as sourceContentFor] (C:\Users\mixei\Desktop\Projects\westcredit\node_modules\source-map\lib\source-map-consumer.js:704:13)
at SourceMapGenerator.<anonymous> (C:\Users\mixei\Desktop\Projects\westcredit\node_modules\source-map\lib\source-map-generator.js:235:40)
at Array.forEach (<anonymous>)
at SourceMapGenerator_applySourceMap [as applySourceMap] (C:\Users\mixei\Desktop\Projects\westcredit\node_modules\source-map\lib\source-map-generator.js:234:32)
at MapGenerator.applyPrevMaps (C:\Users\mixei\Desktop\Projects\westcredit\node_modules\postcss\lib\map-generator.js:146:22)
at MapGenerator.generateMap (C:\Users\mixei\Desktop\Projects\westcredit\node_modules\postcss\lib\map-generator.js:194:46)
at MapGenerator.generate (C:\Users\mixei\Desktop\Projects\westcredit\node_modules\postcss\lib\map-generator.js:297:25)
at LazyResult.stringify (C:\Users\mixei\Desktop\Projects\westcredit\node_modules\postcss\lib\lazy-result.js:294:24)
at C:\Users\mixei\Desktop\Projects\westcredit\node_modules\postcss\lib\lazy-result.js:231:27
Also here is my webpack.mix.js:
const { mix } = require('laravel-mix');
mix.options({
processCssUrls: false
});
mix.js('resources/assets/js/app.js', 'public/js')
.sass('resources/assets/sass/app.scss', 'public/css');
Any help will be appreciated, thanks!
I am trying to load Bootstrap Vue into a Laravel 5.6 project
The official docs say to modify your webpack.config.js file like:
+ module: {
+ rules: [
+ {
+ test: /\.css$/,
+ use: [
+ 'style-loader',
+ 'css-loader'
+ ]
+ }
+ ]
+ }
Webpack docs: https://webpack.js.org/guides/asset-management/#loading-css
I don't have a webpack.config.js file so I tried loading the CSS in with Laravel mix
mix.js('resources/assets/js/app.js', 'public/js')
.sass('resources/assets/sass/app.scss', 'public/css')
.styles('node_modules/bootstrap-vue/dist/bootstrap-vue.css', 'public/css');
This give me an error
mix.combine() requires a full output file path as the second argument.
and I'm not convinced it's the right way to do it.
What is the proper way to add bootstrap-vue into a new Laravel 5.6 project?
Import the Bootstrap Vue styles in your app.scss file directly, instead of through mix:
// app.scss
#import "~bootstrap/dist/css/bootstrap.css";
#import "~bootstrap-vue/dist/bootstrap-vue.css";
// webpack.mix.js
mix.js('resources/assets/js/app.js', 'public/js')
.sass('resources/assets/sass/app.scss', 'public/css')
Laravel Mix already has the CSS loader configured so you don't need to set up a separate webpack.config.js file.
I'm using Laravel 5.6, Laravel Mix 2.0, and Bootstrap-Vue 2.0.0-rc.1.
Trying to find a way to configure Laravel Mix to include Bootstrap-Vue's CSS into my app.css file and prevent Bootstrap-Vue from including <style> tags into the page <head>.
I saw this note in the package docs but still not sure how to use this properly:
Note: requires webpack configuration to load css files (official guide)
Finally, found a solution - ExtractTextPlugin.
let mix = require('laravel-mix');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
mix.js('resources/assets/js/app.js', 'public/js')
.sass('resources/assets/sass/app.scss', 'public/css');
mix.webpackConfig({
module: {
rules: [
{
test: /\.css$/,
loader: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: 'css-loader'
})
}
]
}
});
Reference: https://github.com/JeffreyWay/laravel-mix/issues/1589
Install:
npm i bootstrap-vue
npm install --save-dev style-loader css-loader
Use:
edit resources/js/app.js to:
import Vue from 'vue'
import BootstrapVue from 'bootstrap-vue'
Vue.use(BootstrapVue)
edit resources/sass/app.scss to:
Import the styles:
import '~bootstrap/dist/css/bootstrap.css'
import '~bootstrap-vue/dist/bootstrap-vue.css'
Make sure the app.js and app.css are included in the blade(view) that is acting as the container for your vue.
See: https://bootstrap-vue.js.org/docs/