Error in npm start in both; API and Frontend

[Suleman-Elahi]

Frontend error:

PS D:\test\weferral> npm start

> weferral-dashboard@0.1.0 start D:\test\weferral
> npm run start:dev


> weferral-dashboard@0.1.0 start:dev D:\test\weferral
> node ./build/cli-tools.js --clear dist --create dist && webpack-dev-server --config ./build/webpack.config.client.dev.js

Cleared target directory: D:\test\weferral\dist
Created target directory: D:\test\weferral\dist
i ｢wds｣: Project is running at http://0.0.0.0:4100/
i ｢wds｣: webpack output is served from /
i ｢wds｣: Content not from webpack is served from D:\test\weferral\.serve
i ｢wds｣: 404s will fallback to /
i ｢wdm｣: wait until bundle finished: /setup
× ｢wdm｣: Hash: 20a36445665821523c76
Version: webpack 4.46.0
Time: 107142ms
Built at: 07/16/2021 4:54:14 PM
                      Asset       Size  Chunks             Chunk Names
              app.bundle.js   38.6 MiB     app  [emitted]  app
                    app.css    785 KiB     app  [emitted]  app
                 index.html   8.03 KiB          [emitted]
               static/1.jpg   55.7 KiB          [emitted]
              static/10.jpg   59.5 KiB          [emitted]
              static/11.jpg     82 KiB          [emitted]
              static/12.jpg   71.1 KiB          [emitted]
              static/13.jpg   81.8 KiB          [emitted]
              static/14.jpg   76.4 KiB          [emitted]
              static/15.jpg   70.4 KiB          [emitted]
              static/16.jpg   72.4 KiB          [emitted]
              static/17.jpg   77.2 KiB          [emitted]
              static/18.jpg   79.4 KiB          [emitted]
              static/19.jpg   78.1 KiB          [emitted]
               static/2.jpg     63 KiB          [emitted]
              static/20.jpg   74.2 KiB          [emitted]
              static/21.jpg   53.7 KiB          [emitted]
              static/22.jpg   45.4 KiB          [emitted]
              static/23.jpg   86.2 KiB          [emitted]
              static/24.jpg   64.8 KiB          [emitted]
              static/25.jpg   72.1 KiB          [emitted]
              static/26.jpg   51.2 KiB          [emitted]
              static/27.jpg   66.8 KiB          [emitted]
              static/28.jpg   52.2 KiB          [emitted]
              static/29.jpg     84 KiB          [emitted]
               static/3.jpg     43 KiB          [emitted]
              static/30.jpg   54.1 KiB          [emitted]
              static/31.jpg   84.6 KiB          [emitted]
              static/32.jpg   88.9 KiB          [emitted]
              static/33.jpg   64.9 KiB          [emitted]
              static/34.jpg   43.4 KiB          [emitted]
              static/35.jpg   55.1 KiB          [emitted]
              static/36.jpg   75.5 KiB          [emitted]
              static/37.jpg   86.8 KiB          [emitted]
              static/38.jpg   78.9 KiB          [emitted]
              static/39.jpg   67.8 KiB          [emitted]
               static/4.jpg   88.1 KiB          [emitted]
              static/40.jpg   54.8 KiB          [emitted]
              static/41.jpg   75.1 KiB          [emitted]
              static/42.jpg   48.1 KiB          [emitted]
              static/43.jpg   42.1 KiB          [emitted]
              static/44.jpg   57.2 KiB          [emitted]
              static/45.jpg   58.1 KiB          [emitted]
              static/46.jpg   57.9 KiB          [emitted]
              static/47.jpg   54.6 KiB          [emitted]
              static/48.jpg   59.3 KiB          [emitted]
              static/49.jpg   64.1 KiB          [emitted]
               static/5.jpg   73.8 KiB          [emitted]
              static/50.jpg   66.9 KiB          [emitted]
               static/6.jpg   61.5 KiB          [emitted]
               static/7.jpg   64.8 KiB          [emitted]
               static/8.jpg   87.9 KiB          [emitted]
               static/9.jpg     93 KiB          [emitted]
static/apple-touch-icon.png    129 KiB          [emitted]
        static/avatar-1.jpg     63 KiB          [emitted]
   static/favicon-16x16.png  835 bytes          [emitted]
   static/favicon-32x32.png    3.4 KiB          [emitted]
        static/weferral.svg   3.91 KiB          [emitted]
