JSmoduleにおけるimport文パス指定方法

Question

前提・実現したいこと 試したこと

現在laravelで掲示板アプリを作成しているlaravel初心者です。
あるURLを参考に、vanillaJSの絵文字機能を導入しようと考えていますが、
Devコンソールを確認したところ、net::ERR_ABORTED 404 (Not Found)というエラーが出てしまうようです。

ググって調べてみたところ、import文のパス指定の方法が間違っているという記事を見つけたのですが、具体的に下記のFrom以降でどのようにパス指定をするべきなのかがわからないため、教えていただきたいです

devコンソールを確認する限り、localhostに後にくるべきパスを指定してあげる必要がありそうです。
http://127.0.0.1:8081/node_modules/@joeattardi/emoji-button

import { EmojiButton } from '../node_modules/@joeattardi/emoji-button';

※ちなみに現在自分はdocker経由でローカルサーバーを立ち上げて操作しています。

発生している問題・エラーメッセージ

Devコンソール画面

ディレクトリ構造

layout.blade.php

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

emoji.js

import { EmojiButton } from '../node_modules/@joeattardi/emoji-button';

const picker = new EmojiButton();
const trigger = document.querySelector('#emoji-trigger');

picker.on('emoji', selection => {
  // handle the selected emoji here
  console.log(selection.emoji);
});

trigger.addEventListener('click', () => picker.togglePicker(trigger));

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

Laravel Framework 7.30.2

MySQL 8.0.21 Homebrew

PHP 7.4.14

Docker 19.03.13

Heroku 7.47.2

Answer 1

いまのところ、<script type="module">内からNode.jsのモジュールを呼び出すような運用はほぼできません。

「どうしても<script type="module">で書きたい」という強い意志があるのではないなら、Webpack、Rollup、Parcelなどで依存関係を解決するのがいちばん素直な手段です。

Comments

[revoiot]

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

最初type="module"の記述なしにJSスクリプトを直接bladeに書いていましたが、
Uncaught SyntaxError: Cannot use import statement outside a moduleというエラーが出たため、type="module"を追記しました。

参考記事のhttps://github.com/joeattardi/emoji-buttonを見る限り、
下記スクリプトをどこかで呼んであげる必要がありそうですが、代わりにどのような記述をしてあげるべきでしょうか？

※”Webpack、Rollup、Parcelなどで依存関係を解決するのがいちばん素直な手段です。”の回答の意味を正確に理解できていないかもしれないです。すみません。

import { EmojiButton } from '@joeattardi/emoji-button';

const picker = new EmojiButton();
const trigger = document.querySelector('#emoji-trigger');

picker.on('emoji', selection => {
// handle the selected emoji here
console.log(selection.emoji);
});

trigger.addEventListener('click', () => picker.togglePicker(trigger));

[maisumakun]

> 代わりにどのような記述をしてあげるべきでしょうか？

コードはそのままで構いません。それをWebpack、Rollup、Parcelといったツールで処理を行って、ブラウザで使えるJavaScriptに変換するのです。

（真っ正直に<script type="module">のままnpmライブラリを使おうとすると、「CommonJSが通らない」「使うライブラリの依存先を読み込むことができない」などの問題があるので、現状では早晩行き詰まります）

[revoiot]

大変わかりやすく教えていただきありがとうございます！
Webpackでコンパイルを行なって処理させたところ、無事絵文字機能が使えるようになりました。

参考になった記事
https://blog.capilano-fw.com/?p=2555#appjs