前提

rollup.js及びvuejs初心者です。

質問

rollup.jsを使い、vue.jsの「単一ファイルコンポーネント」を作ってみようとやっているのですが、
エラーが発生し、うまくいきません。
この原因をご教示いただけますと幸いです。

単一ファイルコンポーネント用の.vueファイル「resources/js/components/TestComponent.vue」

<template>
    <div class="example">{{ message }}</div>
</template>

<script>
    export default {
        data () {
            return {
                message: 'Hello world!'
            }
        }
    }
</script>

<style>
    .example {
        color: red;
    }
</style>

（おそらく）単一ファイルコンポーネントにrollupjsがコンパイルする際に、
Vueのコンポーネントととして登録するようの設定ファイル「resources/js/main.js」

import TestComponent from '/resources/js/components/TestComponent.vue';

Vue.component('TestComponent', TestComponent);

rollup.jsのコンフィグファイル「rollup.config.js」

import json from 'rollup-plugin-json';
import vue from 'rollup-plugin-vue';
import commonjs from 'rollup-plugin-commonjs';

export default [
    // rollupjs
    {
        input: 'resources/js/main.js',
        output: {
            name: 'main',
            file: 'public/js/bundle.js',
            format: 'iife'
        },
        plugins: [
            commonjs(),
            vue()
        ]
    },
];

vueファイルを読み出すHTMLファイル「index.html」

<!doctype html>
<html>
<head>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script src="/js/bundle.js"></script>
</head>

<body>

<div id="app">
    <TestComponent></TestComponent>
</div>

<script>
    window.onload = function () {
        var vm = new Vue({
            el: "#app",
        });
    }
</script>

</body>
</html>

上記コードは、

[ブログ

Vue.jsの単一ファイルコンポーネントをrollupでバンドルする](https://www.bit-hive.com/articles/20190608)

Rollup Plugin Vue

を参考に試行錯誤しながら作成しました。
かれこれ4時間位格闘していますがエラーで全然動かず……

ビルドは通っているのですが、
ブラウザのコンソールで以下のエラーが出ております。

ReferenceError: TestComponent is not defined

何が足りていないのでしょうか…？
お知恵をお貸しいただけますと幸いです。
よろしくお願いいたします。

行動規範の内容に同意します

回答1件

ベストアンサー

'/resources/js/components/TestComponent.vue' パスの指定はこれで良いんでしょうか？
相対パスでもできないですか？

投稿2019/08/04 09:24

退会済みユーザー

総合スコア0

nnahito

2019/08/04 09:32

ご回答ありがとうございます。 '/resources/js/components/TestComponent.vue'　→　'import TestComponent from './components/TestComponent.vue';' とすると、「ReferenceError: TestComponent is not defined」のエラーは消えました！しかし、画面には何も表示されず…

退会済みユーザー

2019/08/04 09:40

ビルドは通ったということでよろしいでしょうか？質問が広がっているので新しく別質問立てていただければと思います。確認すべきはデベロッパーツールでエラーが出ていないかということです。また、まずはwebpackなどのメジャーなツールでビルドし、動作確認が取れた後でrollupでも試すということも行ってみて下さい。 rollupは情報が少ないので特にそのビルドツールを使う理由がないのであればwebpackを使った方が良いです。

nnahito

2019/08/04 09:42

> ビルドは通ったということでよろしいでしょうか？すいません、書いてはいませんでしたが、ビルドはずっと通っております。ビルド後、HTMLから該当JSを呼び出した際に、「ReferenceError: TestComponent is not defined」と出ておりました。

退会済みユーザー

2019/08/04 09:47

あと気づいたのはvueって呼び出し時はtest-componentみたいにハイフネーションで記述するべきではなかったでしたっけ？公式ドキュメントでそのあたりも確認して下さい。 https://012-jp.vuejs.org/guide/components.html

nnahito

2019/08/04 09:51

> vueって呼び出し時はtest-componentみたいにハイフネーションで記述するべきでこれだ！！ありがとうございます！動きました！！！

nnahito

2019/08/04 11:06

今回詰まったことなどを考慮し、簡潔にまとめて記事にしました。 https://nnahito.com/articles/41