@rollup/plugin-commonjs解析package.json抛出unexpected token错误问题

为何@rollup/plugin-commonjs会读取我的package.json文件？如何阻止该行为，无需额外引入@rollup/plugin-json即可解决报错？

我编写了一份面向Node.js、遵循CommonJS规范（使用require() / module.exports()语法）的JS文件，需要在浏览器端运行，因此使用Rollup进行打包，完成Node.js代码的浏览器兼容转换。

运行环境 #

• macOS Monterey 12.4版本
• npm 8.3.1版本
• node 16.14.0版本
• rollup 2.75.6版本
• @rollup/plugin-json 4.1.0版本

rollup.config.js配置 #

当前使用的rollup.config.js配置如下：

// rollup.config.js
import commonjs from '@rollup/plugin-commonjs';
// import json from '@rollup/plugin-json';

const devMode = (process.env.NODE_ENV === 'development');
console.log(`${ devMode ? 'development' : 'production' } mode bundle`);

export default [
  {
    input: "test/_client_test.js",
    output: {
      file: 'build/test/test.js',
      format: 'iife'
    },
    plugins: [
      commonjs()
    ]
  }
];

问题现象 #

执行npm rollup -c命令打包时，输出如下错误信息：

[!] (plugin commonjs--resolver) Error: Unexpected token (Note that you need @rollup/plugin-json to import JSON files)
package.json (2:8)
1: {
2:   "name": "my-package",
           ^
3:   "version": "0.0.1",
4:   "description": "hello world",
Error: Unexpected token (Note that you need @rollup/plugin-json to import JSON files)
    at error (/***/node_modules/rollup/dist/shared/rollup.js:198:30)
    at Module.error (/***/node_modules/rollup/dist/shared/rollup.js:12553:16)
    at Module.tryParse (/***/node_modules/rollup/dist/shared/rollup.js:12930:25)
    at Module.setSource (/***/node_modules/rollup/dist/shared/rollup.js:12835:24)
    at ModuleLoader.addModuleSource (/***********/rollup.js:22309:20)

问题原因 #

@rollup/plugin-commonjs在解析CommonJS模块依赖时，默认会尝试读取链路中的package.json，用于识别模块入口、导出规则等配置。当你的业务代码或依赖中存在对package.json的显式require引用，或是插件自动扫描到根目录package.json尝试解析时，Rollup原生不支持直接导入JSON文件，就会抛出该语法错误。

解决方法（无需引入@rollup/plugin-json） #

1. 先排查入口文件test/_client_test.js及其依赖链，删除所有require('./package.json')这类浏览器环境下无效的package.json引用代码。
2. 给@rollup/plugin-commonjs添加ignore配置，直接屏蔽插件对所有package.json文件的解析逻辑，修改后的配置如下：

// rollup.config.js
import commonjs from '@rollup/plugin-commonjs';

const devMode = (process.env.NODE_ENV === 'development');
console.log(`${ devMode ? 'development' : 'production' } mode bundle`);

export default [
  {
    input: "test/_client_test.js",
    output: {
      file: 'build/test/test.js',
      format: 'iife'
    },
    plugins: [
      commonjs({
        ignore: [/package\.json$/]
      })
    ]
  }
];

配置完成后重新执行打包命令即可正常构建，不需要额外引入JSON处理插件。

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