After yarn add hamburgers the build process is broken

sage9
webpack

#1

Hey everyone.
I want to try the Hamburger Menu and after adding it with yarn add i get a warning:
stylelint-webpack-plugin@0.10.5" has incorrect peer dependency “webpack@^1.13.2 || ^2.7.0 || ^3.11.0 || ^4.4.0”. My Mac was on yarn 1.7.0 and it was out of date. Ok.
So i run yarn start again to continue working, but the build process faild with an error:

ERROR  Failed to compile with 1 errors                                                                                                                                                             22:29:09

 error  in ./resources/assets/styles/main.scss

Module build failed:
  line-height: $line-height-normal;
              ^
      Undefined variable: "$line-height-normal".
      in /Users/timo/Websites/bagkr/wp-content/themes/bagkr/resources/assets/styles/common/_global.scss (line 41, column 16)

 @ ./resources/assets/styles/main.scss 2:14-358 21:1-42:3 22:19-363
 @ multi ./resources/assets/build/util/../helpers/hmr-client.js ./scripts/main.js ./styles/main.scss

I removed the hamburger menu but the error is still there. After i updatet yarn from 1.7.0 to 1.9.4 but it did not help. I also update npm to npm@6.3.0 and i use stylelint-webpack-plugin@0.10.5.

When i do yarn build:production the error is still there:

MacBook-Pro-2:bagkr timo$ yarn build:production
yarn run v1.9.4
$ webpack --progress -p --config resources/assets/build/webpack.config.js
 11% building modules 15/16 modules 1 active ...gkr/resources/assets/styles/main.scssWARNING: The `text-hide()` mixin has been deprecated as of v4.1.0. It will be removed entirely in v5.
         on line 10 of node_modules/bootstrap/scss/mixins/_text-hide.scss, in mixin `text-hide`
         from line 57 of node_modules/bootstrap/scss/utilities/_text.scss
         from line 14 of node_modules/bootstrap/scss/_utilities.scss
         from line 41 of node_modules/bootstrap/scss/bootstrap.scss
         from line 4 of resources/assets/styles/autoload/_bootstrap.scss
         from line 4 of stdin

 11% building modules 16/17 modules 1 active ...gkr/resources/assets/styles/main.scssWARNING: The `text-hide()` mixin has been deprecated as of v4.1.0. It will be removed entirely in v5.
         on line 10 of node_modules/bootstrap/scss/mixins/_text-hide.scss, in mixin `text-hide`
         from line 57 of node_modules/bootstrap/scss/utilities/_text.scss
         from line 14 of node_modules/bootstrap/scss/_utilities.scss
         from line 41 of node_modules/bootstrap/scss/bootstrap.scss
         from line 4 of resources/assets/styles/autoload/_bootstrap.scss
         from line 4 of stdin

 94% asset optimization

 ERROR  Failed to compile with 2 errors                                                                                                                                                             00:46:33

 error  in ./resources/assets/styles/main.scss

Module build failed: ModuleBuildError: Module build failed:
  line-height: $line-height-normal;
              ^
      Undefined variable: "$line-height-normal".
      in /Users/timo/Websites/bagkr/wp-content/themes/bagkr/resources/assets/styles/common/_global.scss (line 41, column 16)
    at runLoaders (/Users/timo/Websites/bagkr/wp-content/themes/bagkr/node_modules/webpack/lib/NormalModule.js:195:19)
    at /Users/timo/Websites/bagkr/wp-content/themes/bagkr/node_modules/loader-runner/lib/LoaderRunner.js:364:11
    at /Users/timo/Websites/bagkr/wp-content/themes/bagkr/node_modules/loader-runner/lib/LoaderRunner.js:230:18
    at context.callback (/Users/timo/Websites/bagkr/wp-content/themes/bagkr/node_modules/loader-runner/lib/LoaderRunner.js:111:13)
    at Object.asyncSassJobQueue.push [as callback] (/Users/timo/Websites/bagkr/wp-content/themes/bagkr/node_modules/sass-loader/lib/loader.js:55:13)
    at Object.done [as callback] (/Users/timo/Websites/bagkr/wp-content/themes/bagkr/node_modules/neo-async/async.js:7974:18)
    at options.error (/Users/timo/Websites/bagkr/wp-content/themes/bagkr/node_modules/node-sass/lib/index.js:294:32)

 @ multi ./scripts/main.js ./styles/main.scss

 error  in ./resources/assets/styles/main.scss

Module build failed: ModuleBuildError: Module build failed:
  line-height: $line-height-normal;
              ^
      Undefined variable: "$line-height-normal".
      in /Users/timo/Websites/bagkr/wp-content/themes/bagkr/resources/assets/styles/common/_global.scss (line 41, column 16)
    at runLoaders (/Users/timo/Websites/bagkr/wp-content/themes/bagkr/node_modules/webpack/lib/NormalModule.js:195:19)
    at /Users/timo/Websites/bagkr/wp-content/themes/bagkr/node_modules/loader-runner/lib/LoaderRunner.js:364:11
    at /Users/timo/Websites/bagkr/wp-content/themes/bagkr/node_modules/loader-runner/lib/LoaderRunner.js:230:18
    at context.callback (/Users/timo/Websites/bagkr/wp-content/themes/bagkr/node_modules/loader-runner/lib/LoaderRunner.js:111:13)
    at Object.asyncSassJobQueue.push [as callback] (/Users/timo/Websites/bagkr/wp-content/themes/bagkr/node_modules/sass-loader/lib/loader.js:55:13)
    at Object.done [as callback] (/Users/timo/Websites/bagkr/wp-content/themes/bagkr/node_modules/neo-async/async.js:7974:18)
    at options.error (/Users/timo/Websites/bagkr/wp-content/themes/bagkr/node_modules/node-sass/lib/index.js:294:32)

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

I have not see such thing before & i searched on yarn and other sites for an answer, but i cant find anything. Do you have a tip for me?

I use sage 9.0.1 with bootstrap 4.1.0 on localhost (mac 10.13.3)

thank you in advance and please excuse my bad english


#2

You’re using a variable before defining it $line-height-normal. Try swapping that for a normal value, or define it before using it.


#3

Thanks bdmason, your are wright.
Strange was only that variable with a value existed and yet was not recognized. I had to rewrite and save it and it worked.

thanks again