Laravel MixでビルドするとsummernoteのCode Viewが動かなくなる現象の解消

はじめに

Laravel Mixを使ってsummernoteを含むCSSやJavaScriptをワンソースにパッケージ化した際に、summernoteのCode Viewが動かなくなる現象がありました。

イメージで説明するとこういう状況です。
下記のキャプチャはCode Viewボタンを押す前のエディタです。

そして下記のキャプチャがCode Viewボタンを押した後のエディタです。

おわかりいただけたでしょうか？
コードが表示されません。ビルド前はちゃんと表示されていたのに！

なお、summernoteのバージョンは0.8.11、Bootstrapのバージョンは3.3.7で確認しています。

要因

webpackのコンパイル時にcodemirrorを含んでしまうのがいけなかったようです。

解決方法

下記のissueの通りなのですが、webpackのプラグインでcodemirrorをコンパイルの対象から除外してやればOKです。

webpack.mix.js

const mix = require('laravel-mix');
const webpack = require('webpack');

mix.webpackConfig({
  plugins: [
    new webpack.IgnorePlugin(/^codemirror$/)
  ]
});

mix.js('resources/assets/js/app.js', 'public/assets/js')
   .sass('resources/assets/scss/app.scss', 'public/assets/css')
   .version();

おわりに

何に原因があるのか分からず困っていましたが、webpackのキーワードで解決方法が見つかって助かりました。