使用Rollup构建React NPM包时遭遇RollupError: Expression expected错误

这个错误的核心原因是Rollup默认无法识别JSX语法，你在数组.push里写的<li>标签会被Rollup当作普通JavaScript语法解析，自然会报“期望表达式”的错误，跟加不加大括号没关系。

解决步骤 #

1. 安装JSX转译插件

推荐用@rollup/plugin-react（专门针对React项目的Rollup插件，处理JSX更简便）：

npm install --save-dev @rollup/plugin-react

2. 修改Rollup配置文件

在你的rollup.config.js中添加该插件，并配置JSX运行时（适配React 17+的自动JSX runtime）：

import react from '@rollup/plugin-react';

export default {
  input: 'src/horizon-card/index.js',
  output: {
    file: 'dist/index.js', // 输出路径根据你的需求调整
    format: 'esm' // 可选cjs、umd等格式，按需选择
  },
  plugins: [
    react({
      jsxRuntime: 'automatic'
    })
  ]
};

备选方案：用Babel转译JSX

如果你习惯用Babel生态，也可以用@rollup/plugin-babel配合React预设：

1. 安装依赖：

npm install --save-dev @rollup/plugin-babel @babel/core @babel/preset-react

2. 修改配置：

import babel from '@rollup/plugin-babel';

export default {
  input: 'src/horizon-card/index.js',
  output: {
    file: 'dist/index.js',
    format: 'esm'
  },
  plugins: [
    babel({
      presets: ['@babel/preset-react'],
      babelHelpers: 'bundled'
    })
  ]
};

3. 验证代码写法

确保你的JSX是在React组件的上下文里使用，比如：

import React from 'react';

const HorizonCard = () => {
  let items = [];
  items.push(<li>测试项</li>); // 现在Rollup能正确转译这段JSX
  return (
    <div>
      <ul>{items}</ul>
    </div>
  );
};

export default HorizonCard;

配置完成后重新执行Rollup构建命令，这个错误应该就能解决了。

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