Nunjucks: Cannot read property 'MutationObserver' of undefined

[rbvea]

nunjucks=2.0.3
node=4.0.0
webpack=1.12.2

Getting an error when importing nunjucks:

Uncaught TypeError: Cannot read property 'MutationObserver' of undefined

looks like this bit of code is triggering it:

var BrowserMutationObserver=global.MutationObserver || global.WebKitMutationObserver;

[Rowno]

I'm getting the same error in Browserify.

[carljm]

@rbvea Are you also using Browserify?

That code is generated by Webpack; according to a comment in the code, 'global' is a provision of Browserify, Mr, Mrs, or Mop. I'm afraid I don't know enough about Browserify to know why it would be undefined there, or how this could be fixed.

[carljm]

Actually it looks like that code comes from asap, one of nunjucks' dependencies: https://www.npmjs.com/package/asap

[romuleald]

Same error with this config

webpack 1.12.2
node 4.1.1
nunjucks 2.1.0

[carljm]

Any chance this is just another manifestation of #507?

[marekjalovec]

problem is indeed asap package that uses global variable available in browserify, but not in webpack.

[kokujin]

I still have this problem, which means, I cant use Nunjucks in the browser. Is there a way to circumvent this problem? Any workaround? Thanks

[Anthodpnt]

Hello, is there any solution about this issue. Still get the problem when using nunjucks and webpack.

[ediblecode]

As a workaround, you could use string-replace-webpack-plugin and the following in _webpack.config.js_. Not ideal but it works:

postLoaders: [{
    test: /\.js$/,
    loader: StringReplacePlugin.replace({
        replacements: [
            // Fix for https://github.com/mozilla/nunjucks/issues/520
            // Because of https://github.com/mozilla/nunjucks/blob/master/browser/nunjucks-slim.js#L1212
            {
                pattern: /global\.MutationObserver/g,
                replacement: function () {
                    return "window.MutationObserver";
                }
            },
            {
                pattern: /global\.WebKitMutationObserver/g,
                replacement: function () {
                    return "window.WebKitMutationObserver";
                }
            }
        ]
    })
}]

[GerkinDev]

For people using rollup, you can try this configuration:

import replace from 'rollup-plugin-replace';

export default {
  // ...
  plugins: [
    replace({
      delimiters: ['', ''],
      values: {
        'global.': 'window.'
      },
    }),
  ],
};

Yet, this is far less precise than with webpack, but it works. Regular expressions in the plugin were disabled by rollup/rollup-plugin-replace#3

[fdintino]

@GerkinDev this is a very old issue. Is this still a problem? How would I go about trying to reproduce it?

[GerkinDev]

Yes, it is still an issue with rollup, and I lost several hours struggling with it. Thus, I wanted to share this solution. Any simple configuration with rollup would fail without the above solution.

[fdintino]

I've looked into it more closely, and I think you are mistaken. This was fixed in asap 2.0.5 (https://github.com/kriskowal/asap/commit/c5b65d2c0a7dd62c0bd11990b8531f50290072ca), and that fix has been bundled with nunjucks since v3.0.1 (see here). Here it is in the 3.2.0 release:

https://github.com/mozilla/nunjucks/blob/d0ab8d6bf4d7b91fb2c2883f95b172f776d4e531/files/nunjucks-slim.js#L2032-L2033

(In a browser, self in the global scope returns window (MDN Window.self).

There are two possibilities: either you are using Nunjucks 2.x, or you have an old version of asap installed in your own project, and rollup is bundling that.

My motivation for investigating further is that I have been using nunjucks with rollup since 2017, when I took on maintenance of this project (and when 3.0.1 was released), and I've never needed a workaround.

[GerkinDev]

Actually you're right, this is super awkward, I don't know how but it seems that npm resolved my deps tree using a version <3.0.1 of nunjucks. Now it correctly compiles without any issue. Mêh. :sheep:

[fdintino]

No worries. Glad it got sorted out!