Nuxtでbuild+previewするとエラー発生した件
Vueを活用する中で、
「Nuxt」
のフレームワークを使用して、
既存で作っていたものを、
試しにリプレイスしようとしている。
そんな中で、
- devアクションだと問題なく動く
- buildアクションは問題なく終わる
- previewアクションで表示確認するとエラー
ということが起きたので、
それを対応した時のメモ。
ちなみに、
Nuxtのバージョンについても、
バージョン２系ではなく、
バージョン３系を導入して、
Nuxtを試している。
個人用の備忘録としてメモを残しておく。
Nuxt.jsの公式サイト
Nuxt.jsに関しては、
こちらのサイトを参考にしました。
リンクをメモ。
Vuetifyの公式サイト
デザイン部分に関しては、
Vuetifyを導入しているので、
こちらの公式サイトを参考。
Nuxt.jsでbuild+preview
今回の事象が起きたのは、
開発モード
npm run devで動かしている分には、
エラーにならなかった。
そして、
npm run buildについては、
問題なく、ビルドは終わった。
しかし、
npm run previewで起動して、
表示確認しようとするとエラーになった。
エラー発生「CommonJS module, which may not support all module.exports as named exports.」
表示確認時にエラーが発生
画面上は、
上記のような感じ。
エラー分はこちら。
Named export 'highlight' not found.
The requested module 'prismjs/components/prism-core.js'
is a CommonJS module, which may not support all module.
exports as named exports.
CommonJS modules can always be imported via the default export,
for example using:
import pkg from 'prismjs/components/prism-core.js';
const { highlight: highlight$1, languages: languages$1 } = pkg;こちらについては、
上記のメッセージで、
import pkg from 'prismjs/components/prism-core.js';
const { highlight: highlight$1, languages: languages$1 } = pkg;という感じで、
こういう風に調整したら良いというメッセージがある。
実際のコードを確認すると、
import { highlight, languages } from "prismjs/components/prism-core";となっているので、
上記の書き方に合わせる形で、
import prismjs from "prismjs/components/prism-core";
const { highlight, languages } = prismjs;という形で調整。
エラー発生「The language “undefined” has no grammar.」
画面上の表示エラーは、
The language "undefined" has no grammar.となっていたが、
previewを起動しているコンソールで、
表示されるログを確認すると、
ReferenceError: getComputedStyle is not definedというエラーが出力されていた。
こちらで調べると、
https://github.com/koca/vue-prism-editor/issues/32
こちらのページにある対策が、
今回の事象と一致したので、
そちらをメモ。
調整前のコード
<prism-editor class="my-editor" ...省略></prism-editor>調整後のコード
<client-only placeholder="Loading...">
<prism-editor class="my-editor" ...省略></prism-editor>
</client-only>こちらの調整で、
うまく画面表示ができるようになりました。
スキルを使って、就職/転職/副業する時のサイト
プログラミングのスキルなどを、自分なりに高めた上で、
自分のスキルをアピールして就職や転職を行い、年収をあげるか、
副業という形で、年収にプラスアルファの稼ぎを増やすことはできます。
まずはできる範囲で取り組むことで、
少しずつ、経験値も増え、自分のスキルが収入につながるのでおすすめです。
