Build error for code configuration

Post Reply
collinn
Posts: 2
Joined: 17 Mar 2022, 07:50

22 Mar 2022, 06:06

I get this incredibly long build/compile error when trying to run the designer in the code configuration. Note, the visual editor runs just fine, this only happens when I try and run "ng serve --configuration code". How do I get this to build/compile correctly? I need the code editor.

Code: Select all

./src/styles.scss - Error: Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
HookWebpackError: Module build failed (from ./node_modules/@ngtools/webpack/src/ivy/index.js):
Transform failed with 1 error:
error: Invalid version: "15.2-15.3"
    at tryRunOrWebpackError (/Users/collinneugebauer/Desktop/Aleran/primeng-designer-13.0.0/node_modules/webpack/lib/HookWebpackError.js:88:9)
    at __webpack_require_module__ (/Users/collinneugebauer/Desktop/Aleran/primeng-designer-13.0.0/node_modules/webpack/lib/Compilation.js:4979:12)
    at __webpack_require__ (/Users/collinneugebauer/Desktop/Aleran/primeng-designer-13.0.0/node_modules/webpack/lib/Compilation.js:4936:18)
    at Module.<anonymous> (/Users/collinneugebauer/Desktop/Aleran/primeng-designer-13.0.0/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[3].rules[0].oneOf[1].use[1]!/Users/collinneugebauer/Desktop/Aleran/primeng-designer-13.0.0/node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[3].rules[0].oneOf[1].use[2]!/Users/collinneugebauer/Desktop/Aleran/primeng-designer-13.0.0/node_modules/resolve-url-loader/index.js??ruleSet[1].rules[3].rules[1].use[0]!/Users/collinneugebauer/Desktop/Aleran/primeng-designer-13.0.0/node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[3].rules[1].use[1]!/Users/collinneugebauer/Desktop/Aleran/primeng-designer-13.0.0/src/styles.scss:5:111)
    at /Users/collinneugebauer/Desktop/Aleran/primeng-designer-13.0.0/node_modules/webpack/lib/javascript/JavascriptModulesPlugin.js:432:11
    at Hook.eval [as call] (eval at create (/Users/collinneugebauer/Desktop/Aleran/primeng-designer-13.0.0/node_modules/tapable/lib/HookCodeFactory.js:19:10), <anonymous>:7:1)
    at /Users/collinneugebauer/Desktop/Aleran/primeng-designer-13.0.0/node_modules/webpack/lib/Compilation.js:4981:39
    at tryRunOrWebpackError (/Users/collinneugebauer/Desktop/Aleran/primeng-designer-13.0.0/node_modules/webpack/lib/HookWebpackError.js:83:7)
    at __webpack_require_module__ (/Users/collinneugebauer/Desktop/Aleran/primeng-designer-13.0.0/node_modules/webpack/lib/Compilation.js:4979:12)
    at __webpack_require__ (/Users/collinneugebauer/Desktop/Aleran/primeng-designer-13.0.0/node_modules/webpack/lib/Compilation.js:4936:18)
