aono1234
@aono1234

Are you sure you want to delete the question?

Leaving a resolved question undeleted may help others!

railsでjsライブラリの`leader-line`を使いたい

railsでleader-lineというライブラリを使用したい

現在ruby on railsないでleader-lineを使えるようにapp/javascript/packs/applicationの中のコードを弄っているのですが、うまく反映できません。
github: https://github.com/TakeshiAono/technology_pyramid.git
参考URL: https://anseki.github.io/leader-line/

以下の事を行いました。

  1. yarn add leader-lineをターミナルで実行
  2. app/javascript/packs/application.jsrequire("leader-line")を追加
  3. app/javascript/packs/application.jsimport "./pyramid.js";を追加
  4. app/javascript/packs/pyramid.jsに以下のコードを追加
new LeaderLine(
document.getElementById('start'),
document.getElementById('end'));

発生している問題・エラー

http://localhost:3000/pyramids.1 のページのstart-endの間にleader-lineの矢印が出てきてほしいのですが、出てきてくれません。
以下はコンソールのエラーです。

pyramid.js:9 Uncaught TypeError: leader_line__WEBPACK_IMPORTED_MODULE_0___default.a is not a constructor
    at ./app/javascript/packs/pyramid.js (pyramid.js:9:1)
    at __webpack_require__ (bootstrap:19:1)
    at ./app/javascript/packs/application.js (application.js:26:1)
    at __webpack_require__ (bootstrap:19:1)
    at bootstrap:83:1
    at bootstrap:83:1

railsの内でjavascriptがどのような仕組みで使えるようになっているか
まだ知識が浅いため、うまくエラー解消できませんでした。

すみませんが、ご教授頂けますとありがたいです。
以上、よろしくお願い致します。

0

3Answer

失礼しました。そもそも leader-line は require や import で読み込める形式になっていないようです。 https://github.com/anseki/leader-line/issues/199

webpack では exports-loader を使うことで無理矢理読み込むことができます。まず yarn add exports-loader@1 を実行して exports-loader をインストールしてください。(バージョン2以上も存在しますが、 webpack 4 で動くのはバージョン1系だけです。)

application.js の require("leader-line").default は無意味なので消して、 pyramid.js を以下のように変えてください。

pyramid.js
import { LeaderLine } from 'exports-loader?exports=LeaderLine!leader-line/leader-line.min.js';

// 本題とは関係ないが、ページが pyramid.js を読み込む時点では
// start と end の要素が存在しないので元のコードではエラーになる。
// ページロード完了時に実行するように変える。
document.addEventListener('DOMContentLoaded', () => {
  new LeaderLine(
  document.getElementById('start'),
  document.getElementById('end'));
});
2Like

Comments

  1. @aono1234

    Questioner

    ありがとうございます!!無事矢印が表示されました!!

2で追加した require("leader-line")require("leader-line").default に変えてください。

1Like

Comments

  1. @aono1234

    Questioner

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

ご回答ありがとうございます。
アドバイス通りdefaultを追加しましたが、エラー解消しませんでした…

// This file is automatically compiled by Webpack, along with any other files
// present in this directory. You're encouraged to place your actual application logic in
// a relevant structure within app/javascript and only use these pack files to reference
// that code so it'll be compiled.

require("@rails/ujs").start()
require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")
require("leader-line").default





// Uncomment to copy all static images under ../images to the output folder and reference
// them with the image_pack_tag helper in views (e.g <%= image_pack_tag 'rails.png' %>)
// or the `imagePath` JavaScript helper below.
//
// const images = require.context('../images', true)
// const imagePath = (name) => images(name, true)


import "../stylesheets/application.scss";


import "./pyramid.js";
import "./test";

0Like

Your answer might help someone💌