Production build is not working on fresh project

[Nicceboy]

Expected Behavior

I'm trying to compile production build and I except it work from scratch. It has been done for fresh clone from the repository.
However, it ends into error.

Current Behavior

After cloning, I install node modules and try to run production build, it ends into error:

Lexical error on line 1: Unrecognized text.
  Erroneous area:
1: 100% - auto - 1
^.........^

I figured out that this might be related to CSS function calc(), where 'auto' might not be usable. However, even after modifying or removing those CSS parts what I was able to find, error still appeared.

Failure Information (for bugs)

Following error messages appear:

nicce@workstation ~/D/blk-design-system-react> npm run build

> [email protected] build /home/nicce/Documents/blk-design-system-react
> react-scripts build

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

Lexical error on line 1: Unrecognized text.
  Erroneous area:
1: 100% - auto - 1
^.........^

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] build: `react-scripts build`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the [email protected] build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/nicce/.npm/_logs/2019-03-10T23_34_16_078Z-debug.log

Steps to Reproduce

1. Clone repository
2. Install modules npm install
3. Build for production npm run build

Context

• npm version: 6.9.0
• nodejs version: v10.15.3
• Operating System: Arch Linux - kernel 5.0.0-arch1-1-ARCH

Failure Logs

Content of log file:

nicce@workstation ~/D/blk-design-system-react> cat /home/nicce/.npm/_logs/2019-03-10T23_34_16_078Z-debug.log
                                               
0 info it worked if it ends with ok
1 verbose cli [ '/usr/bin/node', '/usr/bin/npm', 'run', 'build' ]
2 info using [email protected]
3 info using [email protected]
4 verbose run-script [ 'prebuild', 'build', 'postbuild' ]
5 info lifecycle [email protected]~prebuild: [email protected]
6 info lifecycle [email protected]~build: [email protected]
7 verbose lifecycle [email protected]~build: unsafe-perm in lifecycle true
8 verbose lifecycle [email protected]~build: PATH: /usr/lib/node_modules/npm/node_modules/npm-lifecycle/node-gyp-bin:/home/nicce/Documents/blk-design-system-react/node_modules/.bin:/usr/local/bin:/usr/bin:/bin:/usr/local/sbin:/usr/lib/jvm/default/bin:/usr/bin/site_perl:/usr/bin/vendor_perl:/usr/bin/core_perl:/var/lib/snapd/snap/bin
9 verbose lifecycle [email protected]~build: CWD: /home/nicce/Documents/blk-design-system-react
10 silly lifecycle [email protected]~build: Args: [ '-c', 'react-scripts build' ]
11 silly lifecycle [email protected]~build: Returned: code: 1  signal: null
12 info lifecycle [email protected]~build: Failed to exec build script
13 verbose stack Error: [email protected] build: `react-scripts build`
13 verbose stack Exit status 1
13 verbose stack     at EventEmitter.<anonymous> (/usr/lib/node_modules/npm/node_modules/npm-lifecycle/index.js:301:16)
13 verbose stack     at EventEmitter.emit (events.js:189:13)
13 verbose stack     at ChildProcess.<anonymous> (/usr/lib/node_modules/npm/node_modules/npm-lifecycle/lib/spawn.js:55:14)
13 verbose stack     at ChildProcess.emit (events.js:189:13)
13 verbose stack     at maybeClose (internal/child_process.js:970:16)
13 verbose stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:259:5)
14 verbose pkgid [email protected]
15 verbose cwd /home/nicce/Documents/blk-design-system-react
16 verbose Linux 5.0.0-arch1-1-ARCH
17 verbose argv "/usr/bin/node" "/usr/bin/npm" "run" "build"
18 verbose node v10.15.3
19 verbose npm  v6.9.0
20 error code ELIFECYCLE
21 error errno 1
22 error [email protected] build: `react-scripts build`
22 error Exit status 1
23 error Failed at the [email protected] build script.
23 error This is probably not a problem with npm. There is likely additional logging output above.
24 verbose exit [ 1, true ]

[einazare]

Hello there @Nicceboy ,

Thank you for your interest in working with our products.
Please go inside src/assets/scss/blk-design-system-react/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);

Hope this helps.

Best,
Manu

[Nicceboy]

Hello there @Nicceboy ,

Thank you for your interest in working with our products.
Please go inside src/assets/scss/blk-design-system-react/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);`

Hope this helps.

Best,
Manu

Thank you. Removal of these fixed it.

Creating an optimized production build...
Compiled successfully.

[fachrezamuslim]

@einazare thank you, its work for me too

[frknasir]

• width: calc(100% - $icon-size-sm - 1);

this did it for me...thank you

[Mottoweb]

Worked thanks, but this isn't merged?

[einazare]

Hello there, @Mottoweb ,

At the moment it is not merged.
I'll see if I can update the product by the end of this year.

Best,
Manu

[Shakil97]

Thank you so much. it's working perfectly after build.