React项目中rollup-plugin-external-globals报Unexpected token错误求助

错误原因 #

rollup-plugin-external-globals仅用于替换JS模块中的外部依赖为全局变量，但它会尝试解析所有被rollup处理的模块文件。CSS不属于JS语法，插件解析时必然抛出语法错误，哪怕CSS内容为空也无法避免。

解决方案 #

核心思路是让CSS文件先被专门的rollup CSS处理插件处理，且该插件需放在externalGlobals之前执行，避免CSS进入externalGlobals的解析流程。

步骤1：安装CSS处理插件 #

选择一个rollup兼容的CSS插件，按需选择：

# 功能全面的postcss插件（支持预处理、压缩等）
npm install rollup-plugin-postcss --save-dev

# 仅提取CSS的轻量插件
npm install rollup-plugin-css-only --save-dev

步骤2：修改rollup配置文件 #

将CSS处理插件放在externalGlobals插件之前配置：

示例1：使用rollup-plugin-postcss

import externalGlobals from 'rollup-plugin-external-globals';
import postcss from 'rollup-plugin-postcss';

export default {
  input: 'src/lib/index.js',
  output: [
    { file: 'dist/index.es.js', format: 'es' },
    { file: 'dist/index.js', format: 'umd', name: 'YourLibraryName' }
  ],
  plugins: [
    // 优先处理CSS文件
    postcss({
      extract: true, // 将CSS提取为单独文件（推荐）
      minimize: true, // 可选：开启CSS压缩
      sourceMap: true // 可选：生成CSS sourcemap
    }),
    // 再处理JS模块的外部全局变量替换
    externalGlobals({
      react: 'React',
      'react-dom': 'ReactDOM',
    }),
    // 其他插件（如babel等）按需添加
  ]
};

示例2：使用rollup-plugin-css-only

import externalGlobals from 'rollup-plugin-external-globals';
import css from 'rollup-plugin-css-only';

export default {
  input: 'src/lib/index.js',
  output: [
    { file: 'dist/index.es.js', format: 'es' },
    { file: 'dist/index.js', format: 'umd', name: 'YourLibraryName' }
  ],
  plugins: [
    // 提取CSS到指定文件
    css({ output: 'dist/index.css' }),
    // 处理JS外部全局变量
    externalGlobals({
      react: 'React',
      'react-dom': 'ReactDOM',
    }),
    // 其他插件
  ]
};

步骤3：验证配置 #

确保入口JS文件中正确导入CSS：

// src/lib/index.js
import './index.css';
// 其余业务代码...

重新执行rollup命令：

rollup --config rollup.config.mjs -w

此时CSS文件会被专门插件处理，不会进入externalGlobals的解析流程，语法错误即可解决。

内容的提问来源于stack exchange，提问作者Ahmet Emre Kilinc