Topic: Not able to deploy my Gatsby.js app to Netflify when I add mdbreact (or mdbootstrap )
mattagape pro asked 6 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
- I install it:
yarn add mdbreact
(or mdbootstrap) - 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
- I remove the
node_modules
folder and then re-install it (npm install
). - When I run
gatsby develop
again (orgatsby build
), it works. - 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. - 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 6 years ago
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 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!
cruzercru 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
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- ForumUser: Pro
- Premium support: No
- Technology: MDB React
- MDB Version: -
- Device: -
- Browser: -
- OS: -
- Provided sample code: Yes
- Provided link: Yes