宮崎県の落合というものです。You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. #120

kenzkenz · 2024-08-12T11:52:54Z

初めましていつもお世話になっております。宮崎県の落合というものです。さて、ol-gsi-vtをインストールしたのですが、「You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file.」というエラーメッセージが出てしまいました。なにか良い解決方法はありませんでしょうか。Vue CLIを使って開発しております。何卒よろしくおねがいします。

cieloazul310 · 2024-08-12T12:41:40Z

ご連絡ありがとうございます。検証いたします。

cieloazul310 · 2024-08-12T15:20:57Z

@kenzkenz 明確に検証できたわけではないのですが、Vue設定ファイルのtranspileDependenciesオプションに@cieloazul310/ol-gsi-vtを追加する方法を試してもらえないでしょうか。

// vue.config.cjs
module.exports = {
  transpileDependencies: [
    // "ol",
    // "color-parse",
    "@cieloazul310/ol-gsi-vt",
  ],
};

自分が試した環境ではolを動かすのにolとcolor-parseをtranspileDependenciesに追加する必要があり、更に@cieloazul310/ol-gsi-vtを追加すると先のエラーは回避できたのですが、新たに依存先のol-pmtilesに関するエラーが発生し、ol-gsi-vtを表示するには至っていません。
openlayers/openlayers#15031

kenzkenz · 2024-08-12T18:09:33Z

ありがとうございます。試してみたのですが、やはり「You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file」のエラーが出てしまいます。

cieloazul310 · 2024-08-12T22:09:25Z

@kenzkenz 使用しているVueやolのバージョンを教えていただけますか

kenzkenz · 2024-08-12T22:14:02Z

ありがとうございます。
"vue": "^2.5.21",
"ol": "^6.15.1",
です。お手数をおかけして申し訳ありません。

cieloazul310 · 2024-08-13T13:21:35Z

1.最初に試していただきたい方法と、1が失敗した場合の2.代替案を提示します。2の代替案で正常に動作しました。

1. 最初に試していただきたい方法

Vue CLIの設定ファイルのtranspileDependenciesオプションに、@cieloazul310/ol-gsi-vtの他に @cieloazul310/ol-gsi-vt-style, @cieloazul310/ol-gsi-vt-style-utilsの3種類を設定してください。

// vue.config.js
/**
 * @type {import('@vue/cli-service').ProjectOptions}
 */
module.exports = {
  transpileDependencies: [
    "@cieloazul310/ol-gsi-vt",
+   "@cieloazul310/ol-gsi-vt-style",
+   "@cieloazul310/ol-gsi-vt-style-utils",
  ],
};

この方法で今まで通り「You may need an appropriate loader...」という表示が出るかどうか教えていただきたいです。

This dependency was not found:
* ol-pmtiles in ./node_modules/@cieloazul310/ol-gsi-vt/lib/layers/gsi-opt-vt.js
To install it, you can run: npm install --save ol-pmtiles

自分が試したときは上記のエラーメッセージが表示され、ol-gsi-vtを表示することはできませんでした。
追加でol-pmtilesをインストールしても同様に表示されたため、この場合ol-pmtilesまたはVue CLIのどこかに起因している可能性があります。
https://github.com/protomaps/PMTiles/tree/main/openlayers

2. 代替案 (pbfに切り替える)

国土地理院の最適化ベクトルタイルをPMTiles版ではなく従来版(pbf)に切り替える方法でol-gsi-vtの表示が可能でした。
https://github.com/gsi-cyberjapan/optimal_bvmap

npm uninstall @cieloazul310/ol-gsi-vt
npm install @cieloazul310/ol-gsi-vt-style

// vue.config.js
/**
 * @type {import('@vue/cli-service').ProjectOptions}
 */
module.exports = {
  transpileDependencies: [
-   "@cieloazul310/ol-gsi-vt",
    "@cieloazul310/ol-gsi-vt-style",
    "@cieloazul310/ol-gsi-vt-style-utils",
  ],
};

