本題
題名の通り、Nuxt.js v3 jsonwebtoken を使うと does not provide an export named <メソッド名> というエラーが発生する問題の解決方法を記載します。
軽く調べただけですが、どうやら Nuxt.js v3 は dev モードで動作中はブラウザ上でサーバー側をモックしているようで、Node.js 上で動作する前提の jsonwebtoken と相性が悪いようです。
かといって、毎回 「nuxi build & nuxi preview」 しようとしても、CommonJS と ES Modules の違いによる面倒なエラーが別に発生してしまいます。
解決方法
解決方法は２通り。 前者の方が簡単です。
-
nuxt.config.ts 内に、jsonwebtoken のトランスパイル設定を追加する
// nuxt.config.ts export default defineNuxtConfig({ devtools: { enabled: true }, + build: { + transpile: ['jsonwebtoken'] + } }); -
別の jwt モジュールを使う (ex. jose)
エラー内容
ERROR [worker reload] [worker init] The requested module 'file://~/node_modules/jsonwebtoken/index.js' does not provide an export named 'sign'
import { sign, verify } from '~/node_modules/jsonwebtoken/index.js';
^^^^
SyntaxError: The requested module '~/node_modules/jsonwebtoken/index.js' does not provide an export named 'sign' at ModuleJob._instantiate (node:internal/modules/esm/module_job:132:21)
at async ModuleJob.run (node:internal/modules/esm/module_job:214:5)
at async ModuleLoader.import (node:internal/modules/esm/loader:329:24)
at async loadESM (node:internal/process/esm_loader:34:7)
at async handleMainPromise (node:internal/modules/run_main:113:12)
