[ZEPPELIN-5912] Can't resolve 'scrollmonitor/scrollMonitor.js' in '/workspace/zeppelin/zeppelin-web/src/app'

• Type: Bug
• Status: Open
• Priority: Blocker
• Resolution: Unresolved
• Affects Version/s: 0.10.1
• Component/s: build, zeppelin-web

Environment

I'm running this with docker through wsl2 on a windows 10 machine. 

Language

javascript

• Assignee: Unassigned
• Reporter: Perla Al Haddad
• Created: 18/May/23 12:17
• Updated: 19/May/23 10:27

Description

I'm getting an error while building the Zeppelin web frontend. The error message is as follows:

[INFO] WARNING in configuration
[INFO] The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults for each environment.
[INFO] You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/configuration/mode/
[INFO]
[INFO] ERROR in ./src/app/app.js
[INFO] Module not found: Error: Can't resolve 'scrollmonitor/scrollMonitor.js' in '/workspace/zeppelin/zeppelin-web/src/app'
[INFO]  @ ./src/app/app.js 7:0-41
[INFO]  @ ./src/index.js
[INFO] Child html-webpack-plugin for "index.html":
[INFO]      1 asset
[INFO]     Entrypoint undefined = index.html
[INFO]     [0] ./node_modules/html-webpack-plugin/lib/loader.js!./src/index.html 11.2 KiB {0} [built]
[INFO] Child mini-css-extract-plugin node_modules/css-loader/index.js!node_modules/postcss-loader/src/index.js??postcss!node_modules/angular-ui-grid/ui-grid.css:
[INFO]     Entrypoint mini-css-extract-plugin = *
[INFO]        6 modules
[INFO] Child mini-css-extract-plugin node_modules/css-loader/index.js!node_modules/postcss-loader/src/index.js??postcss!node_modules/github-markdown-css/github-markdown.css:
[INFO]     Entrypoint mini-css-extract-plugin = *
[INFO]        2 modules
[INFO] Child mini-css-extract-plugin node_modules/css-loader/index.js!node_modules/postcss-loader/src/index.js??postcss!src/app/jobmanager/job/job.css:
[INFO]     Entrypoint mini-css-extract-plugin = *
[INFO]     [0] ./node_modules/css-loader!./node_modules/postcss-loader/src??postcss!./src/app/jobmanager/job/job.css 2.38 KiB
{0}
[built]
[INFO]         + 1 hidden module
[INFO] Child mini-css-extract-plugin node_modules/css-loader/index.js!node_modules/postcss-loader/src/index.js??postcss!src/app/notebook/dynamic-forms/dynamic-forms.css:
[INFO]     Entrypoint mini-css-extract-plugin = *
[INFO]     [0] ./node_modules/css-loader!./node_modules/postcss-loader/src??postcss!./src/app/notebook/dynamic-forms/dynamic-forms.css 621 bytes {0} [built]
[INFO]         + 1 hidden module
[INFO] Child mini-css-extract-plugin node_modules/css-loader/index.js!node_modules/postcss-loader/src/index.js??postcss!src/app/notebook/revisions-comparator/revisions-comparator.css:
[INFO]     Entrypoint mini-css-extract-plugin = *
[INFO]     [0] ./node_modules/css-loader!./node_modules/postcss-loader/src??postcss!./src/app/notebook/revisions-comparator/revisions-comparator.css 5.36 KiB {0} [built]
[INFO]         + 1 hidden module
[INFO] Child mini-css-extract-plugin node_modules/css-loader/index.js!node_modules/postcss-loader/src/index.js??postcss!src/components/navbar/expand-collapse/expand-collapse.css:
[INFO]     Entrypoint mini-css-extract-plugin = *
[INFO]        2 modules
[INFO] Child mini-css-extract-plugin node_modules/css-loader/index.js!node_modules/postcss-loader/src/index.js??postcss!src/components/note-create/note-create.css:
[INFO]     Entrypoint mini-css-extract-plugin = *
[INFO]        2 modules
[INFO] Child mini-css-extract-plugin node_modules/css-loader/index.js!node_modules/postcss-loader/src/index.js??postcss!src/components/note-import/note-import.css:
[INFO]     Entrypoint mini-css-extract-plugin = *
[INFO]        2 modules
[INFO] Child mini-css-extract-plugin node_modules/css-loader/index.js!node_modules/postcss-loader/src/index.js??postcss!src/components/note-rename/note-rename.css:
[INFO]     Entrypoint mini-css-extract-plugin = *
[INFO]        2 modules
[ERROR] npm ERR! code ELIFECYCLE
[ERROR] npm ERR! errno 2
[ERROR] npm ERR! zeppelin-web@0.0.0 build:dist: `npm-run-all prebuild && grunt pre-webpack-dist && webpack && grunt post-webpack-dist`
[ERROR] npm ERR! Exit status 2
[ERROR] npm ERR!
[ERROR] npm ERR! Failed at the zeppelin-web@0.0.0 build:dist script.
[ERROR] npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
[ERROR]
[ERROR] npm ERR! A complete log of this run can be found in:
[ERROR] npm ERR!     /root/.npm/_logs/2023-05-18T09_20_54_639Z-debug.log

I'm using the v10.1 tag on GitHub and building the project using the provided Dockerfile.

The error occurs when executing the following command in the root folder:

docker build -t zeppelin-docker . 

Commenting out the line importing the scrollmonitor package in app.js fixes the issue, but I'm guessing this package is being used in the application.

import 'headroom.js/dist/angular.headroom'; 
// import 'scrollmonitor/scrollMonitor.js'; 
import 'angular-viewport-watch/angular-viewport-watch.js'; 
import 'angular-ui-grid/ui-grid.css'; import 'angular-ui-grid';

A more complete traceback of the build process for the web application has been attached.

Thank you for any help on this issue.