レイヤの設定を以下のように変更することで、同環境でol-gsi-vtの表示が可能となりました。

+ import VectorTileLayer from "ol/layer/VectorTile";
+ import VectorTileSource from "ol/source/VectorTile";
+ import MVTFormat from "ol/format/MVT";
- import { gsiOptVtLayer } from '@cieloazul310/ol-gsi-vt';
+ import { gsiOptVtStyle } from "@cieloazul310/ol-gsi-vt-style";

- const layer = gsiOptVtLayer();
+ const layer = new VectorTileLayer({
+   source: new VectorTileSource({
+     url: "https://cyberjapandata.gsi.go.jp/xyz/optimal_bvmap-v1/{z}/{x}/{y}.pbf",
+     maxZoom: 16,
+     minZoom: 4,
+     format: new MVTFormat(),
+   }),
+   style: gsiOptVtStyle(),
+   declutter: true, // 任意
+ }),

以上、お試しくださいませ。

kenzkenz · 2024-08-13T15:00:03Z

ありがとうございます！
１ですが、次のエラーが出ました。
error in ./node_modules/@cieloazul310/ol-gsi-vt-style/lib/opt-vt/index.js

Module parse failed: Unexpected token (7:42)
File was processed with these loaders:

./node_modules/cache-loader/dist/cjs.js
./node_modules/babel-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
| return function (feature, resolution) {
| var mergeInitialTheme = mergeDefaultTheme(defaultTheme);

var theme = mergeInitialTheme(options?.theme);

| var _feature$getPropertie = feature.getProperties(),
| layer = _feature$getPropertie.layer;

２ですが、同じようにエラーが出てしまいました。
error in ./node_modules/@cieloazul310/ol-gsi-vt-style/lib/opt-vt/index.js

Module parse failed: Unexpected token (7:42)
File was processed with these loaders:

./node_modules/cache-loader/dist/cjs.js
./node_modules/babel-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
| return function (feature, resolution) {
| var mergeInitialTheme = mergeDefaultTheme(defaultTheme);

var theme = mergeInitialTheme(options?.theme);

| var _feature$getPropertie = feature.getProperties(),
| layer = _feature$getPropertie.layer;

いろいろと試してみようと思います。

cieloazul310 · 2024-08-14T05:40:14Z

@kenzkenz 恐らく原因が特定できました。結論を先に言うと、Null合体演算子とオプショナルチェーンをトランスパイルできるようにBabelのプリセットのバージョンを上げる、またはプラグインを追加する、という形で解決できると思います。

ol-gsi-vtはESNextをターゲットにTSからJSにトランスパイルしていますが、Vue CLIに組み込まれているBabelがESNextに対応しておらず、モジュールを解析できない、という状態になっていると考えられます。OpenLayersのバージョンを最新版のv10に上げると同じように「You may need an appropriate loader...」というエラーが発生するのも同様の理由だと思われます。

したがって、Null合体演算子とオプショナルチェーンを解析できるようにBabelのプリセットのバージョンを上げる、またはプラグインを追加することで対応できるのではないかと思います。
vuejs/vue-cli#7209

Null 合体演算子 (??)
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Nullish_coalescing
オプショナルチェーン (?.)
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Optional_chaining

ol-gsi-vt側の問題ではないため、これでIssueを閉じて宜しいでしょうか。

kenzkenz · 2024-08-14T08:12:55Z

ありがとうございます。どうしても次のエラーが出てしまいます。私の環境のせいのようなので閉じてもらって結構です。

error in ./node_modules/@cieloazul310/ol-gsi-vt-style-utils/lib/theme/index.js

Module parse failed: Unexpected token (12:28)
File was processed with these loaders:

./node_modules/cache-loader/dist/cjs.js
./node_modules/babel-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
| export default defaultTheme;
| export function mergeDefaultTheme(theme) {

var initialTheme = theme ?? defaultTheme;
| return function (options) {
| if (!options) return initialTheme;

@ ./node_modules/@cieloazul310/ol-gsi-vt-style-utils/lib/index.js 3:0-176 3:0-176 3:0-176 3:0-176 3:0-176 3:0-176 3:0-176 3:0-176 3:0-176
@ ./node_modules/@cieloazul310/ol-gsi-vt/lib/index.js
@ ./src/js/layers-mvt.js
@ ./node_modules/cache-loader/dist/cjs.js??ref--13-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/dialog-info/Dialog-info-paint.vue?vue&type=script&lang=js
@ ./src/components/dialog-info/Dialog-info-paint.vue?vue&type=script&lang=js
@ ./src/components/dialog-info/Dialog-info-paint.vue
@ ./node_modules/cache-loader/dist/cjs.js??ref--13-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/Dialog-info.vue?vue&type=script&lang=js
@ ./src/components/Dialog-info.vue?vue&type=script&lang=js
@ ./src/components/Dialog-info.vue
@ ./src/main.js
@ multi (webpack)-dev-server/client?http://192.168.10.115:8080/sockjs-node (webpack)/hot/dev-server.js ./src/main.js

error in ./node_modules/@cieloazul310/ol-gsi-vt/lib/layers/gsi-opt-vt.js

Module parse failed: Unexpected token (37:57)
File was processed with these loaders:

./node_modules/cache-loader/dist/cjs.js
./node_modules/babel-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
| layers: layers
| }),

background: background === false ? undefined : theme?.palette?.background ?? defaultPalette.background,

| declutter: declutter
| }, vectorTileOptions));

