単一ファイルコンポーネントを処理できません。
OS:windows10
Laravel Framework 8.18.1
node -v:v14.15.3
webpack-cli@4.2.0
laraver-mix@6.0.0
npm run dev すると必ずと言っていいほどエラーがでしまい困っています。ブラウザを立ち上げて確認するもコンソールがでていて困っている次第です、、
webpackも最新のものをインストールしたのでネットで調べても中々解決できませんでした。自分の実力不足が大いにありますが、
npmrundev
C:\workspace\neomediaproject>npm run dev
> packege.json@1.0.0 dev C:\workspace\neomediaproject
> webpack --mode development
[webpack-cli] Compilation finished
asset main.js 644 bytes [compared for emit] (name: main)
ERROR in main
Module not found: Error: Can't resolve './src' in 'C:\workspace\neomediaproject'
webpack 5.11.0 compiled with 1 error in 78 ms
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! packege.json@1.0.0 dev: `webpack --mode development`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the packege.json@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! C:\Users\m_i\AppData\Roaming\npm-cache\_logs\2020-12-21T06_06_22_146Z-debug.log
php artisan serve実行時のwebページに接続した際のエラー文
バージョンが変わってからwebpack.config.js→webpack.mix.jsになったぽいのでファイルを載せておきます。
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 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');
resources/js/app.js
/**
* 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',
});
自分でも整理するためにapp.jsやwebpack.mix.jsファイルを張りましたなにかわかることがあればお知恵を拝借したいです。
0 likes
