Failed to import geotiff in vue project

[dongli]

I have import GeoTIFF from 'geotiff' in a vue file, and run npm run dev with the following error:

 error  in ./node_modules/geotiff/src/geotiff.js

Module parse failed: Unexpected token (283:35)
You may need an appropriate loader to handle this file type.
|     }
|
|     return usedImage.readRasters({ ...options, window: wnd });
|   }
| }

 @ ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./src/components/layers/Basemap.vue 9:0-30
 @ ./src/components/layers/Basemap.vue
 @ ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./src/App.vue
 @ ./src/App.vue
 @ ./src/main.js
 @ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/main.js

[constantinius]

Hi @dongli

Thanks for reporting this issue.

The reason for this error seems to be, that geotiff.js uses language constructs that are quite new, such as object property spreading, that not all JavaScript processors understand.

I think there are multiple solutions to this issue. When you want to directly use the source code you can add a language transpiler to your toolchain. I think the most popular one is babel.js. I'm sure that there is an integration for Vue.

The other solution is to use the supplied build output, to be found in the dist-browser directory, which is built upon installation.

@PacoDu with the new Parcel-based build system, what would you propose to use?

[PacoDu]

Hi @dongli Which version of geotiffjs and vueJS are you using ? Can you provide an example on how to reproduce the issue ? (codesandbox or a git repo)

[dongli]

Thank you for replying! @PacoDu The version of vuejs is 2.5.2, and geotiffjs is the latest one. Sorry, I am not a JS veteran, I have changed the technique to use PNG directly for the time being.

[danwild]

I've not dug into this is any detail - but will note:

I just upgraded from 1.0.0-beta.7 to 1.0.0-beta.13, and my imports stopped working (in both rollup and webpack). What currently works for me:

import * as GeoTIFF from 'geotiff/dist-browser/geotiff';

[zuoxy1997]

I have the same problem, and I tried the babel.js but it didn't work for me.The version of vuejs is 2.9.6,is there any other way to solve this problem?

[muety]

Same problem here.

[constantinius]

@muety This could be fixed with release v2.0.4.

[Daniel-Brosnan-Blazquez]

I'm trying to install stable version of Opelayers 6.13.0 and I'm having the same issue as this depends on geotiff. It currently installs [email protected] and still gives the same error: ERROR in ./node_modules/geotiff/dist-module/geotiff.js Module parse failed: Unexpected token (276:35) You may need an appropriate loader to handle this file type. | } | | return usedImage.readRasters({ ...options, window: wnd }); | } | }

[Saeed-ul-haq]

Did you solve the same issue? @Daniel-Brosnan-Blazquez !! I am facing the same issue with openlayer 6.14.1 ../node_modules/geotiff/dist-module/geotiff.js Module parse failed: Unexpected token (277:35) You may need an appropriate loader to handle this file type. | } | | return usedImage.readRasters({ ...options, window: wnd }); | } | }