kenzkenz · 2024-08-15T11:37:31Z

お世話になっております。あの後、試行錯誤して表示に成功しました！いろいろありがとうございました！以下はその成果です。津波浸水想定を載せています。 https://kenzkenz.xsrv.jp/open-hinata/#sB8BTKt 2024年8月14日(水) 18:12 cieloazul310 ***@***.***>:

…

Closed #120 <#120> as completed. — Reply to this email directly, view it on GitHub <#120 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ADNSDXVMG52PXMSROVCK3YDZRMNQDAVCNFSM6AAAAABMMAKAZGVHI2DSMVQWIX3LMV45UABCJFZXG5LFIV3GK3TUJZXXI2LGNFRWC5DJN5XDWMJTHA3TMOBZHA2TIMA> . You are receiving this because you were mentioned.Message ID: ***@***.***>

cieloazul310 · 2024-08-15T22:31:16Z

@kenzkenz それは良かったです。open-hinataの制作応援しています。

cieloazul310 closed this as completed Aug 14, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

宮崎県の落合というものです。You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. #120

宮崎県の落合というものです。You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. #120

kenzkenz commented Aug 12, 2024

cieloazul310 commented Aug 12, 2024

cieloazul310 commented Aug 12, 2024

kenzkenz commented Aug 12, 2024

cieloazul310 commented Aug 12, 2024

kenzkenz commented Aug 12, 2024

cieloazul310 commented Aug 13, 2024

kenzkenz commented Aug 13, 2024

cieloazul310 commented Aug 14, 2024

kenzkenz commented Aug 14, 2024

kenzkenz commented Aug 15, 2024 via email

cieloazul310 commented Aug 15, 2024

宮崎県の落合というものです。You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. #120

宮崎県の落合というものです。You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. #120

Comments

kenzkenz commented Aug 12, 2024

cieloazul310 commented Aug 12, 2024

cieloazul310 commented Aug 12, 2024

kenzkenz commented Aug 12, 2024

cieloazul310 commented Aug 12, 2024

kenzkenz commented Aug 12, 2024

cieloazul310 commented Aug 13, 2024

1. 最初に試していただきたい方法

2. 代替案 (pbfに切り替える)

kenzkenz commented Aug 13, 2024

cieloazul310 commented Aug 14, 2024

kenzkenz commented Aug 14, 2024

kenzkenz commented Aug 15, 2024 via email

cieloazul310 commented Aug 15, 2024