Failure to Build

[creativetimofficial]

Failure to Build

[einazare]

Hello again, @Thomas-Smyth , @Leo1212 ,

Please go inside src/assets/scss/custom/_icons.scss and delete the following lines:

• width: calc(100% - $icon-size-sm - 1);
• width: calc(100% - $icon-size-lg - 1);
• width: calc(100% - $icon-size-xl - 1);
• width: calc(100% - #{$icon-size} - 1);

This should actually be src/assets/scss/core/icons/_icon.scss.

Sorry for this confusion, you are right.
Also, I've just realized that I've given you bad instructions.
To solve this issue you can also replace:

* width: calc(100% - $icon-size-sm - 1);
* width: calc(100% - $icon-size-lg - 1);
* width: calc(100% - $icon-size-xl - 1);

With

* width: calc(100% - #{$icon-size-sm} - 1);
* width: calc(100% - #{$icon-size-lg} - 1);
* width: calc(100% - #{$icon-size-xl} - 1);

And everything will work just fine.

Once again sorry for the bad info.

All the best,
Manu
ReactJS Developer at Creative-Tim.com (http://creative-tim.com/)

[einazare]

Hello there, @Thomas-Smyth @Leo1212 ,

Thank you for your interest in working with our products.
Sorry for this late response, since I am a Christian I've had some free days for the Easter Holiday:

• https://www.calendar-12.com/holidays/easter
• https://www.officeholidays.com/religious/orthodox/orthodox_easter.php

Please go inside src/assets/scss/custom/_icons.scss and delete the following lines:

• width: calc(100% - $icon-size-sm - 1);
• width: calc(100% - $icon-size-lg - 1);
• width: calc(100% - $icon-size-xl - 1);
• width: calc(100% - #{$icon-size} - 1);

Also, for deploying you will have to delete the homepage prop from the package.json file.

All the best,
Manu
ReactJS Developer at Creative-Tim.com (http://creative-tim.com/)

[Leo1212]

Same problem for me!
If I run it locally it works. But when I deploy it with Heroku I get the exact same error.

[kkragoth]

Since this package is also available on npm could you implement this fix on your side? I would prefer not to store whole package in my project's repo and writing a script that replaces code in node_modules after npm install and before npm build doesn't seem like clean idea

[anandabayu]

Hello again, @Thomas-Smyth , @Leo1212 ,

Please go inside src/assets/scss/custom/_icons.scss and delete the following lines:

• width: calc(100% - $icon-size-sm - 1);
• width: calc(100% - $icon-size-lg - 1);
• width: calc(100% - $icon-size-xl - 1);
• width: calc(100% - #{$icon-size} - 1);

This should actually be src/assets/scss/core/icons/_icon.scss.

Sorry for this confusion, you are right.
Also, I've just realized that I've given you bad instructions.
To solve this issue you can also replace:

* width: calc(100% - $icon-size-sm - 1);
* width: calc(100% - $icon-size-lg - 1);
* width: calc(100% - $icon-size-xl - 1);

With

* width: calc(100% - #{$icon-size-sm} - 1);
* width: calc(100% - #{$icon-size-lg} - 1);
* width: calc(100% - #{$icon-size-xl} - 1);

And everything will work just fine.

Once again sorry for the bad info.

All the best,
Manu
ReactJS Developer at Creative-Tim.com (http://creative-tim.com/)

Trying to help the open source community:

• https://medium.freecodecamp.org/how-to-use-reactjs-with-webpack-4-babel-7-and-material-design-ff754586f618
• https://medium.freecodecamp.org/how-to-use-redux-in-reactjs-with-real-life-examples-687ab4441b85
• https://medium.freecodecamp.org/how-to-connect-a-react-design-system-with-firebase-and-redux-9646ca1c733f
• https://www.youtube.com/watch?v=raKV5Rb8oOM&list=PLWxSJr7LCl87rGlQtTo2PoX8hboUU0R8a
• https://www.youtube.com/watch?v=no2PD2kq-dE&list=PLWxSJr7LCl87OomktWFQVW30QDWtBqFlx
• https://www.udemy.com/learn-reactjs-with-webpack-4-babel-7-and-material-design/

If you've liked what you saw, help me with a comment, like, share or subscribe.

this is solved the problem.

[Thomas-Smyth]

Please go inside src/assets/scss/custom/_icons.scss and delete the following lines:

• width: calc(100% - $icon-size-sm - 1);
• width: calc(100% - $icon-size-lg - 1);
• width: calc(100% - $icon-size-xl - 1);
• width: calc(100% - #{$icon-size} - 1);

This should actually be src/assets/scss/core/icons/_icon.scss.

[einazare]

Hello there, @GregNing ,

Thank you for your interest in working with our products.
Please read the above comments, your issue will be solved by following the steps given there.
This will be fixed in our next update.

Best,
Manu

[srbala]

Updated project dependencies, project compiles good, no need for any other code fix

  "dependencies": {
    "chart.js": "^2.9.3",
    "classnames": "^2.2.6",
    "moment": "2.24.0",
    "node-sass": "^4.13.1",
    "nouislider": "13.1.1",
    "react": "^16.12.0",
    "react-chartjs-2": "^2.9.0",
    "react-copy-to-clipboard": "^5.0.2",
    "react-datetime": "^2.16.3",
    "react-dom": "^16.12.0",
    "react-google-maps": "^9.4.5",
    "react-router-dom": "^5.1.2",
    "react-scripts": "3.3.0-next.62",
    "reactstrap": "^8.4.0"
  },
  "devDependencies": {
    "@types/googlemaps": "^3.39.2",
    "@types/markerclustererplus": "~2.1.33",
    "@types/react": "^16.9.19",
    "typescript": "~3.7.3"
  }

[srbala]

Dependency updates are good to use. production build npm run build still requires variable change. pull request #10 solves the issue.

[Thomas-Smyth]

This looks to be the problematic section of argon-dashboard-react.css that is causing the issues.

.icon-xl {
  width: 5rem;
  height: 5rem; }
  .icon-xl i, .icon-xl svg {
    font-size: 4.25rem; }
  .icon-xl + .icon-text {
    width: calc(100% - $icon-size-xl - 1); }

.icon-lg {
  width: 4rem;
  height: 4rem; }
  .icon-lg i, .icon-lg svg {
    font-size: 3.25rem; }
  .icon-lg + .icon-text {
    width: calc(100% - $icon-size-lg - 1); }

.icon-sm {
  width: 2rem;
  height: 2rem; }
  .icon-sm i, .icon-sm svg {
    font-size: 1.25rem; }
  .icon-sm + .icon-text {
    width: calc(100% - $icon-size-sm - 1); }

Manually copying those variables to the CSS file allows for a successful build.

[einazare]

Hello there, @kkragoth ,

Thank you for your interest in working with our products and for your feedback.
We'll see what we can do in our next updates.
One question, do you mean that on npm we should only put the scss/css?

Best,
Manu

[kkragoth]

@einazare I didn't mean this. I meant that in my project I import css from src/assets/css from folder of this package installed in node_modules

[einazare]

Hello again, @kkragoth ,

Could you please give me something like this:

### What are you doing now?
- Answer here (I import my css like this:, I import that component like this.. My code looks like this)
- Or, a step by step guide on what are you doing now

### What would you like to be doing?
- Answer here (I would like to import my css like this:, I would like to import that component like this..  I would like my code to look like that)
- Or, a step by step guide on what would you like to be doing

@einazare I didn't mean this. I meant that in my project I import css from src/assets/css from folder of this package installed in node_modules

At the moment, I am not sure if you say that you would like to import our css something like:

import "argon-dashboard-react.css"; // this is not possible

Also, I do not know if at the moment you are importing our css something like:

import "node_modules/argon-dashboard-react/src/assets/css/argon-dashboard-react.css"; 
// if this is the case, 
// you can easily shorten this link to 
// "argon-dashboard-react/src/assets/css/argon-dashboard-react.css", 
// but I can see how this link is a bit long, 
// and a better one would be something like 
// "argon-dashboard-react/build/style.css"

I would go with argon-dashboard-react/build/style.css, but maybe you have a better idea, that is why I've asked the first question.

Anyhow, will wait for your response.

Best,
Manu

[GregNing]

same problem here

[hlmifzi]

successfully run build but when i deploy it in netlify only blank page

[einazare]

successfully run build but when i deploy it in netlify only blank page

Hello there, @hlmifzi ,

Sorry for this late reply, I did not understood your comment ar first.
Just go ahead and delete the homepage prop from the package.json file. That will clear your issue.

Best,
Manu

[hlmifzi]

successfully run build but when i deploy it in netlify only blank page

Hello there, @hlmifzi ,

Sorry for this late reply, I did not understood your comment ar first.
Just go ahead and delete the homepage prop from the package.json file. That will clear your issue.

Best,
Manu

What did you mean homepage from package.json, I don't know what you mean?
Can you explain detail to me

[einazare]

Delete this line from package.json: "homepage": "https://demos.creative-tim.com/argon-dashboard-react/",.

[altaga]

Only change:

• $icon-size-xl
• $icon-size-lg
• $icon-size-sm
• $icon-size

with

• 5rem
• 4rem
• 2rem
• 3rem

I know it's not the best solution, but if they require your project to work, I really think it's a good temporal solution.

[Thomas-Smyth]

Are these changes doing to be seen in master anytime soon?

As some feedback to the CreativeTim people... It's rather offputting from purchasing anything from CreativeTim if you release software with blatant bugs and take almost a year to fix it. I know this is the free version, however, given it's cut down from the more advanced paid versions you would have thought it would be easier to fix... especially when a fix has been listed here and a PR has been around for months. It makes me concerned that the support for the paid versions will be equally as abysmal.

[einazare]

Hello there, @Thomas-Smyth ,

Thank you for your interest in working with our products.
That is why we have free themes, you can test them, and if they do not work the way you would expect, you will not buy the PRO version, or you can ask us how to solve those issues, if those issues are existent on the PRO products, how to fix them on the PRO products, etc.
To be honest, every time someone asks me whether they should buy a product or not, I tell them to take a look at the FREE product first and see if they are satisfied with that version, if so, then they can buy the PRO version if not, it means that our products are not made for them.

Best,
Manu

[srbala]

@einazare thanks for the update in 1.1 branch, when time permits update Readme.md page it still points to 1.0

@Thomas-Smyth Please check the 1.1 branch. you can close the issue

[einazare]

Hello there, @srbala ,

The issue will be automatically closed after the v1.1.0 will be pushed to the master branch.
I have to wait for one of my colleagues, we have a set of rules of how to update a product, and now, I can't push anything to the master branch without first checking with one of my colleagues.
The v1.1.0 will be on the master branch by the end of this day.

Best,
Manu

[rakesh-krishna]

Hello again, @Thomas-Smyth , @Leo1212 ,

Please go inside src/assets/scss/custom/_icons.scss and delete the following lines:

• width: calc(100% - $icon-size-sm - 1);
• width: calc(100% - $icon-size-lg - 1);
• width: calc(100% - $icon-size-xl - 1);
• width: calc(100% - #{$icon-size} - 1);

This should actually be src/assets/scss/core/icons/_icon.scss.

Sorry for this confusion, you are right.
Also, I've just realized that I've given you bad instructions.
To solve this issue you can also replace:

* width: calc(100% - $icon-size-sm - 1);
* width: calc(100% - $icon-size-lg - 1);
* width: calc(100% - $icon-size-xl - 1);

With

* width: calc(100% - #{$icon-size-sm} - 1);
* width: calc(100% - #{$icon-size-lg} - 1);
* width: calc(100% - #{$icon-size-xl} - 1);

And everything will work just fine.
Once again sorry for the bad info.
All the best,
Manu
ReactJS Developer at Creative-Tim.com (http://creative-tim.com/)
Trying to help the open source community:

• https://medium.freecodecamp.org/how-to-use-reactjs-with-webpack-4-babel-7-and-material-design-ff754586f618
• https://medium.freecodecamp.org/how-to-use-redux-in-reactjs-with-real-life-examples-687ab4441b85
• https://medium.freecodecamp.org/how-to-connect-a-react-design-system-with-firebase-and-redux-9646ca1c733f
• https://www.youtube.com/watch?v=raKV5Rb8oOM&list=PLWxSJr7LCl87rGlQtTo2PoX8hboUU0R8a
• https://www.youtube.com/watch?v=no2PD2kq-dE&list=PLWxSJr7LCl87OomktWFQVW30QDWtBqFlx
• https://www.udemy.com/learn-reactjs-with-webpack-4-babel-7-and-material-design/

If you've liked what you saw, help me with a comment, like, share or subscribe.

this is solved the problem.

Sorry but src/assets/scss/core/icons/_icon.scss I can't find this file