I'm using MDB React in Gatsby JS, it works great in development ('gatsby develop') but as soon as I try to run 'gatsby build' with any MDB React component imported I get the error below. I've installed MDB through NPM and the problem arises as soon as any MDB-component is used. Any ideas?

(I also need to add the following to gatsby-node.js in order not to get "WebpackError: The style-loader cannot be used in a non-browser environment" when trying to build.)

exports.modifyWebpackConfig = ({ config, stage }) => {
if (stage === "build-html") {
config.loader("null", { test: /mdbreact/, loader: "null-loader" });
}
};

Output from running 'gatsby build':

success delete html and css files from previous builds — 0.032 s
success open and validate gatsby-config.js — 0.011 s
info One or more of your plugins have changed since the last time you ran Gatsby. As
a precaution, we're deleting your site's cache to ensure there's not any stale
data
success copy gatsby files — 0.019 s
success onPreBootstrap — 0.719 s
success source and transform nodes — 0.160 s
success building schema — 0.390 s
success createLayouts — 0.010 s
success createPages — 0.006 s
success createPagesStatefully — 0.015 s
success onPreExtractQueries — 0.001 s
success update schema — 0.202 s
success extract queries from components — 0.065 s
success run graphql queries — 0.303 s
success write out page data — 0.004 s
success write out redirect data — 0.001 s
success onPostBootstrap — 0.001 s

info bootstrap finished - 4.474 s

success Building CSS — 14.028 s
success Building production JavaScript bundles — 22.485 s

error Building static HTML for pages failed

See our docs page on debugging HTML builds for help https://goo.gl/yL9lND

  34 | var Y=function(){function a(b,g){if(!(this instanceof a))throw new TypeError("Cannot call a class as a function");r.isValidElement(b)?b.type!==P?b=[b]:(b=b.props.children,b=r.isValidElement(b)?[b]:X(b)):b=X(b);this.stack=[{domNamespace:T.html,children:b,childIndex:0,context:t,footer:""}];this.exhausted=!1;this.currentSelectValue=null;this.previousWasTextNode=!1;this.makeStaticMarkup=g}a.prototype.read=function(a){if(this.exhausted)return null;for(var b="";b.length<a;){if(0===this.stack.length){this.exhausted=
  35 | !0;break}var c=this.stack[this.stack.length-1];if(c.childIndex>=c.children.length){var h=c.footer;b+=h;""!==h&&(this.previousWasTextNode=!1);this.stack.pop();"select"===c.tag&&(this.currentSelectValue=null)}else h=c.children[c.childIndex++],b+=this.render(h,c.context,c.domNamespace)}return b};a.prototype.render=function(a,g,c){if("string"===typeof a||"number"===typeof a){c=""+a;if(""===c)return"";if(this.makeStaticMarkup)return Q(c);if(this.previousWasTextNode)return"\x3c!-- --\x3e"+Q(c);this.previousWasTextNode=
> 36 | !0;return Q(c)}g=za(a,g);a=g.child;g=g.context;if(null===a||!1===a)return"";if(r.isValidElement(a))return a.type===P?(a=X(a.props.children),this.stack.push({domNamespace:c,children:a,childIndex:0,context:g,footer:""}),""):this.renderDOM(a,g,c);a=X(a);this.stack.push({domNamespace:c,children:a,childIndex:0,context:g,footer:""});return""};a.prototype.renderDOM=function(a,g,c){var b=a.type.toLowerCase();c===T.html&&U(b);ta.hasOwnProperty(b)||(sa.test(b)?void 0:w("65",b),ta[b]=!0);var f=a.props;if("input"===
     |                                                                                                                                                                                                                                                                                                                                                                                          ^
  37 | b)f=k({type:void 0},f,{defaultChecked:void 0,defaultValue:void 0,value:null!=f.value?f.value:f.defaultValue,checked:null!=f.checked?f.checked:f.defaultChecked});else if("textarea"===b){var e=f.value;if(null==e){e=f.defaultValue;var d=f.children;null!=d&&(null!=e?w("92"):void 0,Array.isArray(d)&&(1>=d.length?void 0:w("93"),d=d[0]),e=""+d);null==e&&(e="")}f=k({},f,{value:void 0,children:""+e})}else if("select"===b)this.currentSelectValue=null!=f.value?f.value:f.defaultValue,f=k({},f,{value:void 0});
  38 | else if("option"===b){d=this.currentSelectValue;var n=va(f.children);if(null!=d){var p=null!=f.value?f.value+"":n;e=!1;if(Array.isArray(d))for(var l=0;l<d.length;l++){if(""+d[l]===p){e=!0;break}}else e=""+d===p;f=k({selected:void 0,children:void 0},f,{selected:e,children:n})}}if(e=f)na[b]&&(null!=e.children||null!=e.dangerouslySetInnerHTML?w("137",b,pa()):void 0),null!=e.dangerouslySetInnerHTML&&(null!=e.children?w("60"):void 0,"object"===typeof e.dangerouslySetInnerHTML&&"__html"in e.dangerouslySetInnerHTML?
  39 | void 0:w("61")),null!=e.style&&"object"!==typeof e.style?w("62",pa()):void 0;e=f;d=this.makeStaticMarkup;n=1===this.stack.length;p="\x3c"+a.type;for(q in e)if(e.hasOwnProperty(q)){var m=e[q];if(null!=m){if("style"===q){l=void 0;var A="",y="";for(l in m)if(m.hasOwnProperty(l)){var u=0===l.indexOf("--"),v=m[l];null!=v&&(A+=y+ua(l)+":",y=l,u=null==v||"boolean"===typeof v||""===v?"":u||"number"!==typeof v||0===v||W.hasOwnProperty(y)&&W[y]?(""+v).trim():v+"px",A+=u,y=";")}m=A||null}l=null;b:if(u=b,v=e,


  WebpackError: Cannot read property 'toLowerCase' of undefined

  - react-dom-server.node.production.min.js:36 a.renderDOM
    ~/gatsby-plugin-react-next/~/react-dom/cjs/react-dom-server.node.production.    min.js:36:378

  - react-dom-server.node.production.min.js:36 a.render
    ~/gatsby-plugin-react-next/~/react-dom/cjs/react-dom-server.node.production.    min.js:36:217

  - react-dom-server.node.production.min.js:35 a.read
    ~/gatsby-plugin-react-next/~/react-dom/cjs/react-dom-server.node.production.    min.js:35:208

  - react-dom-server.node.production.min.js:44 renderToString
    ~/gatsby-plugin-react-next/~/react-dom/cjs/react-dom-server.node.production.    min.js:44:1

  - static-entry.js:126 module.exports
    .cache/static-entry.js:126:31

  - static-entry.js:99 Function.Promise.fromNode.Promise.fromCallback
    .cache/static-entry.js:99:20