npm run devのエラーについて

Comments

1. 

   @mar-gitacount

   Questioner

   more_horiz

   いつも丁寧な回答ありがとうございます。
   因みにどのファイルのsrcを書き換えればいいのかわからないのでお時間あれば教えていただければと思います。
   勿論自身でも調べてみます。
2. 

   @monaka_ben_mezd

   more_horiz

   c:\workspace\neomediaproject に main.js ファイルがありませんか？そこに ./src という記載がありそうです。
3. 

   @mar-gitacount

   Questioner

   more_horiz

   mai.jsが無いですね、、
   無い場合は自身で作成するなどでしょうか？？
   
   すみません、どうもnpmは全くの素人なので理解が及んでいません、、
4. 

   @monaka_ben_mezd

   more_horiz

   なるほど
   
   どこかに記載されている `./src` の記述がコンパイルエラーを起こしているので、main.jsを自分で作成してもエラーは解消しません。
   
   package.jsonの中身とあればwebpack.config.jsonの中身を貼っていただくことは可能でしょうか？
   
   そちらの中身に解決への糸口がありそうです。
5. 

   @mar-gitacount

   Questioner

   more_horiz

   webpack.config.jsonでは無く、webpack.config.jsではないですか？？
   どこかの記事で確認したのですが、現在のnpmのバージョンだとwebpack.config.js→webpack.mix.jsに変更した??っぽい事が書かれておりそのファイルならあるのでお見せする事は可能です。
6. 

   @monaka_ben_mezd

   more_horiz

   webpack.config.js でした！
   そちらとpackage.jsonの中身が重要です。
7. 

   @mar-gitacount

   Questioner

   more_horiz

   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');
   -------------------------------------------------------------------
   package.json-------------------------------------------------------
   {
   "name": "packege.json",
   "version": "1.0.0",
   "description": "<p align=\"center\"><a href=\"https://laravel.com\" target=\"_blank\"><img src=\"https://raw.githubusercontent.com/laravel/art/master/logo-lockup/5%20SVG/2%20CMYK/1%20Full%20Color/laravel-logolockup-cmyk-red.svg\" width=\"400\"></a></p>",
   "main": "index.js",
   "directories": {
   "test": "tests"
   },
   "dependencies": {
   "package.json": "^2.0.1"
   },
   "devDependencies": {
   "laravel-mix": "^6.0.0"
   },
   "scripts": {
   "test": "echo \"Error: no test specified\" && exit 1",
   "dev": "webpack --mode development"
   },
   "author": "",
   "license": "ISC"
   }
   ------------------------------------------------------------------
   
8. 

   @mar-gitacount

   Questioner

   more_horiz

   上記がwebpack.mix.jsとpackage.jsonの中身となります。なにかわからばいいのですが、、
9. 

   @monaka_ben_mezd

   more_horiz

   resources/js/ このディレクトリ配下の.jsファイルのどれかに ./srcの記述があると思います。
   vscodeを使用している場合、エディタの機能で全文検索が行えるので、「./src」で検索してみてください。
10. 

    @mar-gitacount

    Questioner

    more_horiz

    resources/js/ファイル可下にapp.jsファイルとbootstrap.jsの二つのファイルがありました。
    
    ./srcで検索したものの検索は0でしたが、require('./bootstrap');という一文がapp.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');←./srcは無いですがこれならあります。
    
    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',
    });
    
    
    -----------------------------------bootstrap.js---------------------
    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');
    } 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
    // });
    
    
11. 

    @monaka_ben_mezd

    more_horiz

    すいません、根本的に勘違いしてました。
    
    このプロジェクトって何を参考にしました？参考にしたgithub?ページ等があれば教えていただきたいです。
    
    あと、もう一個試していただきたいのが、
    srcディレクトリの中に index.js と main.js というファイルを作成してみてもう一度 npm run dev を実行してみてください
    
    js ファイルの中身は以下でお願いします。
    
    ```js
    console.log('test');
    ```
12. 

    @mar-gitacount

    Questioner

    more_horiz

    udemyの授業を参考に自身のプロジェクトを立ち上げたので、URLなどを送るのは難しいのですが、インストール時の流れを説明させていただきます。
    
    コマンドプロンプトを利用して認証用のビューを表示するためのパッケージを取得するためにcomposerコマンドを使ってインストールしました。
    
    $composer require laravel/ui
    
    そのあと認証用のインターフェースを追加するために
    $php artisan ui vue --auth
    
    $npm install
    
    $npm run dev としたらエラーが吐かれました。
    
    参考にならず申し訳ございません。
    
    srcファイルを
    C:\workspace\neomediaproject\srcとしてその下に
    index.jsとmain.jsを配置し、
    
    $npm run devしました。
    
    実行結果
    > packege.json@1.0.0 dev C:\workspace\neomediaproject
    > webpack --mode development
    
    [webpack-cli] Compilation finished
    asset main.js 790 bytes [emitted] (name: main)
    ./src/index.js 19 bytes [built] [code generated]
    webpack 5.11.0 compiled successfully in 117 ms
    
    となりました。
13. 

    @monaka_ben_mezd

    more_horiz

    そのメッセージならコンパイル成功しています！
    おめでとうございます
14. 

    @mar-gitacount

    Questioner

    more_horiz

    長々とありがとうございます😭
    ただ以下に写真を貼りました通り、
    <div class=“row justify-content-center”>のところで怒られています。
    原因はnpmだと思ったのですが、、
15. 

    @monaka_ben_mezd

    more_horiz

    これはpublic/js/app.jsの中身がhtmlになってたりしませんか？この場合、npmというよりwebpackというツールもしくはhttpサーバ起因の原因の可能性があります。
    
    public/js/app.jsの中身をconsole.log('123')に書き換えてエラーが消えるか確認してみてください。それで消える場合、app.jsの中身がhtmlになってしまっているのがエラーの原因です。
    
    ちなみに<div class=“row justify-content-center”>って自分で書いた記憶ありますか？それともライブラリ側で用意されてるものでしょうか？
16. 

    @monaka_ben_mezd

    more_horiz

    あとwebpack.***.jsってファイルがもっとあるはずなんですが、探してみてください。
17. 

    @mar-gitacount

    Questioner

    more_horiz

    長々とお付き合いいただきありがとうございます。
    <div class=“row justify-content-center”>はudemyの中身で利用しており、ブートストラップの中央寄せで便利なのでそのまま使っていました。
    public/app.jsの中身はjavasciptで書かれています。以下に投稿します。
    
    webpack.***.jsですが
    \user\node_modules\webpack\bin\webpack.js
    \user\node_modules\webpack\lib\webpack.js
    \user\node_modules\webpack\lib\WebpackError.js
    \user\node_modules\webpack\lib\WebpackOptionApply.js
    \user\node_modules\webpack\lib\WebpackOptionsDefaulter.js
    
    自身でネットで知らべていますが中々解決方法が見つからないんですよね(´;ω;｀)