NuxtでVue製の自作ライブラリを公開せずにインストールする方法と、そのときのエラー解決

2021/02/19 2021/02/19 #Vue #Nuxt #node_modules #エラー #インポート

NuxtでVue製の自作ライブラリをインポートしたときのエラーについて

こんにちは。Nonです。

今回は前回に書いた記事

で作成したVueコンポーネントライブラリをNuxtへインストールする方法と、ハマったポイント、 Cannot use import statement outside a module が発生してしまう現象について書こうと思います。

パッケージ公開せずにインストール

前回の記事に書いたような内容は一般公開できないようなプロダクト専用のライブラリだと思います。

なので、リンク先の

外部でパッケージ利用できるように設定する

でも書いたように、色々なパターンで利用されることを想定せずにVueコンポーネントそのものをビルドに時に自動インストールするか、コンポーネントをexportしています。

import BaseButton from './src/components/atoms/Button/BaseButton';

const Components = {
  BaseButton,
};

// ここで、Vueがinstallされようとするときに、自動的にinportしようとしている。
export function install(Vue) {
  if (install.installed) return;
  install.installed = true;
  Object.keys(Components).forEach((component) => {
    Vue.component(component, Components[component]);
  });
}

const plugin = {
  install,
};

let GlobalVue = null;
if (typeof window !== 'undefined') {
  GlobalVue = window.Vue;
} else if (typeof global !== 'undefined') {
  GlobalVue = global.Vue;
}
if (GlobalVue) {
  GlobalVue.use(plugin);
}

// ここでコンポーネントのexportをしている。
export default Components;

これはlaravel-mixでのVue利用や、素のVueでimportされるときを想定しています。

インストール方法

GitHubやGitLabで作成したリポジトリをそのままインストールする方法は

などの色々なブログで公開されているので、特に言及はしません。

package.json にこのように入力したり、 npm install するときにリポジトリ情報を指定することでインストール出来ます。このとき、しっかりとトークンを設定しておくことを推奨します。

"dependencies": {
  ...
  "smaregi-developers-ui": "git+https://{user_name}:{token}@example.com/path",
  ...
}
npm i my-project-name

インストールできたら node_modules の中に自作パッケージがインストールされているかと思います。

自作パッケージのインポート方法

Vueやlaravel-mixを利用したときには大丈夫だったのですが、Nuxtを利用したときにハマったポイントはこちらになります。

laravel-mixの場合

laravel-mixを利用してVueをインストールしている場合、 {project_root}/resource/js/app.js があると思いますので、そちらに自作コンポーネントをimportします。cssなどをjsで読み込む場合も同じです。

{project_root}/resource/js/app.js

import 'my-project-name';

// もともとあるコード

簡単ですね。自動インストールされるはずなので、特にコンポーネントを指定する必要もないです。

Nuxtの場合

外部パッケージ読み込み用のプラグインファイルを作成します。

ここではプロダクト専用のUIコンポーネントパッケージでしたので ui.js と名付けました。

スクリーンショット 2021-02-19 8.10.40.png

ファイルの内容はこちら。

import Vue from 'vue';

// storybookプロジェクトでexportしたコンポーネントをimport
import Components from 'smaregi-app-market-ui';

// コンポーネント登録
Object.keys(Components).forEach((component) => {
  Vue.component(component, Components[component]);
});

storybookプロジェクトでexportしたコンポーネントをimportするので、それをNuxtのVueに登録する必要があります。

次に、 {project_root}/nuxt.config.jsplugins フィールドがあるので、そちらに作成したファイルを指定します。

// Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins
plugins: [
  '@/plugins/ui',
],

これで設定できたので、nuxtを起動されると...

npm run dev

エラー発生

Cannot use import statement outside a module

画面やログにはこのようなエラーが発生します。

エラー内容はES6関連のコードエラーのようです。

Babel周りの設定がうまいことできていないような気がする。と思い色々調査するとNuxtではbabel用のトランスパイル設定があるようです。

Cannot use import statement outside a moduleimport 構文を古いブラウザなどで使用できるようにするために、ES6未満の対応をするのですが、babelがその役割を担ってくれます。Nuxtはその辺も考慮されたFWなので、これを利用します。

plugins 情報を記載した、 {project_root}/nuxt.config.jsbuild フィールドに下記を追加します。

  // Build Configuration: https://go.nuxtjs.dev/config-build
  build: {
    transpile: ['my-project-name']
  }

設定後、再度コマンドを実行。

npm run dev

エラーが発生せずにNuxtが起動すればOKです。

最後に

Nuxtがどのような原理で外部パッケージのコンパイルなどを行っているのかはあまり理解出来ていませんが、どうやらパッケージ毎にコンパイルやトランスパイルの方法まで色々指定できるようですね。

この辺は少しずつ勉強して記事にしたいと思っています。

その時はよしなに。

.

のん

所属 : 株式会社スマレジ 開発部

YouTube : のんラボ

Twitter : @nonz250

Github : nonz250

Qiita : @nonz250

My Qiita posts My Qiita contributions My Qiita followers

主にPHPを使用し、サーバーサイドを担当。最近はフロントにも興味津々。

なにかを作ったりいじったりするのが好きで、個人開発なども行っている。

趣味はバイクアイコン画像は大抵愛車の「Z250」である。友達にアイコン描いてもらえて嬉しい。

PHP / Laravel / CakePHP2 / CakePHP3 / Vue / Nuxt / C# / etc...

Tags

#のんラボ #Laravel #Vue #個人開発 #ブログ #プログラミング #javascript #Html5 #WEBサービス #Twitter #今年の抱負メーカー #勉強方法 #PWA #モバイルアプリ #Android #ツーリング #バイクに乗るエンジニア #Z250 #秋吉台 #能登半島 #バイク #冒険 #東尋坊 #Squid #リバースプロキシ #hosts #axios #cropper #AdSense #Bootstrap #MySQL #高速化 #トドTask #Telescope #デバッグ #composer #テスト #セキュリティ #POSレジ #スマレジ #本部機能 #バリデーション #入力チェック #Mac #Chrome #テスト駆動開発 #開発手法 #UI #デザイン #WEBサイト #機能美 #PHP #Laravel 6 #コメント #バージョンアップ #vue-cli #localhost #BIツール #売上分析 #TANAX #MFK250 #ツアーシェルケース2 #RESTful #API #REST API #実務的 #PHP Tech Tutor #Smaregi Tech Talk #勉強会 # ブログ #CakePHP3 #CSRF #VSCode #開発環境 #CakePHP3.0 #さくらのレンタルサーバー #モジュールモード #シェル #メール #Gmail #relay #OGP #エラーページ #抱負 #家庭教師 #ドメイン駆動設計 #DDD #読書会 #那智の滝 #伊勢志摩 #伊勢志摩スカイライン #フロント #三方五湖 #レインボーライン #ボーイスカウト・ルール #プログラマが知るべき97のこと #リファクタリング #ユビキタス言語 #車輪の再発明 #マイクロサービス #デプロイ #QA #laravel-mix #Tips #storybook #@storybook/addon-actions #昇降デスク #コードレス #書斎 #オフィス #リモートワーク #働き方 #エラーハンドリング #スマレジ4 #pixel 5 #レビュー #スマレコ #TDD #RSS #404 #高山ダム #ラーツー #React #Nuxt #node_modules #エラー #インポート #設定方法 #環境構築 #Docker #フォレストパーク神野山