Topic: MDB React in Gatsby.js

mr_gatsby free asked 6 years ago


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

mattagape pro commented 6 years ago

Did you ever get this problem solved? I'm getting the same error (WebpackError: Cannot read property 'toLowerCase' of undefined) in my Gatsby.js project when I run 'gatsby build'.

Mikołaj Smoleński staff answered 6 years ago


Hello, At first, thank You for letting us know about the issue. We'll mark Your problem as important issue to fix before the future updates of MDB React. Regards

mattagape pro commented 6 years ago

I wrote to mr_gatsby above,... "Did you ever get this problem solved? I’m getting the same error (WebpackError: Cannot read property ‘toLowerCase’ of undefined) in my Gatsby.js project when I run ‘gatsby build’." Do you have any advice on how to solve this problem? Thanks so much!

Mikołaj Smoleński staff commented 6 years ago

We'll try to work on it in the future, but for this moment the priority is to improve MDB React in CRA environment.

mattagape pro commented 6 years ago

Okay, thanks anyway. I guess I'll have to use material-ui which gatsby has a plug-in for (gatsby-plugin-material-ui).

mattagape pro commented 6 years ago

When you guys send out your periodic emails about product updates, it would be helpful to know when you are set up for Gatsby.js. I'll definitely look into using MDB when that is set up. Thanks!

Mikołaj Smoleński staff commented 6 years ago

Yes, of course. We'll add the note about Gatsby to our newsletter .


Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

  • ForumUser: Free
  • Premium support: No
  • Technology: MDB React
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No
Tags