Entrypoint app = app.css app.bundle.js
[1] multi (webpack)-dev-server/client?http://0.0.0.0:4100 (webpack)/hot/dev-server.js ./app/index.js 52 bytes {app} [built]
[./app/components/App/index.js] 855 bytes {app} [built]
[./app/index.js] 352 bytes {app} [built]
[./node_modules/@babel/polyfill/lib/index.js] 686 bytes {app} [built]
[./node_modules/react-dom/index.js] 1.33 KiB {app} [built]
[./node_modules/react/index.js] 190 bytes {app} [built]
[./node_modules/webpack-dev-server/client/index.js?http://0.0.0.0:4100] (webpack)-dev-server/client?http://0.0.0.0:4100 4.29 KiB {app} [built]
[./node_modules/webpack-dev-server/client/overlay.js] (webpack)-dev-server/client/overlay.js 3.51 KiB {app} [built]
[./node_modules/webpack-dev-server/client/socket.js] (webpack)-dev-server/client/socket.js 1.53 KiB {app} [built]
[./node_modules/webpack-dev-server/client/utils/createSocketUrl.js] (webpack)-dev-server/client/utils/createSocketUrl.js 2.91 KiB {app} [built]
[./node_modules/webpack-dev-server/client/utils/log.js] (webpack)-dev-server/client/utils/log.js 964 bytes {app} [built]
[./node_modules/webpack-dev-server/client/utils/reloadApp.js] (webpack)-dev-server/client/utils/reloadApp.js 1.59 KiB {app} [built]
[./node_modules/webpack-dev-server/client/utils/sendMessage.js] (webpack)-dev-server/client/utils/sendMessage.js 402 bytes {app} [built]
[./node_modules/webpack-dev-server/node_modules/strip-ansi/index.js] (webpack)-dev-server/node_modules/strip-ansi/index.js 161 bytes {app} [built]
[./node_modules/webpack/hot/dev-server.js] (webpack)/hot/dev-server.js 1.59 KiB {app} [built]
    + 3770 hidden modules

ERROR in ./app/styles/plugins/plugins.scss
Module build failed (from ./node_modules/extract-css-chunks-webpack-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):

$half-drag-handle-height: math.div($drag-handle-height, 2);
                             ^
      Invalid CSS after "...le-height: math": expected expression (e.g. 1px, bold), was ".div($drag-handle-h"
      in D:\test\weferral\node_modules\react-image-crop\lib\ReactCrop.scss (line 21, column 31)
    at D:\test\weferral\node_modules\webpack\lib\NormalModule.js:316:20
    at D:\test\weferral\node_modules\loader-runner\lib\LoaderRunner.js:367:11
    at D:\test\weferral\node_modules\loader-runner\lib\LoaderRunner.js:233:18
    at context.callback (D:\test\weferral\node_modules\loader-runner\lib\LoaderRunner.js:111:13)
    at Object.callback (D:\test\weferral\node_modules\sass-loader\dist\index.js:89:7)
    at Object.done [as callback] (D:\test\weferral\node_modules\neo-async\async.js:8069:18)
    at options.error (D:\test\weferral\node_modules\node-sass\lib\index.js:294:32)
 @ ./app/layout/default.js 39:0-42
 @ ./app/components/App/AppClient.js
 @ ./app/components/App/index.js
 @ ./app/index.js
 @ multi ./app/index.js
Child extract-css-chunks-webpack-plugin node_modules/css-loader/dist/cjs.js!node_modules/postcss-loader/src/index.js!app/styles/plugins/plugins.css:
    Entrypoint extract-css-chunks-webpack-plugin = *
    [./node_modules/css-loader/dist/cjs.js!./node_modules/postcss-loader/src/index.js!./app/styles/plugins/plugins.css] ./node_modules/css-loader/dist/cjs.js!./node_modules/postcss-loader/src!./app/styles/plugins/plugins.css 1.66 KiB {extract-css-chunks-webpack-plugin} [built]
    [./node_modules/css-loader/dist/cjs.js!./node_modules/rc-slider/assets/index.css] 5.8 KiB {extract-css-chunks-webpack-plugin} [built]
    [./node_modules/css-loader/dist/cjs.js!./node_modules/react-big-calendar/lib/css/react-big-calendar.css] 12.7 KiB {extract-css-chunks-webpack-plugin} [built]
    [./node_modules/css-loader/dist/cjs.js!./node_modules/react-bootstrap-typeahead/css/Typeahead-bs4.css] 1.04 KiB {extract-css-chunks-webpack-plugin} [built]
    [./node_modules/css-loader/dist/cjs.js!./node_modules/react-bootstrap-typeahead/css/Typeahead.css] 4.16 KiB {extract-css-chunks-webpack-plugin} [built]
    [./node_modules/css-loader/dist/cjs.js!./node_modules/react-datepicker/dist/react-datepicker.css] 23.4 KiB {extract-css-chunks-webpack-plugin} [built]
    [./node_modules/css-loader/dist/cjs.js!./node_modules/react-grid-layout/css/styles.css] 1.3 KiB {extract-css-chunks-webpack-plugin} [built]
    [./node_modules/css-loader/dist/cjs.js!./node_modules/react-quill/dist/quill.snow.css] 25.3 KiB {extract-css-chunks-webpack-plugin} [built]
    [./node_modules/css-loader/dist/cjs.js!./node_modules/react-toggle/style.css] 3.3 KiB {extract-css-chunks-webpack-plugin} [built]
    [./node_modules/css-loader/dist/runtime/api.js] 2.46 KiB {extract-css-chunks-webpack-plugin} [built]
Child extract-css-chunks-webpack-plugin node_modules/css-loader/dist/cjs.js!node_modules/postcss-loader/src/index.js!node_modules/sass-loader/dist/cjs.js??ref--8-3!app/styles/bootstrap.scss:
    Entrypoint extract-css-chunks-webpack-plugin = *
    [./node_modules/css-loader/dist/cjs.js!./node_modules/postcss-loader/src/index.js!./node_modules/sass-loader/dist/cjs.js?!./app/styles/bootstrap.scss] ./node_modules/css-loader/dist/cjs.js!./node_modules/postcss-loader/src!./node_modules/sass-loader/dist/cjs.js??ref--8-3!./app/styles/bootstrap.scss 433 KiB {extract-css-chunks-webpack-plugin} [built]
    [./node_modules/css-loader/dist/runtime/api.js] 2.46 KiB {extract-css-chunks-webpack-plugin} [built]
Child extract-css-chunks-webpack-plugin node_modules/css-loader/dist/cjs.js!node_modules/postcss-loader/src/index.js!node_modules/sass-loader/dist/cjs.js??ref--8-3!app/styles/components/float-grid.scss:
    Entrypoint extract-css-chunks-webpack-plugin = *
    [./node_modules/css-loader/dist/cjs.js!./node_modules/postcss-loader/src/index.js!./node_modules/sass-loader/dist/cjs.js?!./app/styles/components/float-grid.scss] ./node_modules/css-loader/dist/cjs.js!./node_modules/postcss-loader/src!./node_modules/sass-loader/dist/cjs.js??ref--8-3!./app/styles/components/float-grid.scss 862 bytes {extract-css-chunks-webpack-plugin} [built]
    [./node_modules/css-loader/dist/runtime/api.js] 2.46 KiB {extract-css-chunks-webpack-plugin} [built]
Child extract-css-chunks-webpack-plugin node_modules/css-loader/dist/cjs.js!node_modules/postcss-loader/src/index.js!node_modules/sass-loader/dist/cjs.js??ref--8-3!app/styles/components/theme-selector.scss:
    Entrypoint extract-css-chunks-webpack-plugin = *
    [./node_modules/css-loader/dist/cjs.js!./node_modules/postcss-loader/src/index.js!./node_modules/sass-loader/dist/cjs.js?!./app/styles/components/theme-selector.scss] ./node_modules/css-loader/dist/cjs.js!./node_modules/postcss-loader/src!./node_modules/sass-loader/dist/cjs.js??ref--8-3!./app/styles/components/theme-selector.scss 320 bytes {extract-css-chunks-webpack-plugin} [built]
    [./node_modules/css-loader/dist/runtime/api.js] 2.46 KiB {extract-css-chunks-webpack-plugin} [built]
Child extract-css-chunks-webpack-plugin node_modules/css-loader/dist/cjs.js!node_modules/postcss-loader/src/index.js!node_modules/sass-loader/dist/cjs.js??ref--8-3!app/styles/components/wizard.scss:
    Entrypoint extract-css-chunks-webpack-plugin = *
    [./node_modules/css-loader/dist/cjs.js!./node_modules/postcss-loader/src/index.js!./node_modules/sass-loader/dist/cjs.js?!./app/styles/components/wizard.scss] ./node_modules/css-loader/dist/cjs.js!./node_modules/postcss-loader/src!./node_modules/sass-loader/dist/cjs.js??ref--8-3!./app/styles/components/wizard.scss 1.4 KiB {extract-css-chunks-webpack-plugin} [built]
    [./node_modules/css-loader/dist/runtime/api.js] 2.46 KiB {extract-css-chunks-webpack-plugin} [built]
Child extract-css-chunks-webpack-plugin node_modules/css-loader/dist/cjs.js!node_modules/postcss-loader/src/index.js!node_modules/sass-loader/dist/cjs.js??ref--8-3!app/styles/main.scss:
    Entrypoint extract-css-chunks-webpack-plugin = *
    [./node_modules/css-loader/dist/cjs.js!./node_modules/postcss-loader/src/index.js!./node_modules/sass-loader/dist/cjs.js?!./app/styles/main.scss] ./node_modules/css-loader/dist/cjs.js!./node_modules/postcss-loader/src!./node_modules/sass-loader/dist/cjs.js??ref--8-3!./app/styles/main.scss 302 KiB {extract-css-chunks-webpack-plugin} [built]
    [./node_modules/css-loader/dist/runtime/api.js] 2.46 KiB {extract-css-chunks-webpack-plugin} [built]
Child extract-css-chunks-webpack-plugin node_modules/css-loader/dist/cjs.js!node_modules/postcss-loader/src/index.js!node_modules/sass-loader/dist/cjs.js??ref--8-3!app/styles/plugins/plugins.scss:
    Entrypoint extract-css-chunks-webpack-plugin = *
    [./node_modules/css-loader/dist/cjs.js!./node_modules/postcss-loader/src/index.js!./node_modules/sass-loader/dist/cjs.js?!./app/styles/plugins/plugins.scss] ./node_modules/css-loader/dist/cjs.js!./node_modules/postcss-loader/src!./node_modules/sass-loader/dist/cjs.js??ref--8-3!./app/styles/plugins/plugins.scss 407 bytes {extract-css-chunks-webpack-plugin} [built] [failed] [1 error]

    ERROR in ./app/styles/plugins/plugins.scss (./node_modules/css-loader/dist/cjs.js!./node_modules/postcss-loader/src!./node_modules/sass-loader/dist/cjs.js??ref--8-3!./app/styles/plugins/plugins.scss)
    Module build failed (from ./node_modules/sass-loader/dist/cjs.js):

    $half-drag-handle-height: math.div($drag-handle-height, 2);
                                 ^
          Invalid CSS after "...le-height: math": expected expression (e.g. 1px, bold), was ".div($drag-handle-h"
          in D:\test\weferral\node_modules\react-image-crop\lib\ReactCrop.scss (line 21, column 31)
Child html-webpack-plugin for "index.html":
     1 asset
    Entrypoint undefined = index.html
    [./node_modules/html-webpack-plugin/lib/loader.js!./app/index.html] 10.2 KiB {0} [built]
    [./node_modules/lodash/lodash.js] 531 KiB {0} [built]
    [./node_modules/webpack/buildin/global.js] (webpack)/buildin/global.js 472 bytes {0} [built]
    [./node_modules/webpack/buildin/module.js] (webpack)/buildin/module.js 497 bytes {0} [built]
i ｢wdm｣: Failed to compile.

API Error:

D:\test\weferral-api>npm start

> weferral-api@0.2.1 start D:\test\weferral-api
> node ./bin/start

environment not initialized - waiting for installation request

[rinshadka]

I was trying to deploy this in docker containers, but getting the above same error.

Also I was able to find the below ENVs for configuring backend database details in API service.

POSTGRES_DB_HOST=
POSTGRES_DB_USER=
POSTGRES_DB_NAME=
POSTGRES_DB_PASSWORD=
POSTGRES_DB_PORT=

like these, is there any ENV for configuring the API URL in the application service?

[Sofrosyn]

Got the same above error

[Sofrosyn]

Upgrade the react model react-image-crop to a later version

[ozeitis]

Upgrade the react model react-image-crop to a later version

I did the latest version (npm install react-image-crop@9.0.4) and still get error

[ozeitis]

Using version 8.6.9 resolved my issue

[Sofrosyn]

Were you able to successfully setup the project ?

[ozeitis]

Were you able to successfully setup the project ?

No... I opened a new issue for my problem