web-dev-qa-db-ja.com

Laravel Uncaught ReferenceError webpackJsonp is not defined at app.js：1

そのため、Laravel 5.4 Webサイトをテストしているときに、ブラウザーコンソール行で次のエラーが発生します。

Uncaught ReferenceError: webpackJsonp is not defined at app.js:1

正直なところ、webpackと関連についてはほとんどわかりません。指示に従ってアセットをコンパイルするだけで、通常はすべてが機能します...

とにかく...私はLaravel 5.4を使用していて、bootstrap3をbootstrap4に交換しました。それ以外は、すべてがデフォルトのlaravelセットアップとほぼ同じです。

ぼくの webpack.mix.jsは次のようになります：

mix.js('resources/assets/js/app.js', 'public/js')
.extract(['vue','tether','bootstrap'])
.sass('resources/assets/sass/app.scss', 'public/css');

ぼくの assets/js/app.js（読みやすくするためにデフォルトのコメントは削除されています）

require('./bootstrap');
Vue.component('example', require('./components/Example.vue'));
const app = new Vue({
    el: '#app'
});

ぼくの assets/js/bootstrap.js（読みやすくするためにデフォルトのコメントは削除されています）

window._ = require('lodash');
window.$ = window.jQuery = require('jquery');
require('bootstrap');
window.Vue = require('vue');
window.axios = require('axios');
window.axios.defaults.headers.common = {
    'X-CSRF-TOKEN': window.Laravel.csrfToken,
    'X-Requested-With': 'XMLHttpRequest'
};

下部にあるメインのレイアウトブレードファイル

<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
<script src="/js/app.js"></script>
<script src="/js/vendor.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/raphael/2.2.7/raphael.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.min.js"></script>

原因となる可能性のある他の場所について考えられる場合は、お知らせください。コードスニペットで更新します。

他の情報が不足していることをお詫び申し上げます。私はいろいろと調べてみましたが、何が間違っているのか、どうすれば修正できるのか、正直に完全に困惑しています。

javascriptwebpacklaravel-5.4laravel-mix
10
Kieran

そして、私は愚かでした。ドキュメントを正しく読みませんでした。

主に言ったビット：

JavaScriptエラーを回避するには、次のファイルを正しい順序でロードしてください。

<script src="/js/manifest.js"></script>
<script src="/js/vendor.js"></script>
<script src="/js/app.js"></script>

マニフェスト.jsを追加して並べ替えると、すべて機能するようになりました。

16
Kieran