I have started to use Laravel 8 and I have just noticed a error coming from Webpack:
Uncaught Error: Module parse failed: Unexpected token (1:0)
I have read from various posts that this is caused by by webpack and vue. I am not using Vue directly, but I am using Laravel auth UI, which I can assume uses Vue. Fixes for the error from what I have researched suggest adding .vue() to the app.js reference in webpack.mix.js. I have tested this fix:
mix.js('resources/js/app.js', 'public/js').vue()
.sass('resources/sass/app.scss', 'public/css')
.sourceMaps();
The error persists, despite an update to node to current stable version.
The Laravel app is pretty basic, I am not compiling anything and purely coding locally on MAMP. The webpack documentation around the error is not particularly helpful in this instance. Any direction would be very helpful.
Within a few minutes of posting the question I solved the issue. The webpack.mix.js file update was working, but I had failed to run 'npm run dev' after this update. Anyone facing the same error should ensure they add .vue() to the webpack file and then run 'npm run dev'
Related
I bought a vue template. I want to install it over laravel but I getting a lot of 'Module not found: Error: Can't resolve '#/path';' errors.
I have tried to add a resolve alias to webpack but with no luck.
Any ideeas how should I proceed?
Maybe you fail to put it at the end .vue() in webpack.mix.js file
mix.js('resources/js/app.js', 'public/js').vue()
Missing Mix Manifest File
The Mix manifest does not exist. (View: /home/****/public_html/resources/views/layouts/guest.blade.php)
Did you forget to run npm install && npm run dev?
I want to install Vue 3 into a Laravel 8 project, but I don't want to use something like laravel/ui because it adds Bootstrap and a bunch of other stuff I don't want.
I tried npm i vue#next, and it installs Vue 3, but when I try to do import { createApp } from 'vue'; in app.js, etc., I get a bunch of Webpack errors on npm run dev with Laravel Mix ("laravel-mix": "^6.0.6", in package.json).
This is the webpack.mix.js file I'm using:
const mix = require('laravel-mix');
mix
.extract(['vue'])
.js('resources/js/app.js', 'public/js/')
.vue()
.version();
And I get this error when I run npm run dev:
[webpack-cli] Error: Cannot find module 'webpack/lib/rules/DescriptionDataMatcherRulePlugin'
(Stack trace here.)
Does anyone know how to simply install Vue 3 (without a bunch of additional scaffolding) in Laravel 8? Thank you.
After searching more, I found another SO post with essentially the same question and an answer that worked.
Instead of just doing npm i vue#next, I had to do the following instead:
npm i -D laravel-mix#next vue#next #vue/compiler-sfc vue-loader#next
After that, everything worked as expected.
Here's the SO post I referenced: Install vue 3.0 in laravel
Every day, I come to my office, launch my IDE (Code - OSS) and run npm run watch. Every day it works like a charm. But not today. Oddly enough, today running npm run watch fires this error:
ERROR in multi vue
Module not found: Error: Can't resolve 'vue' in
'/home/TopSecretUser/Code/Local/TopSecretProject/11.11.2020/dev'
# multi vue /js/vendor[0]
ERROR in ./resources/js/app.js
Module not found: Error: Can't resolve 'vue' in
'/home/me/Code/Local/TopSecretProject/11.11.2020/dev/resources/js'
# ./resources/js/app.js 3:13-16 4:0-22 6:0-3 85:14-17
# multi ./resources/js/app.js ./resources/css/app.css
My app.js starts with the following lines:
require("./bootstrap");
import Vue from "vue";
import Vuex from "vuex";
Vue.use(Vuex);
...
I haven't made any changes from yesterday to today, so I am totally confused. I tried some fixings but nothing worked. Does anyone have any suggestion how i can fix this? I am using vue#2.6.11.
You could delete the node_modules which could be affected by an external action like deletion/moving or you mis-installed a module, then rerun :
npm install
this will fetch the dependencies in package.json and install them, you should always install a module by adding --save or --save-dev flag with npm i like npm i some-module --save
guys I had this issue, after a while I found the solution , just import component as this:
Vue.component('Date',required('components/Date.vue'));
it's my pleasure to follow me on instagram: https://www.instagram.com/mahdiabedi220/
I'm starting to study VUEJS with Hot Module Replacement (or HMR), and I did a clean install of Laravel v5.8, and following the instructions in the documentation of the Laravel Mix -- https://laravel.com/docs/5.8/mix -- everything looks very simple, however, when running the npm run hot, error is displayed in the browser console.
Apparently it is functional, but I'm not sure if this is expected behavior or if in fact it is an error and that needs some adjustment or parameterization.
But the interesting thing is that if I run npm run dev, no error is displayed.
versions
# php artisan --version
Laravel Framework 5.8.37
# npm -v
6.13.4
# node -v
v12.16.1
# yarn -v
1.21.1
webpack.mix.js
const mix = require('laravel-mix');
mix.options({
hmrOptions: {
host: 'vueapp.lab',
port: '8080'
}
});
mix.js('resources/js/app.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css');
The reason for that is the app.scss is compiled by default by webpack and it is linked as a resource in mix.config.js.
So removing app.scss compilation from your mix.config.js and import it to your main .vue file (default is App.vue) hmr will do the trick.
In your main vue file add tag style like this:
<style lang="scss">
#import 'path/to/app.scss';
</style>