依存関係から next/react 機能コンポーネントに関数をインポートしようとしていますが、どういうわけか次のエラーが発生し続けます。
構文エラー: 予期しないトークン 'export'
私がインポートしようとしている関数は次のとおりです:
export function classes(...args) {
const list = [];
for (let i = 0; i < args.length; i++) {
const entry = args[i];
if (typeof entry === "string") {
list.push(entry);
}
else {
for (let key in entry) {
if (entry[key]) {
list.push(key);
}
}
}
}
return list.join(" ");
さらに、上記classes.d.ts
の次に次のものがありますclasses.js
:
export declare function classes(...args: Array<string | {
[key: string]: any;
}>): string;
プロジェクト内からこのコードを同じようにエクスポートすると正常に機能しますが、 の外部ライブラリを使用すると機能しませんnode_modules
。なぜでしょうか?
について読みましたnext-transpile-module
が、これも実行できませんでした。
インポートを機能させる唯一の方法は相対パスを使用することです../../node_modules/thedependency/class
。どうすれば適切に機能させることができるでしょうか?
ベストアンサー1
アップデート: next-transpile-modulesのすべての機能がNext.js 13.1にネイティブに組み込まれました。Nextのトランスパイルパッケージ外部パッケージをトランスパイルするオプション
古い回答: そのため、node_modules フォルダー内の依存関係は、ES6 インポート/エクスポート モジュールを使用して関数をエクスポートします。ブラウザーは ES6 モジュール構文を認識できないため、ブラウザーで実行するとコードがエラーをスローします。
その理由は、デフォルトでは、Next.js は babel-loader を src フォルダー内の ES6 コードのみをトランスパイルするように設定し、node_modules からインポートされた ES6 コードはトランスパイルされずに直接最終バンドルに入るためです。
ファイルのwebpack設定を変更してnext.config.js
、babelローダーがes6依存関係をトランスパイルできるようにします。このパッケージを使用することをお勧めします。次のトランスパイルモジュール