Rollup构建报错：Expected ';'、'}'或<eof>问题求助

问题描述 #

执行Rollup构建时触发RollupError，错误提示：

Expected ';'、'}'或<eof>（注意：导入非JavaScript文件需要使用相应插件）

即使将index.tsx中的原有代码注释，改为返回简单Hello World的函数，错误仍然存在。

涉及代码 #

index.tsx

import { Button } from "@mui/material";
import { styles } from "./styles";
import * as React from "react";
import classNames from "classnames";

type DefaultProps = {
  /**Different variations of button component */
  variant: "primary" | "secondary";

  /**Sizes of component */
  size: "small" | "medium" | "large";
};

type Props = DefaultProps & {
  /**Button Label */
  label: string | React.ReactNode;

  /**On Click handle for button */
  onClick: (event: React.SyntheticEvent) => void;
};

function ButtonComponent(props: Props) {
  const { label, onClick, variant = "primary", size = "medium" } = props;
  const buttonClasses = classNames({
    buttonPrimary: variant === "primary",
    buttonSecondary: variant === "secondary",
  });
  return (
    <Button
      onClick={onClick}
      className={buttonClasses}
      sx={styles.buttonDefaults}
      size={size}
    >
      {label}
    </Button>
  );
}

export default ButtonComponent;

Rollup配置文件

import typescript from "@rollup/plugin-typescript";
import { nodeResolve } from "@rollup/plugin-node-resolve";
import commonjs from "@rollup/plugin-commonjs";
import peerDepsExternalPlugin from "rollup-plugin-peer-deps-external";
import { dts } from "rollup-plugin-dts";

export default [
  {
    input: "src/index.ts",
    output: [
      { file: "dist/cjs/index.js", format: "cjs", sourcemap: true },
      { file: "dist/esm/index.js", format: "esm", sourcemap: true },
    ],
    plugins: [
      nodeResolve(),
      commonjs(),
      typescript({ tsconfig: "./tsconfig.json" }),
      peerDepsExternalPlugin(),
    ],
    external: ["react", "react-dom"],
  },
  {
    input: "src/index.ts",
    output: [{ file: "dist/types.d.ts", format: "es" }],
    plugins: [dts()],
  },
];

排查步骤与解决方案 #

1. 修正入口文件路径匹配 #

Rollup配置中input设置为src/index.ts，但实际业务代码文件是index.tsx，路径不匹配会导致Rollup解析错误。

• 方案1：将Rollup配置中的两处input改为src/index.tsx
• 方案2：将index.tsx文件重命名为index.ts

2. 确保TypeScript正确配置JSX转译 #

TSX文件需要TypeScript启用JSX转译，检查tsconfig.json：

• 确保compilerOptions中包含"jsx": "react-jsx"（对应React 17+）或"jsx": "react"（旧版本）
• 确认include数组包含src/**/*.tsx，确保TS能识别TSX文件

3. 处理非JavaScript文件的导入 #

错误提示明确提到导入非JS文件需要插件，你导入了./styles，如果该文件是CSS/SCSS等样式文件：

• 安装rollup-plugin-styles插件：npm install rollup-plugin-styles --save-dev
• 在Rollup配置的plugins数组中添加styles()（放在typescript插件之前）

4. 调整Rollup插件执行顺序 #

Rollup插件按顺序执行，错误的顺序可能导致解析异常，调整为以下顺序：

plugins: [
  peerDepsExternalPlugin(),
  nodeResolve(),
  commonjs(),
  typescript({ tsconfig: "./tsconfig.json" }),
  // 如果添加了rollup-plugin-styles，放在这里
],

内容的提问来源于stack exchange，提问作者Bimal Sunil