React UI库Rollup打包后导入报错：导出缺失与process未定义问题求助

大家好，我目前正在开发一个React UI组件库，用Rollup做打包工具，只把Vite用来跑开发服务器。打包完成后我想测试下打包后的文件能不能正常运行，结果导入的时候遇到了两个头疼的问题，折腾了好一阵没解决，想请教下各位大佬！

问题1：导入CJS格式包提示导出缺失 #

我在测试的App.tsx里这么导入模块：

import { myModule } from '../dist/cjs/index';

结果直接抛出错误：

requested module '/dist/cjs/index.js' does not provide an export named 'my-----module'

但我去查看../dist/cjs/index.js文件，明明里面有我要导出的myModule模块，实在搞不懂为什么导入的时候会提示找不到。

问题2：导入ESM格式包提示process is not defined #

尝试换成导入ESM版本的打包文件：

import { myModule } from '../dist/esm/index';

结果又出现新错误，指向path.js中的这一行代码：

process.platform === 'win32'
错误提示为process is not defined

我的相关配置文件 #

Rollup配置 (rollup.config.js)

import resolve from "@rollup/plugin-node-resolve";
import commonjs from "@rollup/plugin-commonjs";
import typescript from "@rollup/plugin-typescript";
import postcss from "rollup-plugin-postcss";
import dts from "rollup-plugin-dts";
import json from '@rollup/plugin-json'

const packageJson = require("./package.json");

export default [
  {
    input: "src/index.ts",
    output: [
      {
        file: packageJson.main,
        format: "cjs",
        sourcemap: true,
      },
      {
        file: packageJson.module,
        format: "esm",
        sourcemap: true,
      },
    ],
    plugins: [
      resolve(),
      commonjs(),
      typescript({ tsconfig: "./tsconfig.json" }),
      postcss(),
      json()
    ],
  },
  {
    input: "dist/esm/types/index.d.ts",
    output: [{ file: "dist/index.d.ts", format: "esm" }],
    plugins: [dts(),json()],
    external: [/\.(css|less|scss)$/],
  },
];

tsconfig.json配置

{
  "compilerOptions": {
    "useDefineForClassFields": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noFallthroughCasesInSwitch": true,
    "target": "esnext",
    "lib": ["dom", "DOM.Iterable", "ESNext"],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": false,
    "baseUrl": ".",
    "typeRoots": ["node_modules/@types/"],
    "paths": {
      "@models/*" : ["src/models/*"],
      "@constants/*" : ["src/constants/*"],
      "@components/*" : ["src/components/*"],
      "@abi/*" : ["src/abi/*"],
      "@styles/*": ["src/styles/*"],
      "@utils/*": ["src/utils/*"],
      "@assets/*" : ["src/assets/*"],
      "@core/*" : ["src/core/*"],
      "@contexts/*" : ["src/contexts/*"],
      "@hooks/*" : ["src/hooks/*"],
      "@HOC/*" : ["src/HOC/*"]
    },
    "jsx" : "react-jsx",
    "module" : "esnext",
    "declaration" : true,
    "declarationDir" : "types",
    "sourceMap" : true,
    "outDir" : "dist",
    "moduleResolution" : "Node",
    "allowSyntheticDefaultImports": true,
    "emitDeclarationOnly": true
  },
  "include": ["src", "test/main.tsx", "test/App.tsx"],
  "references": [{ "path": "./tsconfig.node.json" }],
  "exclude": ["dist","node_modules","test"],
}

打包命令与测试代码 #

我的打包命令在package.json中定义为：

"build" : "rollup -c"

测试用的App.tsx代码：

import { myModule } from '../dist/cjs/index';

function App() {
  console.log(myModule);
  const mW = new myModule();
  return <>{mW!.render()}</>;
}

export default App;

我谷歌搜了一圈，没找到太贴合我这个场景的解决方案，希望各位能给点建议或者帮助，真的非常感谢！

备注：内容来源于stack exchange，提问作者Justin Seo