Vue.js 3 でjavascriptのimport ～ fromがうまくいかなくて困っています。

Question

前提・実現したいこと

Vue.js 3でjavascriptのimport ～ fromがうまくいかなくて困っています。

Vue Grid | Get Started with ag-Grid and Vue
https://www.ag-grid.com/vuejs-grid/

現在、Vue.js 3とag-gridを組み合わせて、ag-gridの基本動作をさせようとしています。
手順はURL記事のサンプルコードの手順からは変更しています。(下記コードをご参照ください)
Vue.CLIは使用せず　vue.global.jsを使用しています。

ただし、ここでは　Vue.jsとjavascriptのimport～fromの問題のみに限定します。

現在、javascript中でimport ～ fromを使用すると、
この部分　→　import { AgGridVue } from 'ag-grid-vue'; ※たぶんこれは複数ファイルのよう？
で、Uncaught SyntaxError: Cannot use import statement outside a module　とエラーがでており、

import ～ fromを使用できないときは、script type="module"を使用するようですが、

<script type="module" src="..."></script>

javascript中で、import ～ fromでVueにコンポーネントとして登録したいので、何らかの方法をとる必要があります。
調べても解決できていなく、この場合はどのようにすればよいでしょうか？

ご教授お願いします。

// js, css読込
<link rel="stylesheet" href="~/lib/ag-grid/styles/ag-grid.css" />
<link rel="stylesheet" href="~/lib/ag-grid/styles/ag-theme-balham.css" />
<script src="~/lib/ag-grid/ag-grid-community.js"></script>
<script src="~/lib/vue/vue.global.js"></script>

<div id="app">
    <div id="myGrid" style="height: 500px; width: 500px;"></div>
</div>

import { AgGridVue } from 'ag-grid-vue';    // ←　Vue中でコンポーネントとして登録

Vue.createApp({
    name: 'myGrid',

    data() {
        return {
            columnDefs: null,
            rowData: null
        }
    },

    components: {
        AgGridVue
    },

    beforeMount() {
        this.columnDefs = [
            { headerName: 'Make', field: 'make' },
            { headerName: 'Model', field: 'model' },
            { headerName: 'Price', field: 'price' }
        ];

        this.rowData = [
            { make: 'Toyota', model: 'Celica', price: 35000 },
            { make: 'Ford', model: 'Mondeo', price: 32000 },
            { make: 'Porsche', model: 'Boxter', price: 72000 }
        ];
    },

    template: `
    <ag-grid-vue style="width: 500px; height: 300px;"
        class="ag-theme-alpine"
        :columnDefs="columnDefs"
        :rowData="rowData">
    </ag-grid-vue>
    `
}).mount("#myGrid");

その他、試したこと

■　javascriptのみを使用するものはag-gridの動作が確認できました。手順はURL記事のサンプルコードの通り。

Get Started with ag-Grid in Your Project
https://www.ag-grid.com/javascript-grid/

※importとVueは使っていないので問題なし。

補足情報（FW/ツールのバージョンなど）

ツールはVisual studio 2019 Professionalを使用

Answer 1

stack overflowで該当記事を見つけましたが、その手順で解決に至りませんでした。

https://stackoverflow.com/questions/59565934/ag-grid-with-vuejs-vanillajs

https://stackoverflow.com/questions/56334844/is-it-possible-to-use-ag-grid-with-vue-without-a-builder

しかし、vue.js + ag-gridの時、ag-gridをvanilla jsタイプで使用しても、
vue.jsの利用に影響がありませんでしたので、こちらの方で進めたいと思います。

ありがとうございました。

Answer 2

ag-grid-community.jsはagGrid単体で使うためのもので、Vue用ではないと思われます。

そして、import { AgGridVue } from 'ag-grid-vue';のような、npm経由で参照する形は、ブラウザには直接処理できません。

「ag-grid-vueを直接ブラウザから参照できるファイルを探すなり作るなりして、それをimportを使わない形で参照する」あるいは「npmからのimportを処理できるよう、JavaScriptの事前処理の仕組みを作る」のどちらかの手段が必要です。

Comments

[退会済みユーザー]

ご回答ありがとうございます。

ご指摘の通り、ag-grid-community.jsは、Vue用でなかったためコメントアウトしました。
<!-- <script src="~/lib/ag-grid/ag-grid-community.js"></script> -->

サンプルコードのimportははnpmから直接参照の形式だったのですね。また私の環境はWindowsでした。
ローカルファイルからimportを使わず、参照する場合はどのように行えばよいでしょうか？
ネットで検索してもimportでの例しか見つからなく、

この設定を単独で追加してみましたが、変わらずでした。
<script src="~/lib/ag-grid-vue/dist/ag-grid-vue.umd.js"></script>

また、これはVue + ag-gridの組み合わせで通常通り使用するべきか、
ag-gridは単体として使用して、vueと併用とするかについても悩んでます。

※やりたいこととしては、現在は、tabulatorというgridを使用しています(Vue無し)が、ag-grid + vue.jsへの移行を検討しています。
Gridでは直接編集で、そのの編集内容がそのまま配列オブジェクトとして記憶(tabulatorでいうとreactiveData)され、
それをjson postするようなイメージで考えています。
ag-grid + vue が公式ドキュメントの手順で問題なく表示され、それがreactiveDataとして使用できるか検証したいです。

もしよいアドバイスがあればご教授お願いしたく。

[maisumakun]

> この設定を単独で追加してみましたが、変わらずでした。

ag-grid-vue.umd.jsを読み込めば、「window['ag-grid-vue']」として必要な値が取れるようです。なお、agGridとVueの本体もそれぞれ<script>で読み込む必要があります（ag-grid-community.jsもコメントアウトせずに置いておいて、ag-grid-vue.umd.jsをそれより後に追加してください）。

[退会済みユーザー]

javascriptについては、下記の順番に読込して、
<script src="~/lib/vue/vue.global.js"></script>
<script src="~/lib/ag-grid/ag-grid-community.js"></script>
<script src="~/lib/ag-grid-vue/dist/ag-grid-vue.umd.js"></script>

Chromeのデバッグ Consoleでその読込を確認しました。

Watchで　window['ag-grid-vue']　を確認してみましたが、undefinedとなっています。

また、下記のエラーが発生していました。

vue-class-component.esm.js:236 Uncaught TypeError: Right-hand side of 'instanceof' is not callable
at componentFactory (vue-class-component.esm.js:236)
at vue-class-component.esm.js:311
at __decorate (tslib.es6.js:56)
at AgGridVue.ts:15
at Module.fae3 (AgGridVue.ts:198)
at __webpack_require__ (bootstrap:19)
at bootstrap:83
at bootstrap:83
at webpackUniversalModuleDefinition (universalModuleDefinition:9)
at universalModuleDefinition:10

エラーがでていない場合、undefinedでない場合は、下記の設定になるのかと考えています。
components: {
AgGridVue: window['ag-grid-vue']
},

それぞれのバージョンについて
ag-grid@24.1.0
ag-grid-vue@24.1.1
vue@3.0.2

importの問題は、windowの利用で解決しそうな気はしますが、
ag-grid-vueの読込トラブルとなってしまい、申し訳ございません。

[退会済みユーザー]

<script src="~/lib/ag-grid-vue/dist/ag-grid-vue.umd.js"></script>

で、ag-grid-vue　の次に　distフォルダがあるため、windowで取得できないようです、
解決方法を調べていますが、まだ解決できていないです。すみません。

[退会済みユーザー]

解答欄に移動