search

creativetimofficial / argon-dashboard-react

React version of Argon Dashboard
MIT License
442 stars 736 forks source link

Failure to Build #3

Closed Thomas-Smyth closed 4 years ago

Thomas-Smyth commented 5 years ago

Prerequisites

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.

Failure Logs

See above.

Thomas-Smyth commented 5 years ago

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 commented 5 years ago

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 commented 5 years ago

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:

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 commented 5 years ago

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 commented 5 years ago

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 commented 5 years ago

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 commented 5 years ago

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 commented 5 years ago

@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 commented 5 years ago

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 commented 5 years ago

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:

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

this is solved the problem.

GregNing commented 4 years ago

same problem here

einazare commented 4 years ago

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

hlmifzi commented 4 years ago

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

einazare commented 4 years ago

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 commented 4 years ago

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 commented 4 years ago

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

altaga commented 4 years ago

Only change:

with

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 commented 4 years ago

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 commented 4 years ago

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

Thomas-Smyth commented 4 years ago

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 commented 4 years ago

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 commented 4 years ago

@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 commented 4 years ago

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 commented 2 years ago

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:

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