Next.js 構文エラー「予期しないトークン 'export'」質問する

Next.js 構文エラー「予期しないトークン 'export'」質問する

依存関係から 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依存関係をトランスパイルできるようにします。このパッケージを使用することをお勧めします。次のトランスパイルモジュール

おすすめ記事