-- inner error --
Error: Module build failed (from ./node_modules/@ngtools/webpack/src/ivy/index.js):
Transform failed with 1 error:
error: Invalid version: "15.2-15.3"
    at Object.<anonymous> (/Users/collinneugebauer/Desktop/Aleran/primeng-designer-13.0.0/node_modules/@angular-devkit/build-angular/src/babel/webpack-loader.js??ruleSet[1].rules[1].use[0]!/Users/collinneugebauer/Desktop/Aleran/primeng-designer-13.0.0/node_modules/@ngtools/webpack/src/ivy/index.js!/Users/collinneugebauer/Desktop/Aleran/primeng-designer-13.0.0/node_modules/css-loader/dist/runtime/noSourceMaps.js:1:7)
    at /Users/collinneugebauer/Desktop/Aleran/primeng-designer-13.0.0/node_modules/webpack/lib/javascript/JavascriptModulesPlugin.js:432:11
    at Hook.eval [as call] (eval at create (/Users/collinneugebauer/Desktop/Aleran/primeng-designer-13.0.0/node_modules/tapable/lib/HookCodeFactory.js:19:10), <anonymous>:7:1)
    at /Users/collinneugebauer/Desktop/Aleran/primeng-designer-13.0.0/node_modules/webpack/lib/Compilation.js:4981:39
    at tryRunOrWebpackError (/Users/collinneugebauer/Desktop/Aleran/primeng-designer-13.0.0/node_modules/webpack/lib/HookWebpackError.js:83:7)
    at __webpack_require_module__ (/Users/collinneugebauer/Desktop/Aleran/primeng-designer-13.0.0/node_modules/webpack/lib/Compilation.js:4979:12)
    at __webpack_require__ (/Users/collinneugebauer/Desktop/Aleran/primeng-designer-13.0.0/node_modules/webpack/lib/Compilation.js:4936:18)
    at Module.<anonymous> (/Users/collinneugebauer/Desktop/Aleran/primeng-designer-13.0.0/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[3].rules[0].oneOf[1].use[1]!/Users/collinneugebauer/Desktop/Aleran/primeng-designer-13.0.0/node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[3].rules[0].oneOf[1].use[2]!/Users/collinneugebauer/Desktop/Aleran/primeng-designer-13.0.0/node_modules/resolve-url-loader/index.js??ruleSet[1].rules[3].rules[1].use[0]!/Users/collinneugebauer/Desktop/Aleran/primeng-designer-13.0.0/node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[3].rules[1].use[1]!/Users/collinneugebauer/Desktop/Aleran/primeng-designer-13.0.0/src/styles.scss:5:111)
    at /Users/collinneugebauer/Desktop/Aleran/primeng-designer-13.0.0/node_modules/webpack/lib/javascript/JavascriptModulesPlugin.js:432:11
    at Hook.eval [as call] (eval at create (/Users/collinneugebauer/Desktop/Aleran/primeng-designer-13.0.0/node_modules/tapable/lib/HookCodeFactory.js:19:10), <anonymous>:7:1)

Generated code for /Users/collinneugebauer/Desktop/Aleran/primeng-designer-13.0.0/node_modules/@angular-devkit/build-angular/src/babel/webpack-loader.js??ruleSet[1].rules[1].use[0]!/Users/collinneugebauer/Desktop/Aleran/primeng-designer-13.0.0/node_modules/@ngtools/webpack/src/ivy/index.js!/Users/collinneugebauer/Desktop/Aleran/primeng-designer-13.0.0/node_modules/css-loader/dist/runtime/noSourceMaps.js
1 | throw new Error("Module build failed (from ./node_modules/@ngtools/webpack/src/ivy/index.js):\nTransform failed with 1 error:\nerror: Invalid version: \"15.2-15.3\"");

