Merhaba, şimdi test için bir laravel 7 projesi php artisan ui vue --auth olarak oluşturdum, sonra bunu laravel 8 e upgrade ettim. Bir kaç gündür vue ile ilgili test yapıyorum, gel gelelim bootsrap-select gerekti ve ilgili paketi kurdum. Daha sonra baktım diyorki güvenlik zafiyetleri var npm audit fix komutunu kullanırsan ne kadar güvenlik zafiyeti varsa silip süpürür her şeyi hallederim diyor. Madem öyle tamam dedim ve komutu yazdım 🙂
Komutu yazınca bu defa npm run development hata vermeye başladı hatta forumda bu konuyla ilgili bir yazı var. https://laravel.gen.tr/d/3448-laravel-mix-webpack-js yanılmıyorsam bu, neyse bu saçma sorunuda ortadan kaldırdım. Sonra geldiğim noktada bu hata mesajını alıyorum;
/usr/local/bin/node /usr/local/lib/node_modules/npm/bin/npm-cli.js run dev --scripts-prepend-node-path=auto
> TESTPANEL@1.0.0 dev /Applications/XAMPP/xamppfiles/htdocs/W/TESTPANEL
> npm run development
> TESTPANEL@1.0.0 development /Applications/XAMPP/xamppfiles/htdocs/W/TESTPANEL
> cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --config=node_modules/laravel-mix/setup/webpack.config.js
ERROR in ./resources/js/secilitema/components/ExampleComponent.vue 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 class="container">
| <div class="row justify-content-center">
webpack compiled with 1 error
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! TESTPANEL@1.0.0 development: `cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --config=node_modules/laravel-mix/setup/webpack.config.js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the TESTPANEL@1.0.0 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! /Users/leon/.npm/_logs/2021-01-06T15_37_09_430Z-debug.log
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! TESTPANEL@1.0.0 dev: `npm run development`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the TESTPANEL@1.0.0 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! /Users/leon/.npm/_logs/2021-01-06T15_37_09_471Z-debug.log
Process finished with exit code 1
package.json dosyamda aşağıdaki gibi;
{
"private": true,
"scripts": {
"dev": "npm run development",
"development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --config=node_modules/laravel-mix/setup/webpack.config.js",
"watch": "npm run development --watch",
"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 --disable-host-check --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 --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
},
"devDependencies": {
"axios": "^0.21.1",
"bootstrap": "^4.5.3",
"cross-env": "^7.0.3",
"jquery": "^3.2",
"laravel-mix": "^6.0.6",
"lodash": "^4.17.20",
"popper.js": "^1.12",
"resolve-url-loader": "^3.1.2",
"sass": "^1.32.0",
"sass-loader": "^8.0.0",
"vue": "^2.6.12",
"vue-template-compiler": "^2.6.12"
},
"dependencies": {
"bootstrap-select": "^1.13.18"
},
"name": "TESTPANEL",
"description": "<p align=\"center\"><img src=\"https://res.cloudinary.com/dtfbvvkyp/image/upload/v1566331377/laravel-logolockup-cmyk-red.svg\" width=\"400\"></p>",
"version": "1.0.0",
"main": "webpack.mix.js",
"directories": {
"test": "tests"
},
"keywords": [],
"author": "",
"license": "ISC"
}
webpack.mix.js dosyam ise aşağıdaki gibi;
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/secilitema/app.js', 'public/themes/secilitema/vuejs')
.sass('resources/sass/secilitema/app.scss', 'public/themes/secilitema/vuecss');
bootstrap.js dosyam ise aşağıdaki gibi;
window._ = require('lodash');
/**
* We'll load jQuery and the Bootstrap jQuery plugin which provides support
* for JavaScript based Bootstrap features such as modals and tabs. This
* code may be modified to fit the specific needs of your application.
*/
try {
window.Popper = require('popper.js').default;
window.$ = window.jQuery = require('jquery');
require('bootstrap');
require('bootstrap-select');
} catch (e) {}
/**
* We'll load the axios HTTP library which allows us to easily issue requests
* to our Laravel back-end. This library automatically handles sending the
* CSRF token as a header based on the value of the "XSRF" token cookie.
*/
window.axios = require('axios');
window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
/**
* Echo exposes an expressive API for subscribing to channels and listening
* for events that are broadcast by Laravel. Echo and event broadcasting
* allows your team to easily build robust real-time web applications.
*/
// import Echo from 'laravel-echo';
// window.Pusher = require('pusher-js');
// window.Echo = new Echo({
// broadcaster: 'pusher',
// key: process.env.MIX_PUSHER_APP_KEY,
// cluster: process.env.MIX_PUSHER_APP_CLUSTER,
// forceTLS: true
// });
ve app.js dosyamda aşağıdaki gibi;
/**
* First we will load all of this project's JavaScript dependencies which
* includes Vue and other libraries. It is a great starting point when
* building robust, powerful web applications using Vue and Laravel.
*/
require('./bootstrap');
window.Vue = require('vue');
/**
* The following block of code may be used to automatically register your
* Vue components. It will recursively scan this directory for the Vue
* components and automatically register them with their "basename".
*
* Eg. ./components/ExampleComponent.vue -> <example-component></example-component>
*/
// const files = require.context('./', true, /\.vue$/i)
// files.keys().map(key => Vue.component(key.split('/').pop().split('.')[0], files(key).default))
Vue.component('example-component', require('./components/ExampleComponent.vue').default);
/**
* Next, we will create a fresh Vue application instance and attach it to
* the page. Then, you may begin adding components to this application
* or customize the JavaScript scaffolding to fit your unique needs.
*/
const app = new Vue({
el: '#app',
});
Özetle bu Vue Laravel 8 üzerinde çalışmıyor mu? Yada yapmam gereken farklı bir şey var mı?
node_modules klasörünü sildim, npm önbelleğini temizledim, tekrar kurulum yaptım. nodejs npm sürümünü son sürüm olarak güncelledim. Yani zorumu başarmaya çalışıyorum?