Failed to enable volume-leaflet@1.0.1 on Zeppelin 0.7.2

[twang2218]

I created a json file zeppelin-leaflet.json under $ZEPPELIN_HOME/helium/ folder, with the content of:

{
  "type": "VISUALIZATION",
  "name": "volume-leaflet",
  "description": "A geospatial visualization for Apache Zeppelin using Leaflet",
  "artifact": "volume-leaflet@1.0.1",
  "license": "BSD-2-Clause",
  "icon": "<i class='fa fa-globe'></i>"
}

Then, when I refresh the zeppelin Helium page, I can see the leaflet is shown:

However, after I click the enable and OK, I received an error message:

Here is the full error messages:

./~/leaflet/dist/leaflet.css
Module parse failed: /opt/zeppelin/local-repo/vis/node_modules/leaflet/dist/leaflet.css Unexpected token (3:0)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected token (3:0)
at Parser.pp$4.raise (/opt/zeppelin/local-repo/vis/node_modules/acorn/dist/acorn.js:2221:15)
at Parser.pp.unexpected (/opt/zeppelin/local-repo/vis/node_modules/acorn/dist/acorn.js:603:10)
at Parser.pp$3.parseExprAtom (/opt/zeppelin/local-repo/vis/node_modules/acorn/dist/acorn.js:1822:12)
at Parser.pp$3.parseExprSubscripts (/opt/zeppelin/local-repo/vis/node_modules/acorn/dist/acorn.js:1715:21)
at Parser.pp$3.parseMaybeUnary (/opt/zeppelin/local-repo/vis/node_modules/acorn/dist/acorn.js:1692:19)
at Parser.pp$3.parseExprOps (/opt/zeppelin/local-repo/vis/node_modules/acorn/dist/acorn.js:1637:21)
at Parser.pp$3.parseMaybeConditional (/opt/zeppelin/local-repo/vis/node_modules/acorn/dist/acorn.js:1620:21)
at Parser.pp$3.parseMaybeAssign (/opt/zeppelin/local-repo/vis/node_modules/acorn/dist/acorn.js:1597:21)
at Parser.pp$3.parseExpression (/opt/zeppelin/local-repo/vis/node_modules/acorn/dist/acorn.js:1573:21)
at Parser.pp$1.parseStatement (/opt/zeppelin/local-repo/vis/node_modules/acorn/dist/acorn.js:727:47)
at Parser.pp$1.parseTopLevel (/opt/zeppelin/local-repo/vis/node_modules/acorn/dist/acorn.js:638:25)
at Parser.parse (/opt/zeppelin/local-repo/vis/node_modules/acorn/dist/acorn.js:516:17)
at Object.parse (/opt/zeppelin/local-repo/vis/node_modules/acorn/dist/acorn.js:3098:39)
at Parser.parse (/opt/zeppelin/local-repo/vis/node_modules/webpack/lib/Parser.js:902:15)
at DependenciesBlock. (/opt/zeppelin/local-repo/vis/node_modules/webpack/lib/NormalModule.js:104:16)
at DependenciesBlock.onModuleBuild (/opt/zeppelin/local-repo/vis/node_modules/webpack-core/lib/NormalModuleMixin.js:310:10)
at nextLoader (/opt/zeppelin/local-repo/vis/node_modules/webpack-core/lib/NormalModuleMixin.js:275:25)
at /opt/zeppelin/local-repo/vis/node_modules/webpack-core/lib/NormalModuleMixin.js:259:5
at Storage.finished (/opt/zeppelin/local-repo/vis/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:38:16)
at /opt/zeppelin/local-repo/vis/node_modules/graceful-fs/graceful-fs.js:78:16
at FSReqWrap.readFileAfterClose [as oncomplete] (fs.js:445:3)
@ ./~/volume-leaflet/index.js 23:0-35

Is there anything I'm missing?

[myuwono]

@twang2218 Try it out on the master branch. The webpack conf for zeppelin 0.7.2 doesn't have the appropriate loaders for css nor png files.

[mcapavan]

@myuwono ,
I have Zeppelin Version 0.7.3 and I have created the below json file

{ "type": "VISUALIZATION", "name": "volume-leaflet", "description": "A geospatial visualization for Apache Zeppelin using Leaflet", "artifact": "volume-leaflet@1.0.3", "license": "BSD-2-Clause", "icon": "<i class='fa fa-globe'></i>" }

