使用Rollup构建的React组件导入Next.js时出现模块解析错误

我正在开发React/Next.js应用，独立开发了一款React折叠面板（accordion）组件，用Rollup打包后导入应用，运行时出现以下错误：

./node_modules/@zeilsell-user1/accordion-component/dist/esm/index.js
模块解析失败：Unexpected token (1:4)
可能需要合适的loader来处理该文件类型，当前未配置任何loader。
use clientfunction getDefaultExportFromCjs (x) {
| return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
| }

我实在搞不懂：组件明明是ESM格式，为什么会出现CJS相关的转换函数？Next.js基于Webpack，按理说完全支持CJS，而且我也找不到loader配置的问题。推测问题出在组件打包环节，附上我的Rollup配置、tsconfig和package.json文件，恳请社区帮忙解决这个困扰我很久的问题。

Rollup配置文件（rollup.config.mjs） #

import {nodeResolve} from '@rollup/plugin-node-resolve';
import commonjs from "@rollup/plugin-commonjs";
import typescript from "rollup-plugin-typescript2";
import banner2 from "rollup-plugin-banner2";
import dts from "rollup-plugin-dts";

import packageJson from "./package.json" assert { type: "json" };

export default [
  {
    input: "src/index.ts",
    output: [
      {
        file: packageJson.module,
        format: "esm",
        sourcemap: true,
      },
    ],
    plugins: [
      nodeResolve({extensions: [".js", ".jsx", ".ts", ".tsx", ".json"], }),
      commonjs(),
      typescript({
        tsconfig: "./tsconfig.json",
        verbosity: 1,
        clean: true,
        include: ["*.ts+(|x)", "**/*.ts+(|x)"],
      }),
      banner2(() => `use client`),
    ],
  },
  {
    input: "dist/esm/index.d.ts",
    output: [{ file: "dist/index.d.ts", format: "esm" }],
    plugins: [dts()],
  },
];

tsconfig.json配置 #

{
  "compilerOptions": {
    "target": "es2016",
    "lib": ["es6", "dom", "es2016", "es2017"],
    "jsx": "react-jsx",
    "module": "ESNext",
    "moduleResolution": "node",
    "declaration": true,
    "sourceMap": true,
    "outDir": "dist",
    "preserveConstEnums": true,
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "strict": true,
    "noImplicitAny": true,
    "strictNullChecks": true,
    "noImplicitThis": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noImplicitReturns": true,
    "noFallthroughCasesInSwitch": true,
    "skipLibCheck": true
  },
  "include": ["src/**/*.ts*"],
  "exclude": ["node_modules", "dist"]
}

package.json配置 #

{
  "name": "@zeilsell-user1/accordion-component",
  "type": "module",
  "version": "0.0.5",
  "description": "This is a simple accordion component to be used with react/next apps",
  "author": "...>",
  "license": "MIT",
  "private": false,
  "main": "index.js",
  "module": "dist/esm/index.js",
  "files": [ "dist" ],
  "types": "dist/index.d.ts",
  "repository": "https://github.com/zeilsell-user1/accordion-component.git",
  "publishConfig": { "registry": "https://npm.pkg.github.com/zeilsell-user1" },
  "scripts": {

    "rollup": "rollup -c rollup.config.mjs",
    "rollup:watch": "rollup -cw",

  },
  "dependencies": {

  },
  "devDependencies": {
  }
}

我已经尝试过在package.json中添加"type": "module"，以及在Rollup配置中使用nodeResolve插件，但问题都没有解决。

内容的提问来源于stack exchange，提问作者Richard George