@mar-gitacount (mar mar)

Are you sure you want to delete the question?

Leaving a resolved question undeleted may help others!

単一ファイルコンポーネントを処理できません。

Q&A

Closed

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ページに接続した際のエラー文

スクリーンショット 2020-12-20 215922.png

バージョンが変わってから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

1Answer

前回の質問を拝見した限りでは Vue の設定にまで手が回らない状態だと思いますので、 Vue は後回しにしたらどうでしょうか。

resources/js/app.js の中身を消して空にすればエラーが出ない状態になるはずです。中身は今後 Vue を書くための雛形なので今はなくても大丈夫です。

0Like

Comments

  1. @mar-gitacount

    Questioner

    ご回答ありがとうございます。またよろしくお願いいたします。

Your answer might help someone💌