[BUG] Error in the build

[alejandrojuarez675]

I download the source code and tried to do a deploy.

when i execute 'npm run-script build' the terminal said:

Creating an optimized production build...
Failed to compile.

Lexical error on line 1: Unrecognized text.
Erroneous area:
1: 100% - $sidebar-width
^.........^

[einazare]

Hello there, @alejandrojuarez675 ,

Thank you for your interest in working with our products.
Why did you not follow our rules of opening an issue:

<!--
 IMPORTANT: Please use the following link to create a new issue:

  https://www.creative-tim.com/new-issue/light-bootstrap-dashboard-react

**If your issue was not created using the app above, it will be closed immediately.**
-->

<!--
Love Creative Tim? Do you need Angular, React, Vuejs or HTML? You can visit:
👉  https://www.creative-tim.com/bundles
👉  https://www.creative-tim.com
-->

I've just made a quick test and everything worked as expected, no error was thrown.

Best,
Manu

[DaveFerBear]

Was there ever a resolution to this? I'm having the same issue try to npm run build.

[einazare]

Hello there, @DaveFerBear ,

I've just made a quick test and everything worked as expected, no error was thrown.
Please provide me with the following video:

• Download the product
• Unzip the product
• Open terminal and cd into the project
• Run node -v
• Run npm -v
• [Mac/Ubuntu/Linux] Run npm run install:clean
• [Widnows] Run npm install
• [Widnows] Run npm start
• Showcase the issue

Best,
Manu

[jackbilestech]

Hey All,
@einazare i've managed to find a way for this to compile.

I was able to trackdown in _navbars.scss where the issue was arising. On compilation the output file would contain a $sidebar-width variable which the react-build componnet seems to not understand potentially explaining why the build and start command worked differently.

https://stackoverflow.com/questions/17982111/sass-variable-in-css-calc-function - A similar issue was mentioned here. Because we were performing a calc operation, interpolation is needed for this type of compiler.

Using the below injection builds and compiles fine. Tested with both npm run compile-sass, npm run build & npm run start.

_navbars.scss

&.fixed{
        //width: calc(100% - $sidebar-width); // No Interpolation
        width: calc(100% - #{$sidebar-width}); //Interpolate
        right: 0;
        left: auto;
        border-radius: 0;
    }

Hope this helps and i haven't broken something else....

[crisecheverria]

After the update with the Interpolation from @jackbilestech it worked:

Im using:

"react": "16.13.1",
"react-dom": "16.13.1",
"react-scripts": "3.4.1",
"@types/react": "16.9.41",
"typescript": "3.9.6"