Failure to Build #3

Thomas-Smyth · 2019-04-27T15:32:17Z

Prerequisites

I am running the latest version
I checked the documentation and found no answer
I checked to make sure that this issue has not already been filed
I'm reporting the issue to the correct repository (for multi-repository projects)

Expected Behavior

React build to produce a successful build for deployment.

Current Behavior

React build error:

yarn run build
yarn run v1.12.3
$ react-scripts build
Creating an optimized production build...
Failed to compile.

Lexical error on line 1: Unrecognized text.
  Erroneous area:
1: 100% - $icon-size-xl - 1
^.........^


error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

Failure Information (for bugs)

See above.

Steps to Reproduce

Simply running the yarn run build command throws this error.

Context

I have made very few changes from the original download and none of these revolves around the SCSS / CSS. Edit - Just tested with the original copy I downloaded from your website and it throws the same error when building.

Device: Desktop PC
Operating System: Windows 10
Browser and Version: N/A

Failure Logs

See above.

The text was updated successfully, but these errors were encountered:

Thomas-Smyth · 2019-04-27T15:42:43Z

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.

Leo1212 · 2019-04-29T22:04:59Z

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

einazare · 2019-04-30T07:33:16Z

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:

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/)

Thomas-Smyth · 2019-05-04T19:14:26Z

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 · 2019-05-06T07:31:05Z

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/)

kkragoth · 2019-05-29T15:53:33Z

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

einazare · 2019-05-30T06:04:33Z

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 · 2019-05-30T17:30:42Z

@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 · 2019-05-31T06:09:12Z

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

anandabayu · 2019-07-24T15:30:31Z

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.

GregNing · 2019-09-16T10:46:55Z

same problem here

einazare · 2019-09-16T11:32:27Z

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

creativetimofficial/argon-dashboard-react#3

hlmifzi · 2019-11-13T16:11:15Z

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

einazare · 2019-11-15T08:59:40Z

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 · 2019-11-15T11:09:27Z

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 · 2019-11-15T12:34:41Z

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

altaga · 2020-01-22T10:46:57Z

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.

srbala · 2020-01-27T15:15:57Z

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 · 2020-01-27T20:16:31Z

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

Closes #17 Closes #15 Closes #12 Closes #3

Thomas-Smyth · 2020-02-09T12:44:33Z

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 · 2020-02-10T09:06:18Z

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 · 2020-02-10T10:55:17Z

@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 · 2020-02-10T12:18:04Z

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 · 2021-12-24T12:25:01Z

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

einazare closed this as completed Apr 30, 2019

einazare reopened this Apr 30, 2019

einazare added the bug Something isn't working label Apr 30, 2019

This was referenced Jun 24, 2019

Error when starting apps (build success) #4

Closed

[Bug] Error when starting apps (build success) #5

Closed

[Bug] Build success without any error, but app blank. #6

Closed

wesleyacheng mentioned this issue Jul 27, 2019

fix npm build bug #10

Merged

fashan00 pushed a commit to fashan00/Wordtime that referenced this issue Nov 7, 2019

argon-dashboard-react Failure to Build

4ed8564

creativetimofficial/argon-dashboard-react#3

einazare added a commit that referenced this issue Feb 7, 2020

docs(): add new gh issue

269a180

Closes #17 Closes #15 Closes #12 Closes #3

einazare mentioned this issue Feb 7, 2020

Feature: Update dependencies #20

Merged

einazare mentioned this issue Feb 10, 2020

Feature: Update dependencies #21

Merged

dragosct closed this as completed in #21 Feb 10, 2020

einazare mentioned this issue Mar 4, 2021

installing into current project using npm #16

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Failure to Build #3

Failure to Build #3

Thomas-Smyth commented Apr 27, 2019 •

edited

Loading

Thomas-Smyth commented Apr 27, 2019 •

edited

Loading

Leo1212 commented Apr 29, 2019

einazare commented Apr 30, 2019 •

edited

Loading

Thomas-Smyth commented May 4, 2019

einazare commented May 6, 2019 •

edited

Loading

kkragoth commented May 29, 2019

einazare commented May 30, 2019

kkragoth commented May 30, 2019

einazare commented May 31, 2019 •

edited

Loading

anandabayu commented Jul 24, 2019

GregNing commented Sep 16, 2019

einazare commented Sep 16, 2019

hlmifzi commented Nov 13, 2019

einazare commented Nov 15, 2019

hlmifzi commented Nov 15, 2019

einazare commented Nov 15, 2019

altaga commented Jan 22, 2020

srbala commented Jan 27, 2020

srbala commented Jan 27, 2020

Thomas-Smyth commented Feb 9, 2020 •

edited

Loading

einazare commented Feb 10, 2020

srbala commented Feb 10, 2020

einazare commented Feb 10, 2020

rakesh-krishna commented Dec 24, 2021

Failure to Build #3

Failure to Build #3

Comments

Thomas-Smyth commented Apr 27, 2019 • edited Loading

Prerequisites

Expected Behavior

Current Behavior

Failure Information (for bugs)

Steps to Reproduce

Context

Failure Logs

Thomas-Smyth commented Apr 27, 2019 • edited Loading

Leo1212 commented Apr 29, 2019

einazare commented Apr 30, 2019 • edited Loading

Thomas-Smyth commented May 4, 2019

einazare commented May 6, 2019 • edited Loading

kkragoth commented May 29, 2019

einazare commented May 30, 2019

kkragoth commented May 30, 2019

einazare commented May 31, 2019 • edited Loading

anandabayu commented Jul 24, 2019

GregNing commented Sep 16, 2019

einazare commented Sep 16, 2019

hlmifzi commented Nov 13, 2019

einazare commented Nov 15, 2019

hlmifzi commented Nov 15, 2019

einazare commented Nov 15, 2019

altaga commented Jan 22, 2020

srbala commented Jan 27, 2020

srbala commented Jan 27, 2020

Thomas-Smyth commented Feb 9, 2020 • edited Loading

einazare commented Feb 10, 2020

srbala commented Feb 10, 2020

einazare commented Feb 10, 2020

rakesh-krishna commented Dec 24, 2021

Thomas-Smyth commented Apr 27, 2019 •

edited

Loading

Thomas-Smyth commented Apr 27, 2019 •

edited

Loading

einazare commented Apr 30, 2019 •

edited

Loading

einazare commented May 6, 2019 •

edited

Loading

einazare commented May 31, 2019 •

edited

Loading

Thomas-Smyth commented Feb 9, 2020 •

edited

Loading