Not able to deploy my Gatsby.js app to Netflify when I add m

  1. MDB Home Page
  2. Support Main Page
  3. MDB React
Topic: Not able to deploy my Gatsby.js app to Netflify when I add mdbreact (or mdbootstrap )

mattagape pro asked 7 years ago

Description
I'm attempting add Material Design for Bootstrap (react version) to my Gatsby.js app.When I yarn add mdbreact (or mdbootstrap) to my Gatsby app, it works fine in development mode, but when attempt to deploy it to Netlify, the deployment fails.Apparently there is a conflict in webpack with the babel-loader.
Steps to reproduce

  1. I install it: yarn add mdbreact (or mdbootstrap)
  2. I get the following error when I run gatsby develop: error There was an error compiling the html.js component for the development server. ...WebpackError
  3. I remove the node_modules folder and then re-install it (npm install).
  4. When I run gatsby develop again (or gatsby build), it works.
  5. Then in index.js, I add `import 'font-awesome/css/font-awesome.min.css';import 'bootstrap/dist/css/bootstrap.min.css';import 'mdbreact/dist/css/mdb.css';`...and the bootstrap styling works fine in my local development environment.
  6. Then, when I git push origin (which Netlify uses to automatically re-deploy the app), I get following error in my Netlify Deploy log:
Error: ./~/babel-loader/lib?{"plugins":["/opt/build/repo/~/gatsby/dist/utils/b abel-plugin-extract-graphql.js","/opt/build/repo/~/babel-plugin-add-module-exp orts/lib/index.js","/opt/build/repo/~/babel-plugin-transform-object-assign/lib /index.js"],"presets":[["/opt/build/repo/~/babel-preset-env/lib/index.js",{"lo ose":true,"uglify":true,"modules":"commonjs","targets":{"browsers":["> 1%","la st 2 versions","IE >= 9"]},"exclude":["transform-regenerator","transform-es201 5-typeof-symbol"]}],"/opt/build/repo/~/babel-preset-stage-0/lib/index.js","/op t/build/repo/~/babel-preset-react/lib/index.js"],"cacheDirectory":true}!./src/

Here is my package.json file:

{ "name": "gatsby-starter-default", "description": "Gatsby default starter", "version": "1.0.0", "author": "Kyle Mathews <mathews.kyle@gmail.com>", "dependencies": { "gatsby": "^1.9.247", "gatsby-link": "^1.6.40", "gatsby-plugin-react-helmet": "^2.0.10", "gatsby-source-contentful": "^1.3.53", "gatsby-transformer-remark": "^1.7.44", "mdbreact": "^4.5.0", "react-helmet": "^5.2.0" }, "keywords": [ "gatsby" ], "license": "MIT", "scripts": { "build": "gatsby build", "develop": "gatsby develop", "format": "prettier --write 'src/**/*.js'", "test": "echo \"Error: no test specified\" && exit 1" }, "devDependencies": { "prettier": "^1.12.0" }, "repository": { "type": "git", "url": "https://github.com/gatsbyjs/gatsby-starter-default" }}

Any help on this would be much appreciated. I think adding Material Design Bootstrap to Gatsby would be a great combination!

Mikołaj Smoleński staff answered 7 years ago

Hi, We'are planning to test MDB with Gatsby in the future. For this moment I can't help You with Your issue. I'll let You know as soon as we test our package in that environment. Best Regards

mattagape pro commented 6 years ago

Okay, thanks so much. Whenever you test with Gatsby, you might also want to test deploying the app to Netlify since many Gatsby sites are hosted on Netlify. I appreciate it.

Mikołaj Smoleński staff commented 6 years ago

Thanks for remarks!

Francisco Agurto pro premium priority commented 6 years ago

i had the same issue . and i got it to work, the problem is that gastby "server side" render your pages , so if there is any library ( like mdreact ) that uses the window variable it crushes . a work around on this is to  "conditianally" require your dependency , i created a gist to ilustrate how to get it to work.

https://gist.github.com/fagurto/fc846eada83c698636d5162533f07943

of course you can refactor that and put it on a higher order component so that one can handle the boilerplate of importing your mdreact dependency. 

i hope this one might be helpful for you guys .

PD: i'm not a english native speaker so i apoligize in advance if there is any mistake in the explanation.

Mikołaj Smoleński staff commented 6 years ago

Thanks Francisco for Your help.
Best!

pro commented 6 years ago

Has this since been tested with Gatsby?

Mikołaj Smoleński staff commented 6 years ago

We're still working on it. 
Best Regards
Write
Create snippet
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
  • User: Pro
  • Premium support: No
  • Technology: MDB React
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: Yes
  • Provided link: Yes
About author
mattagape
Pro User
50Support score
7Questions 2Answers
0Snippets likes 0Snippets