Generated code for /Users/collinneugebauer/Desktop/Aleran/primeng-designer-13.0.0/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[3].rules[0].oneOf[1].use[1]!/Users/collinneugebauer/Desktop/Aleran/primeng-designer-13.0.0/node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[3].rules[0].oneOf[1].use[2]!/Users/collinneugebauer/Desktop/Aleran/primeng-designer-13.0.0/node_modules/resolve-url-loader/index.js??ruleSet[1].rules[3].rules[1].use[0]!/Users/collinneugebauer/Desktop/Aleran/primeng-designer-13.0.0/node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[3].rules[1].use[1]!/Users/collinneugebauer/Desktop/Aleran/primeng-designer-13.0.0/src/styles.scss
 1 | __webpack_require__.r(__webpack_exports__);
 2 | /* harmony export */ __webpack_require__.d(__webpack_exports__, {
 3 | /* harmony export */   "default": () => (__WEBPACK_DEFAULT_EXPORT__)
 4 | /* harmony export */ });
 5 | /* harmony import */ var _node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__("/Users/collinneugebauer/Desktop/Aleran/primeng-designer-13.0.0/node_modules/@angular-devkit/build-angular/src/babel/webpack-loader.js??ruleSet[1].rules[1].use[0]!/Users/collinneugebauer/Desktop/Aleran/primeng-designer-13.0.0/node_modules/@ngtools/webpack/src/ivy/index.js!/Users/collinneugebauer/Desktop/Aleran/primeng-designer-13.0.0/node_modules/css-loader/dist/runtime/noSourceMaps.js");
 6 | /* harmony import */ var _node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0__);
 7 | /* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__("/Users/collinneugebauer/Desktop/Aleran/primeng-designer-13.0.0/node_modules/@angular-devkit/build-angular/src/babel/webpack-loader.js??ruleSet[1].rules[1].use[0]!/Users/collinneugebauer/Desktop/Aleran/primeng-designer-13.0.0/node_modules/@ngtools/webpack/src/ivy/index.js!/Users/collinneugebauer/Desktop/Aleran/primeng-designer-13.0.0/node_modules/css-loader/dist/runtime/api.js");
 8 | /* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__);
 9 | // Imports
10 | 
11 | 
12 | var ___CSS_LOADER_EXPORT___ = _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default()((_node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default()));
13 | // Module
14 | ___CSS_LOADER_EXPORT___.push([module.id, "html {\n  font-size: 14px;\n  height: 100%;\n}\n\nbody {\n  font-family: var(--font-family, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\");\n  background-color: var(--surface-ground);\n  color: var(--text-color);\n  font-size: 14px;\n  padding: 0;\n  margin: 0;\n  min-height: 100%;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n}\n\nbody.layout-scroll-block {\n  overflow: hidden;\n}\n\na {\n  text-decoration: none;\n}\n\nh1, h2, h3, h4, h5, h6 {\n  margin: 1.5rem 0 1rem 0;\n  font-family: inherit;\n  font-weight: 600;\n  line-height: 1.2;\n  color: inherit;\n}\n\nh1:first-child, h2:first-child, h3:first-child, h4:first-child, h5:first-child, h6:first-child {\n  margin-top: 0;\n}\n\nh1 {\n  font-size: 2.5rem;\n}\n\nh2 {\n  font-size: 2rem;\n}\n\nh3 {\n  font-size: 1.75rem;\n}\n\nh4 {\n  font-size: 1.5rem;\n}\n\nh5 {\n  font-size: 1.25rem;\n}\n\nh6 {\n  font-size: 1rem;\n}\n\np {\n  line-height: 1.75;\n  margin: 0 0 1rem 0;\n}\n\n.p-toast.p-toast-topright {\n  z-index: 10000;\n  top: 90px;\n  right: 28px;\n}\n\n.layout-wrapper .layout-topbar {\n  background-color: var(--surface-card);\n  color: var(--text-color);\n  height: 50px;\n  position: fixed;\n  left: 0;\n  top: 0;\n  width: 100%;\n  z-index: 997;\n  padding-left: 350px;\n  box-shadow: 0 0 4px rgba(0, 0, 0, 0.25);\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n}\n\n.layout-wrapper .layout-topbar .action-icon {\n  color: var(--text-secondary-color);\n}\n\n.layout-wrapper .layout-topbar .action-icon.menu-icon {\n  margin-left: 2rem;\n  display: none;\n  width: 2.5rem;\n  height: 2.5rem;\n}\n\n.layout-wrapper .layout-topbar .action-icon.menu-icon i {\n  font-size: 1.5rem;\n}\n\n.layout-wrapper .layout-topbar .action-icon.home-icon {\n  margin-left: 2rem;\n}\n\n.layout-wrapper .layout-topbar .action-icon.home-icon i {\n  font-size: 1rem;\n}\n\n.layout-wrapper .layout-topbar .action-icon:hover {\n  background: var(--surface-hover);\n}\n\n.layout-wrapper .layout-topbar .route-link {\n  color: var(--text-secondary-color);\n  display: block;\n  padding: 0.5rem 1rem;\n  border-radius: 4px;\n  text-decoration: none;\n  transition: background-color 0.2s;\n  margin: 0 2rem 0 auto;\n}\n\n.layout-wrapper .layout-topbar .route-link:hover {\n  background: var(--surface-hover);\n}\n\n.layout-wrapper .layout-editor {\n  position: fixed;\n  width: 350px;\n  height: 100%;\n  left: 0;\n  top: 0;\n  z-index: 999;\n  background-color: var(--surface-card);\n  color: var(--text-color);\n  border-right: 1px solid var(--surface-border);\n  transition: transform 0.4s cubic-bezier(0.05, 0.74, 0.2, 0.99);\n}\n\n.layout-wrapper .layout-editor .layout-editor-top {\n  height: 50px;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n}\n\n.layout-wrapper .layout-editor .layout-editor-top .logo {\n  width: 150px;\n}\n\n.layout-wrapper .layout-editor p {\n  font-size: 0.875rem;\n  margin-top: 1rem;\n  padding: 1rem;\n  border-radius: 6px;\n  background-color: var(--surface-ground);\n  border: 2px dashed var(--surface-border);\n  color: var(--text-color-secondary);\n}\n\n.layout-wrapper .layout-editor p a {\n  color: #2196F3;\n}\n\n.layout-wrapper .layout-editor p a:hover {\n  text-decoration: underline;\n}\n\n.layout-wrapper .layout-editor .editor-field {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 0.5rem 0;\n}\n\n.layout-wrapper .layout-editor .editor-field label {\n  font-size: 0.857rem;\n}\n\n.layout-wrapper .layout-editor .editor-field input {\n  text-align: right;\n  -webkit-appearance: none;\n          appearance: none;\n  border: 0 none;\n  background-color: var(--surface-border);\n  border-radius: 4px;\n  font-size: 1rem;\n}\n\n.layout-wrapper .layout-editor .editor-field input[type=text] {\n  padding: 0.5rem;\n  color: var(--text-color);\n}\n\n.layout-wrapper .layout-editor .layout-editor-panel {\n  overflow: auto;\n  height: 100%;\n  padding: 0 1.5rem 1.5rem 1.5rem;\n}\n\n.layout-wrapper .layout-editor .config-scale {\n  display: flex;\n  align-items: center;\n  margin: 1rem 0 2rem 0;\n}\n\n.layout-wrapper .layout-editor .config-scale .p-button {\n  margin-right: 0.5rem;\n}\n\n.layout-wrapper .layout-editor .config-scale i {\n  margin-right: 0.5rem;\n  font-size: 0.75rem;\n  color: var(--text-color-secondary);\n}\n\n.layout-wrapper .layout-editor .config-scale i.scale-active {\n  font-size: 1.25rem;\n  color: #2196F3;\n}\n\n.layout-wrapper .layout-content {\n  margin-left: 350px;\n  padding: 6rem 2rem 2rem 2rem;\n  background-color: var(--surface-ground);\n}\n\n.layout-wrapper .layout-footer {\n  width: 100%;\n  background: var(--surface-card);\n  padding: 1rem;\n  padding-left: 374px;\n  border-top: 1px solid var(--surface-border);\n  color: var(--text-secondary-color);\n}\n\n.layout-wrapper .action-icon {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 2rem;\n  height: 2rem;\n  border-radius: 50%;\n  transition: background-color 0.15s;\n  cursor: pointer;\n}\n\n.layout-wrapper .action-icon.action-restart {\n  background-color: #2194f3;\n  color: #ffffff;\n}\n\n.layout-wrapper .action-icon.action-restart:hover {\n  background-color: #0d87ec;\n}\n\n.layout-wrapper .action-icon.action-download {\n  background-color: #f37f21;\n  color: #ffffff;\n}\n\n.layout-wrapper.layout-editor-code .layout-topbar {\n  padding-left: 2rem;\n}\n\n.layout-wrapper.layout-editor-code .layout-content {\n  margin-left: 0;\n}\n\n.layout-wrapper.layout-editor-code .layout-footer {\n  padding-left: 2rem;\n}\n\napp-intro {\n  z-index: 1000;\n  position: fixed;\n}\n\n.layout-intro {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 100%;\n  width: 100%;\n  flex-direction: column;\n  color: rgba(255, 255, 255, 0.8);\n  z-index: 1000;\n  position: fixed;\n  left: 0;\n  top: 0;\n  background-image: linear-gradient(-225deg, #AC32E4 0%, #7918F2 48%, #4801FF 100%);\n}\n\n.layout-intro .intro-title {\n  font-weight: 300;\n  animation: fadeInDown 1s;\n}\n\n.layout-intro .intro-title i {\n  font-size: 1.75rem;\n}\n\n.theme-options {\n  display: flex;\n  align-items: center;\n  padding: 0 2rem;\n  margin: 0 auto;\n}\n\n.theme-option {\n  padding: 2rem;\n}\n\n.theme-option a {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  background-color: transparent;\n  box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);\n  border: 0 none;\n  transition: transform 0.3s;\n}\n\n.theme-option a:hover {\n  transform: scale(1.1);\n}\n\n.theme-option a img {\n  width: 50px;\n}\n\n.theme-option.theme-option {\n  animation: fadeInUp 1s;\n}\n\n.theme-option.theme-option.theme-option-leave {\n  animation: fadeOut 1s forwards;\n}\n\n.p-tooltip.intro {\n  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;\n}\n\n.p-tooltip.intro .p-tooltip-text {\n  background: #212121;\n  color: #ffffff;\n  padding: 0.5rem;\n  box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);\n  border-radius: 4px;\n}\n\n.p-tooltip.intro.p-tooltip-bottom .p-tooltip-arrow {\n  border-bottom-color: transparent;\n}\n\n@keyframes fadeInUp {\n  from {\n    opacity: 0;\n    transform: translate3d(0, 50%, 0);\n  }\n  to {\n    opacity: 1;\n    transform: translate3d(0, 0, 0);\n  }\n}\n\n@keyframes fadeInDown {\n  from {\n    opacity: 0;\n    transform: translate3d(0, -50%, 0);\n  }\n  to {\n    opacity: 1;\n    transform: translate3d(0, 0, 0);\n  }\n}\n\n@keyframes fadeOut {\n  from {\n    opacity: 1;\n  }\n  to {\n    opacity: 0;\n  }\n}\n\n.card {\n  background: var(--surface-card);\n  color: var(--text-color);\n  padding: 2rem;\n  box-shadow: 0 2px 1px -1px rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 1px 3px 0 rgba(0, 0, 0, 0.12);\n  border-radius: 4px;\n  margin-bottom: 1rem;\n}\n\n.card .card-header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n}\n\ni:not([class~=pi]) {\n  background-color: var(--surface-ground);\n  color: #2196f3;\n  font-family: Monaco, courier, monospace;\n  font-style: normal;\n  font-size: 12px;\n  font-weight: 500;\n  padding: 2px 4px;\n  letter-spacing: 0.5px;\n  border-radius: 3px;\n  font-weight: 600;\n  margin: 0 2px;\n}\n\npre[class*=language-]:before, pre[class*=language-]:after {\n  display: none !important;\n}\n\npre[class*=language-] code {\n  border-left: 10px solid var(--surface-border) !important;\n  box-shadow: none !important;\n  background: var(--surface-ground) !important;\n  margin: 1em 0;\n  color: var(--text-color);\n  font-size: 14px;\n}\n\npre[class*=language-] code .token.tag, pre[class*=language-] code .token.keyword {\n  color: #2196F3 !important;\n}\n\npre[class*=language-] code .token.attr-name, pre[class*=language-] code .token.attr-string {\n  color: #2196F3 !important;\n}\n\npre[class*=language-] code .token.attr-value {\n  color: #4CAF50 !important;\n}\n\npre[class*=language-] code .token.punctuation {\n  color: var(--text-color);\n}\n\npre[class*=language-] code .token.operator, pre[class*=language-] code .token.string, pre[class*=language-] code .token.url {\n  background: transparent;\n}\n\n.fade-enter-active, .fade-leave-active {\n  transition: opacity 0.3s;\n}\n\n.fade-enter, .fade-leave-to {\n  opacity: 0;\n}\n\n@media screen and (max-width: 991px) {\n  .layout-wrapper .layout-topbar {\n    padding-left: 0;\n    justify-content: flex-start;\n  }\n  .layout-wrapper .layout-topbar .action-icon.menu-icon {\n    display: flex;\n  }\n  .layout-wrapper .layout-topbar .action-icon.home-icon {\n    margin-left: 0.5rem;\n  }\n  .layout-wrapper .layout-topbar .route-link {\n    margin-left: auto;\n  }\n  .layout-wrapper .layout-editor {\n    transform: translateX(-100%);\n  }\n  .layout-wrapper .layout-editor.layout-editor-active {\n    transform: translateX(0);\n  }\n  .layout-wrapper .layout-content {\n    margin-left: 0;\n  }\n  .layout-wrapper .layout-mask {\n    background-color: rgba(0, 0, 0, 0.1);\n  }\n  .layout-wrapper .layout-mask.layout-mask-active {\n    z-index: 998;\n    width: 100%;\n    height: 100%;\n    position: fixed;\n    top: 0;\n    left: 0;\n    background-color: rgba(0, 0, 0, 0.4);\n    transition: background-color 0.5s;\n  }\n  .layout-wrapper .layout-footer {\n    padding-left: 1rem;\n  }\n\n  .layout-intro .theme-option {\n    padding: 2rem 0.5rem;\n  }\n}", ""]);
15 | // Exports
16 | /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (___CSS_LOADER_EXPORT___);
17 | 
That isn't the entire error. There is a very large chunk of css style code before this that is also shown, but I can't include that because of character limits on the forum.

cetincakiroglu
Posts: 130
Joined: 17 Dec 2021, 09:33

28 Mar 2022, 09:39

Hi,

We've recently updated the PrimeNG Designer. Could you please try it with the latest version? I couldn't catch the error you've mentioned.

Regards

Post Reply

Return to “PrimeNG Theme Designer API”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 2 guests