TypeError: element.summernote is not a function

I’m using Yeoman Angular-Fullstack generator, this is my first time using webpack.

This error has given me headaches for a lot of hours: angular.js:13920TypeError: element.summernote is not a function

It is supposed to appear when the dependencies aren’t loaded in the right order. I can’t get it to work even with my app.ts looking like this:

var $ = require('jquery');

import 'bootstrap/dist/css/bootstrap.css';
const bootstrap = require('bootstrap');

const codemirror = require("codemirror");

import 'summernote/dist/summernote.css';
const summernote = require('summernote');


const angular = require('angular');
// import ngAnimate from 'angular-animate';
const ngCookies = require('angular-cookies');
const ngResource = require('angular-resource');
const ngSanitize = require('angular-sanitize');

const uiRouter = require('angular-ui-router');
const uiBootstrap = require('angular-ui-bootstrap');

const ngSummernote = require('angular-summernote');

const lodash = require('lodash');`

The answer could be something pretty simple but I’m running out of ideas. Any help would be appreciated

Issue Analytics

State:
Created 7 years ago
Comments:6

Top GitHub Comments

4reactions

gzuzkstrocommented, Oct 29, 2016

I solved it by adding $() to the element before activate is called (also, $ is an alias for jQuery in webpack config).

//Directive in angular-summernote.js

if (!ngModel) {
            transclude(scope, function(clone, scope) {
              // to prevent binding to angular scope (It require `tranclude: 'element'`)
              element.append(clone.html());
            });
              console.log(element);
            summernoteController.activate(scope, $(element), ngModel);
          } else {
            var clearWatch = scope.$watch(function() { return ngModel.$viewValue; }, function(value) {
              clearWatch();
              element.append(value);
                console.log(element);
              summernoteController.activate(scope, $(element), ngModel);
            }, true);
          }

This is my first attemp on using webpack so maybe there’s a way of solving it without changing wrapper code.

3reactions

Celadoracommented, Feb 19, 2018

The problem for us was a missing bower.json file. Adding this file corrected the problem.


{
  "name": "summernote",
  "homepage": "https://github.com/summernote/summernote",
  "version": "0.8.9",
  "main": [
        "./dist/summernote.js",
        "./dist/summernote.css"
  ],
  "_release": "0.8.9",
  "_resolution": {
    "type": "version",
    "tag": "v0.8.9",
    "commit": "55ce8b405ab1ff4fd86ae147af7e74d97fd9d738"
  },
  "_source": "https://github.com/summernote/summernote.git",
  "_target": "~0.8.0",
  "_originalSource": "summernote"
}