Fix module loading issues in CommonJS environments (mainly for webpack and browserify compatibility)

[niklasramo]

There are some problems currently when Muuri is being imported in a webpack environment. The importing fails. Let's fix this and make sure Muuri works without hiccups in webpack and other CommonJS environments (at least Browserify and Webpack) in addition to browser environment.

[lukedohner]

Was the Muuri / Webpack issue fixed? I am using Gatsby (react) webpack

Mine looks like this.

330 | if (isTransformSupported) return;
331 | var propName = prefix ? prefix + styleCap : style;

332 | if (document.documentElement.style[propName] !== undefined) {
| ^
333 | prefix = prefix.toLowerCase();
334 | transformStyle = prefix ? '-' + prefix + '-' + style : style;
335 | transformProp = propName;

WebpackError: ReferenceError: document is not defined

• index.es.js:332
  [lib]/[react-muuri]/dist/index.es.js:332:1

[niklasramo]

Yep, I AFAIK it was fixed. Have you seen this issue: gatsbyjs/gatsby#11885 and this info: https://www.gatsbyjs.org/docs/debugging-html-builds/#fixing-third-party-modules? I think the problem might be that Muuri expects a DOM environment and when you try to use it on the server-side (non-DOM) things go bad.

ATM Muuri really can't be used on the server side as it fetches the element dimensions from the DOM. However, it would not be so much trouble to get rid of the document and Element references which Muuri assumes to be available in the global scope. Those could be just transformed to window.document and window.Element. I'm not really sure what's the correct approach here, ideas are welcome.