Help us understand the problem. What is going on with this article?

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

More than 1 year has passed since last update.

はじめに

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

イメージで説明するとこういう状況です。
下記のキャプチャはCode Viewボタンを押す前のエディタです。
summernote_before.png
そして下記のキャプチャがCode Viewボタンを押した後のエディタです。
summernote_after.png

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

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

要因

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

解決方法

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

https://github.com/summernote/summernote/issues/1171

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のキーワードで解決方法が見つかって助かりました。:joy:

Why do not you register as a user and use Qiita more conveniently?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away