and I am getting the error below while enabling the package.
./~/leaflet/dist/leaflet.css Module parse failed: /usr/hdp/2.6.4.0-91/zeppelin/local-repo/vis/node_modules/leaflet/dist/leaflet.css Unexpected token (3:0) You may need an appropriate loader to handle this file type. SyntaxError: Unexpected token (3:0) at Parser.pp$4.raise (/usr/hdp/2.6.4.0-91/zeppelin/local-repo/vis/node_modules/acorn/dist/acorn.js:2221:15) at Parser.pp.unexpected (/usr/hdp/2.6.4.0-91/zeppelin/local-repo/vis/node_modules/acorn/dist/acorn.js:603:10) at Parser.pp$3.parseExprAtom (/usr/hdp/2.6.4.0-91/zeppelin/local-repo/vis/node_modules/acorn/dist/acorn.js:1822:12) at Parser.pp$3.parseExprSubscripts (/usr/hdp/2.6.4.0-91/zeppelin/local-repo/vis/node_modules/acorn/dist/acorn.js:1715:21) at Parser.pp$3.parseMaybeUnary (/usr/hdp/2.6.4.0-91/zeppelin/local-repo/vis/node_modules/acorn/dist/acorn.js:1692:19) at Parser.pp$3.parseExprOps (/usr/hdp/2.6.4.0-91/zeppelin/local-repo/vis/node_modules/acorn/dist/acorn.js:1637:21) at Parser.pp$3.parseMaybeConditional (/usr/hdp/2.6.4.0-91/zeppelin/local-repo/vis/node_modules/acorn/dist/acorn.js:1620:21) at Parser.pp$3.parseMaybeAssign (/usr/hdp/2.6.4.0-91/zeppelin/local-repo/vis/node_modules/acorn/dist/acorn.js:1597:21) at Parser.pp$3.parseExpression (/usr/hdp/2.6.4.0-91/zeppelin/local-repo/vis/node_modules/acorn/dist/acorn.js:1573:21) at Parser.pp$1.parseStatement (/usr/hdp/2.6.4.0-91/zeppelin/local-repo/vis/node_modules/acorn/dist/acorn.js:727:47) at Parser.pp$1.parseTopLevel (/usr/hdp/2.6.4.0-91/zeppelin/local-repo/vis/node_modules/acorn/dist/acorn.js:638:25) at Parser.parse (/usr/hdp/2.6.4.0-91/zeppelin/local-repo/vis/node_modules/acorn/dist/acorn.js:516:17) at Object.parse (/usr/hdp/2.6.4.0-91/zeppelin/local-repo/vis/node_modules/acorn/dist/acorn.js:3098:39) at Parser.parse (/usr/hdp/2.6.4.0-91/zeppelin/local-repo/vis/node_modules/webpack/lib/Parser.js:902:15) at DependenciesBlock. (/usr/hdp/2.6.4.0-91/zeppelin/local-repo/vis/node_modules/webpack/lib/NormalModule.js:104:16) at DependenciesBlock.onModuleBuild (/usr/hdp/2.6.4.0-91/zeppelin/local-repo/vis/node_modules/webpack-core/lib/NormalModuleMixin.js:310:10) at nextLoader (/usr/hdp/2.6.4.0-91/zeppelin/local-repo/vis/node_modules/webpack-core/lib/NormalModuleMixin.js:275:25) at /usr/hdp/2.6.4.0-91/zeppelin/local-repo/vis/node_modules/webpack-core/lib/NormalModuleMixin.js:259:5 at Storage.finished (/usr/hdp/2.6.4.0-91/zeppelin/local-repo/vis/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:38:16) at /usr/hdp/2.6.4.0-91/zeppelin/local-repo/vis/node_modules/graceful-fs/graceful-fs.js:78:16 at FSReqWrap.readFileAfterClose [as oncomplete] (fs.js:445:3) @ ./~/volume-leaflet/index.js 23:0-35

I have tried with "artifact": "volume-leaflet@1.0.2" and "artifact": "volume-leaflet" without any luck. Could you help me to resolve this?

[myuwono]

@mcapavan thanks for the question. I've had that exact same error in 0.7.3. Since we need to import css and png files, the helium package requires additional css and png loaders in the webpack.config.js, which has been accordingly added in Zeppelin master branch (>=0.8.0) but not in the prior 0.7.x releases. The merged PR is in apache/zeppelin#2313. Unfortunately the most straightforward fix is to compile the latest Zeppelin from source, after which the helium extension should be installable via UI.

[mcapavan]

@myuwono , Thanks for the quick response. Unfortunately I cannot upgrade Zeppelin from 0.7.3. Is there any alternative to use volume-leaflet on Zeppelin 0.7.3?

[vak]

guys, we are waiting for Zeppelin 0.8 (or its snapshot) to appear in AWS EMR for one year already with no avail.
A guidence how to get rid of this error in Zeppelin 0.7.3 would be very much appreciated.

[MayankGupta3090]

me facing same issue with zeppelin 0.7.3. please help if possib;e

[vak]

@MayankGupta3090, I just installed Zeppelin 0.8 manually in AWS EMR and things are more or less fine now -- not sure if it is suitable for your case though.