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

2021/02/19 2021/02/19

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

こんにちは。Nonです。

今回は前回に書いた記事

自分的Storybook + Vue環境の作成方法（CLIなし） | のんラボ

自分的Storybook + Vue環境の作成方法こんにちは。Nonです。今回は ...

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

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

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

なので、リンク先の

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

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

copied.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で作成したリポジトリをそのままインストールする方法は

Githubにあげた個人のnpmパッケージをインストールする方法 - Qiita

始めにpublicには公開しないけど、他の案件でも使いますためにローカルで作成したnpmパッケージをインストールする方法について紹介します。CLIで動作するパッケージの作成方法はこちらの記事を参考にし...

や

nodejsで自作別リポジトリ(gitlab/github)をモジュール化して利用するには？ - kei0425tan’s blog

プログラムを作っていて、この機能をあのプログラムでも利用したいなぁ。。。といったことはよくあるかと思います。そういうときには、コピペしてしまうと整合性が取れなくなってあとで困ることになります。なので...

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

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

copied."dependencies": {
  ...
  "smaregi-developers-ui": "git+https://{user_name}:{token}@example.com/path",
  ...
}

copied.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

copied.import 'my-project-name';

// もともとあるコード

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

Nuxtの場合

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

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

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

copied.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.js に plugins フィールドがあるので、そちらに作成したファイルを指定します。

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

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

copied.npm run dev

エラー発生

copied.Cannot use import statement outside a module

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

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

Trying ES6 style import gives 'Cannot use import statement outside a module'

I am trying to write a javascript test in intellij for which I need to import some dependancies and ...

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

build プロパティ

Nuxt では、webpack の設定をカスタマイズして web アプリケーションを思いのままに構築することができます。

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

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

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

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

copied.npm run dev

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

最後に

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

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

その時はよしなに。

.