npm run build error arDominionB5Plugin

[Roger Rutishauser]

Hi,

I installed a fresh AtoM 2.7.3 (from tarball) on a Ubuntu 20.04 machine, and added package.json and webpack.config.js.

After npm install, which worked well, i ran npm run build, and got the following error. Seems like the variable $theme-colors-rgb is not defined.

ubuntu@atom:/usr/share/nginx/atom273$ npm run build

> at...@0.0.0 build
> webpack

assets by status 1.2 MiB [cached] 5 assets
orphan modules 99 KiB [orphan] 61 modules
runtime modules 1.35 KiB 6 modules
modules by path ./node_modules/ 2.23 MiB 131 modules
modules by path ./plugins/arDominionB5Plugin/ 133 KiB
  modules by path ./plugins/arDominionB5Plugin/js/*.js 102 KiB 27 modules
  ./plugins/arDominionB5Plugin/webpack.entry.js + 4 modules 30.6 KiB [built] [code generated]
  ./plugins/arDominionB5Plugin/scss/main.scss 39 bytes [built] [code generated] [1 error]
modules by path ./js/*.js 55.5 KiB
  ./js/blank.js 629 bytes [built] [code generated]
  ./js/editingHistory.js 2.18 KiB [built] [code generated]
  + 8 modules
modules by path ./vendor/yui/ 265 KiB
  ./vendor/yui/yahoo-dom-event/yahoo-dom-event.js 36 KiB [built] [code generated]
  ./vendor/yui/connection/connection.js 37 KiB [built] [code generated]
  + 2 modules

ERROR in ./plugins/arDominionB5Plugin/scss/main.scss (./plugins/arDominionB5Plugin/scss/main.scss.webpack[javascript/auto]!=!./node_modules/css-loader/dist/cjs.js!./node_modules/resolve-url-loader/index.js!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[2].use[3]!./plugins/arDominionB5Plugin/scss/main.scss)
Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Undefined variable.
   ╷
92 │       values: map-loop($theme-colors-rgb, rgba-css-var, "$key", "focus-ring")
   │                        ^^^^^^^^^^^^^^^^^
   ╵
  node_modules/bootstrap/scss/_utilities.scss 92:24  @import
  plugins/arDominionB5Plugin/scss/main.scss 8:9      root stylesheet
SassError: SassError: Undefined variable.
   ╷
92 │       values: map-loop($theme-colors-rgb, rgba-css-var, "$key", "focus-ring")
   │                        ^^^^^^^^^^^^^^^^^
   ╵
  node_modules/bootstrap/scss/_utilities.scss 92:24  @import
  plugins/arDominionB5Plugin/scss/main.scss 8:9      root stylesheet
    at Object.loader (/usr/share/nginx/atom273/node_modules/sass-loader/dist/index.js:69:14)
 @ ./plugins/arDominionB5Plugin/scss/main.scss
 @ ./plugins/arDominionB5Plugin/webpack.entry.js 2:0-26

ERROR in ./plugins/arDominionB5Plugin/scss/main.scss
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
HookWebpackError: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Undefined variable.
   ╷
92 │       values: map-loop($theme-colors-rgb, rgba-css-var, "$key", "focus-ring")
   │                        ^^^^^^^^^^^^^^^^^
   ╵
  node_modules/bootstrap/scss/_utilities.scss 92:24  @import
  plugins/arDominionB5Plugin/scss/main.scss 8:9      root stylesheet
    at tryRunOrWebpackError (/usr/share/nginx/atom273/node_modules/webpack/lib/HookWebpackError.js:88:9)
    at __webpack_require_module__ (/usr/share/nginx/atom273/node_modules/webpack/lib/Compilation.js:5067:12)
    at __webpack_require__ (/usr/share/nginx/atom273/node_modules/webpack/lib/Compilation.js:5024:18)
    at /usr/share/nginx/atom273/node_modules/webpack/lib/Compilation.js:5095:20
    at symbolIterator (/usr/share/nginx/atom273/node_modules/neo-async/async.js:3485:9)
    at done (/usr/share/nginx/atom273/node_modules/neo-async/async.js:3527:9)
    at Hook.eval [as callAsync] (eval at create (/usr/share/nginx/atom273/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:15:1)
    at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (/usr/share/nginx/atom273/node_modules/tapable/lib/Hook.js:18:14)
    at /usr/share/nginx/atom273/node_modules/webpack/lib/Compilation.js:5002:43
    at symbolIterator (/usr/share/nginx/atom273/node_modules/neo-async/async.js:3482:9)
-- inner error --
Error: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Undefined variable.
   ╷
92 │       values: map-loop($theme-colors-rgb, rgba-css-var, "$key", "focus-ring")
   │                        ^^^^^^^^^^^^^^^^^
   ╵
  node_modules/bootstrap/scss/_utilities.scss 92:24  @import
  plugins/arDominionB5Plugin/scss/main.scss 8:9      root stylesheet
    at Object.<anonymous> (/usr/share/nginx/atom273/node_modules/css-loader/dist/cjs.js!/usr/share/nginx/atom273/node_modules/resolve-url-loader/index.js!/usr/share/nginx/atom273/node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[2].use[3]!/usr/share/nginx/atom273/plugins/arDominionB5Plugin/scss/main.scss:1:7)
    at /usr/share/nginx/atom273/node_modules/webpack/lib/javascript/JavascriptModulesPlugin.js:452:10
    at Hook.eval [as call] (eval at create (/usr/share/nginx/atom273/node_modules/tapable/lib/HookCodeFactory.js:19:10), <anonymous>:7:1)
    at Hook.CALL_DELEGATE [as _call] (/usr/share/nginx/atom273/node_modules/tapable/lib/Hook.js:14:14)
    at /usr/share/nginx/atom273/node_modules/webpack/lib/Compilation.js:5069:39
    at tryRunOrWebpackError (/usr/share/nginx/atom273/node_modules/webpack/lib/HookWebpackError.js:83:7)
    at __webpack_require_module__ (/usr/share/nginx/atom273/node_modules/webpack/lib/Compilation.js:5067:12)
    at __webpack_require__ (/usr/share/nginx/atom273/node_modules/webpack/lib/Compilation.js:5024:18)
    at /usr/share/nginx/atom273/node_modules/webpack/lib/Compilation.js:5095:20
    at symbolIterator (/usr/share/nginx/atom273/node_modules/neo-async/async.js:3485:9)

Generated code for /usr/share/nginx/atom273/node_modules/css-loader/dist/cjs.js!/usr/share/nginx/atom273/node_modules/resolve-url-loader/index.js!/usr/share/nginx/atom273/node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[2].use[3]!/usr/share/nginx/atom273/plugins/arDominionB5Plugin/scss/main.scss
1 | throw new Error("Module build failed (from ./node_modules/sass-loader/dist/cjs.js):\nSassError: Undefined variable.\n   ╷\n92 │       values: map-loop($theme-colors-rgb, rgba-css-var, \"$key\", \"focus-ring\")\n   │                        ^^^^^^^^^^^^^^^^^\n   ╵\n  node_modules/bootstrap/scss/_utilities.scss 92:24  @import\n  plugins/arDominionB5Plugin/scss/main.scss 8:9      root stylesheet");
 @ ./plugins/arDominionB5Plugin/webpack.entry.js 2:0-26

webpack 5.89.0 compiled with 2 errors in 29384 ms

Cheers, Roger

[José Raddaoui]

Hi Roger,

We have seen that error before during development, without using the package-lock.json file you may get unexpected versions installed, in this case its installing Bootstrap 5.2 instead of 5.1. You should be able to fix this issue by including that file in the process too, which pins Bootstrap to version 5.1.3.

Also, instead of npm install use npm ci (clean install), just in case it's needed to remove the previous versions downloaded in node_modules.

Best,

Radda.

[Roger Rutishauser]

Thank you Radda. I missed the package-lock.json file (i thought it wasn't really nescessary as it was created automatically), but yes, in your documentation it says that it is also used... Now it works fine.