laravelでsummernoteを導入したいが、bladeテンプレートを使うとjsが作動しなくなる

前提・実現したいこと　発生している問題・エラーメッセージ

laravelにsummernote(マークダウンエディタ)を導入したいのですが、bladeテンプレートと組み合わせると
summernoteのjavascriptが作動しなくなる。

具体的にいうと、文字入力はできるのに、太字にしたり、アンダーラインにしたりのボタンを押すと動かなくなる。

デベロッパーツールを確認してもエラーが出ませんでした。

該当のソースコード

テンプレート

php
1<!DOCTYPE html>
2<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
3<head>
4    <meta charset="utf-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1">
6
7    <!-- CSRF Token -->
8    <meta name="csrf-token" content="{{ csrf_token() }}">
9
10    <title>{{ config('app.name', 'Laravel') }}</title>
11
12    <!-- Scripts -->
13    <script src="{{ asset('js/app.js') }}" defer></script>
14    <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
15
16    <!-- Fonts -->
17    <link rel="dns-prefetch" href="//fonts.gstatic.com">
18    <link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet">
19
20    <!-- Styles -->
21    <link href="{{ asset('css/app.css') }}" rel="stylesheet">
22
23    <!-- summer note-->
24    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css">
25    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
26    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"></script>
27    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js"></script>
28    <link href="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.12/summernote-bs4.css" rel="stylesheet">
29    <script src="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.12/summernote.js"></script>
30</head>
31
32///省略///
33
34<main class="py-4">
35        @yield('content')
36      </main>
37 </div>
38</body>
39</html>
40

表示したいページ

php
1@extends('layouts.app')
2
3@section('content')
4    <div id="summernote"></div>
5
6    <script>
7      $('#summernote').summernote({
8        placeholder: 'Hello bootstrap 4',
9        tabsize: 2,
10        height: 200
11      });
12    </script>
13
14@endsection
15

試したこと

表示したいページにあるscriptタグをテンプレート側に書いてもうまくいきませんでした。

javascriptにonloadを加えて読み込みのタイミングを変えてみたが、
そうするとsummernote is not definedというエラーになってしまった。

ちなみに、blade側でextendsを使わずに直にcss,javascriptを読み込んだらうまくいった。

php
1<!DOCTYPE html>
2<html lang="en">
3  <head>
4    <meta charset="UTF-8">
5    <title>bootstrap4</title>
6    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css">
7    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
8    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"></script>
9    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js"></script>
10    <link href="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.12/summernote-bs4.css" rel="stylesheet">
11    <script src="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.12/summernote-bs4.js"></script>
12  </head>
13  <body>
14    <div id="summernote"></div>
15    <script>
16      $('#summernote').summernote({
17        placeholder: 'Hello bootstrap 4',
18        tabsize: 2,
19        height: 100
20      });
21    </script>
22  </body>
23</html>

補足情報（FW/ツールのバージョンなど）

laravel5.8

行動規範の内容に同意します

回答1件

ベストアンサー

ちなみに、blade側でextendsを使わずに直にcss,javascriptを読み込んだらうまくいった。

という事でしたら、その結果とextendsを使った場合での差が原因です。
extendsを使ったとしても、ブラウザ側にHTMLが渡った時点で、ブラウザの解釈の問題となります。
つまり、Laravel/Bladeで構築したHTMLがおかしい可能性が高いです。
ですので、よく見比べる、省略している部分をとりあえず消してみて、何を増やしたらバグるのか比較してみましょう

投稿2019/09/17 08:54

mikkame

総合スコア5036

kaoruikeda

2019/09/17 10:24

回答してくださりありがとうございます。 @extends('layouts.app') @section('content') <div id="summernote"></div> <script> $('#summernote').summernote({ placeholder: 'Hello bootstrap 4', tabsize: 2, height: 200 }); </script> @endsection この状態まで減らしてもダメでしたが、テンプレートにsection内を直書きしたら大丈夫でした。なので「extends」だけが問題だと思うのですがどうしたら解決できるでしょうか？ちなみに、vueのコンパイルエラーが出ていました。

kaoruikeda

2019/09/17 10:25

また、テンプレートに直書きした内容をそのまま表示したいページに貼り付けてもうまくいきました。