KATUBLO
TECH BLOG

Nuxt.jsでSSRした時に発生する「Unexpected token export …」エラーはtranspileが原因かもしれない

2021-04-07

Nuxt.jsでSSR時に発生する「Unexpected token export …」のエラー

考えられる原因

Nuxt.jsでアプリケーションを開発している最中、「Unexpected token export …」といったエラーに遭遇した場合、追加したpluginのtranspileが設定されていないなどが考えられます。

transpileとは

transpileについてざっとまとめてみました。

  • JSの新しい構文を古い構文に変換する(旧ブラウザでも動くようにするため)
  • 具体的には主にES2015以降で書かれたJSのコードを、古いJSでしか動かないブラウザでも動くように互換性を持ったコードに変換する

Nuxt.jsにおいて、Babelを使用してtranspileする場合はbuild.transplieの配列の中にtranspileしたい要素を設定してあげれば良いです。具体的な例としましては「vee-validate」のコードをtranspileする場合は次の記述をすれば良いです。

export default { plugins: [ { src: '@/plugins/vee-validate' } ], build: { transpile: ["vee-validate/dist/rules"] } }

Nuxt.jsの公式ドキュメントによるとnode_modules以下にあるpluginはtranspileする必要があると書かれていました。

If the plugin is located in node_modules and exports an ES6 module, you may need to add it to the transpile build option:

参考文献:「ES6 Plugins

KATUO
Software Engineer