lisz-works

技術と興味の集合体

Nuxtはシンボリックリンクに注意

【スポンサーリンク】

Nuxt.js

メインPCでないやつでNuxtプロジェクトを作成しました。

すると……

「npm run dev」で、エラーページが表示される……

原因を調べていたら、シンボリックリンクが原因でした。

実験したこと

このような構成のフォルダを作った。

フォルダ構成

これらの各パス内に、「npx create-nuxt-app xxx」でプロジェクトを作成してみた。

  • C:\tmp\nuxt\single (階層の浅いパス)
  • C:\tmp\nuxt\ref\hoge\huga\foo\bar (階層の深いパス)
  • C:\tmp\nuxt\link (C:\tmp\nuxt\refのシンボリックリンク)
  • C:\tmp\nuxt\deep (C:\tmp\nuxt\ref\hoge\huga\foo\barのシンボリックリンク)

結果

C:\tmp\nuxt\ref\hoge\huga\foo\barをシンボリックリンクした、C:\tmp\nuxt\deepに作ったプロジェクトのみ、実行時にエラーが出た。

エラー画面

プロジェクト内の、「.nuxt\App.js」がエラーする。

App.jsのimportが狂っている

先頭にあるimportのパスが狂っています……

エラーはこのように出ています。

Cannot find module '..\..\..\ref\hoge\huga\foo\bar\deep\node_modules\buefy\dist\buefy.css'

このApp.jsの実態は

C:\tmp\nuxt\ref\hoge\huga\foo\bar\deep.nuxt\App.js

となります。

で、importは

3つ戻る……
「C:\tmp\nuxt\ref\hoge\huga\foo」 ここに来ます。

更に 「ref\hoge\huga\foo\bar\deep……」 とすすむ
「C:\tmp\nuxt\ref\hoge\huga\foo\ref\hoge\huga\foo\bar\deep」 ここに来ます。

「C:\tmp\nuxt\ref\hoge\huga\foo\bar\deep」 本来のパスがこれ。

狂ってますね。

App.jsは修正しても意味がない

「import狂ってるから直せばいいじゃん」

と思って直して、「npm run dev」をしてみた。

しかし……また同じエラー画面が……

どうやらnpm run devなどをすると、App.jsが自動更新されるようです。

なのでシンボリックリンクの無いパスに置いたほうが良さそうです。

あとがき

ということで、Nuxtプロジェクトはシンボリックリンク下に作るとエラーするケースがありますよーというお話でした。

とはいえ、ちょっと特殊なケースな気がしますね(笑)

のっぴきならない理由でシンボリックリンクという方法を取っていましたが、こんなところでアダになりました……

もしこんなケースでハマったら、どうぞお試しくださいませ!