Demo's and library isn't working - TypeError: Cannot read property 'configure' of undefined

[benhoIIand]

The demo page is no longer working. The error in the console reads:

TypeError: Cannot read property 'configure' of undefined

[pc035860]

HI @hollandben ,

Thanks for reporting. The demo page seems working well for me. Can you check your "Network" panel, see if http://yandex.st/highlightjs/8.0/highlight.min.js loaded correctly?

[benhoIIand]

It's getting a response, but with nothing in the body of it. If I go directly to http://yandex.st/highlightjs/8.0/highlight.min.js then I can see the code.

I'm currently using Chrome v35. Just checked it in a few other browsers and it's working fine. Weird.

[alexsomeoddpilot]

I'm having the same issue while using the library in my code.

The issue is coming from this line which expects hljs to exist as a property on window, but the property is not set.

[alexsomeoddpilot]

I've determined the real cause is that I wasn't including the original highlightjs library.

Additionally, I'm using Browserify and expected this library to be pulled in automatically.

I'm working on a pull request which will solve for this.

[stickel]

This error happens when I use the npm modules for both highlight.js and angular-highlightjs along with webpack. Using require('highlight.js'); to load the highlightjs library creates the TypeError: Cannot read property 'configure' of undefined error. When I add a script tag and load highlightjs from the CDN there are no errors and all works well. Is there a way to fix the error using require instead of calling highlightjs from a CDN?

[pc035860]

Will work on it this weekend. Thanks for the information!

[pc035860]

@stickel I just updated the module pattern to UMD. It's on master branch now. If it works for you, I'll make a release ASAP!

[stickel]

@pc035860 Close. As it is in master I was getting an error that the module hljs couldn't be found. Updating this conditional in ./build/angular-highlight.js:

(function (root, factory) {
  if (typeof define === "function" && define.amd) {
    define(["angular", "hljs"], factory);
  } else if (typeof module === "object" && module.exports) {
    module.exports = factory(require("angular"), require("highlight.js"));
  } else {
    root.returnExports = factory(root.angular, root.hljs);
  }
}(this, function (angular, hljs) {

to this:

(function (root, factory) {
  if (typeof define === "function" && define.amd) {
    // define(["angular", "hljs"], factory);
    module.exports = factory(require("angular"), require("highlight.js"));
  } else if (typeof module === "object" && module.exports) {
    module.exports = factory(require("angular"), require("highlight.js"));
  } else {
    root.returnExports = factory(root.angular, root.hljs);
  }
}(this, function (angular, hljs) {

Everything started working with webpack. Not sure if/how it'll affect other build tools though.

I posted a few other files for the test app I was using in this gist as well to give you more context.

[pc035860]

It seems that webpack's babel-loader will try to resovle modules with every possible pattern (rather than just CommonJS), hence causing

define(["angular", "hljs"], factory);

being looked up in your installed npm modules, where it can't find hljs-named module and caused the error.

I've updated the module name to sync with the CommonJS one. And It should be fine on master now.

[stickel]

@pc035860 Downloaded and tested the files from master and it's working great. :+1:

[pc035860]

Just released v0.4.3. Thanks!

[shekharkhedekar]

@pc035860 I still see this with v0.4.3 (and angular 1.3.17)

TypeError: Cannot read property 'configure' of undefined at Object.ngModule.provider.$get (VM1394 angular-highlightjs.js:47)

[shekharkhedekar]

Actually - I missed the removal of the highlight.js dependency. Looks like we need to include that separately (using bower for this)?

[pc035860]

There's actually no official bower package of highlight.js now (see here). But there's an official npm package, you can just npm install highlight.js --save for it.

Since you're using webpack, this should work for you.

I'm still wondering whether to add angular and highlight.js dependencies to package.json or not...

[stickel]

@pc035860 Have you updated the npm package with the newest version? When I try installing 0.4.3 npm can't find that version.

[pc035860]

@stickel I forgot to publish the new version to npm... And I'm having some trouble publishing it at home. Will try to publish it tomorrow at work!

[pc035860]

v0.4.3 published on npm now. Sorry for the delay! https://www.npmjs.com/package/angular-highlightjs

[stickel]

[ghost]

'bower_components/angular-highlightjs/build/angular-highlightjs.min',
'js/highlight.min',

to

'js/highlight.min',
'bower_components/angular-highlightjs/build/angular-highlightjs.min',

[herrherrmann]

Last one did the trick for me (loading highlight.js before angular-highlightjs.js) – super-important hint!

[ghost]

@herrherrmann +1

[thekingofcity]

@ghost Still helpful. ):