order of @rollup/plugin-commonjs and @rollup/plugin-babel

[tjx666]

Versions:

"rollup": "^3.7.5"
"@rollup/plugin-babel": "^6.0.3",
"@rollup/plugin-commonjs": "^24.0.0",

I read the doc: https://github.com/rollup/plugins/tree/master/packages/babel#using-with-rollupplugin-commonjs, and put @rollup/plugin-commonjs before @rollup/plugin-babel like following:

rollupPluginCommonjs(),
            rollupPluginCommonjs(),
            rollupPluginBabel({
                // runtime 需安装 @babel/runtime
                babelHelpers: 'bundled',
                exclude: '**/node_modules/**',
                configFile: options.babelConfigPath || false,
                extensions: [...DEFAULT_EXTENSIONS, '.ts', '.tsx'],
            }),

But when parse a js with decorator, occur error:

[!] (plugin commonjs--resolver) SyntaxError: Unexpected character '@' (9:0) in /Users/yutengjing/code/editor-next/packages/editor/chart-render/src/charts/column/index.js
src/charts/column/index.js (9:0)
 7:  * @class Column
 8:  */
 9: @DimensionRevise(TwoDimension)
    ^
10: export default class Column extends BaseColumn {
11:     getDefaultModel() {
SyntaxError: Unexpected character '@' (9:0) in xxx/yyy.js

Why documentation note @rollup/plugin-commonjs must before @rollup/plugin-babel? Any problems If I reverse their order?

[potatohoney-p]

For the versions in the question, you can keep the documented order and exclude your ES-module source from the CommonJS pass:

plugins: [
  commonjs({ exclude: ['src/**/*.js'] }),
  babel({
    babelHelpers: 'bundled',
    exclude: '**/node_modules/**',
    // Keep your existing Babel config, including the decorator transform.
    configFile: options.babelConfigPath || false,
    extensions: [...DEFAULT_EXTENSIONS, '.ts', '.tsx']
  })
]

Adjust that pattern to your source layout. Only exclude files that do not need CommonJS conversion; if your own source contains require/module.exports, excluding all of it is not the right fix. Also remove the duplicate rollupPluginCommonjs() call in the snippet.

The error occurs before Babel gets to transform the decorator: CommonJS analyzes the file using Rollup's parser. In those versions, that parser rejects @. transformMixedEsModules: false does not avoid this initial parsing step.

I reproduced the Unexpected character '@' failure with Rollup 3.7.5, CommonJS 24.0.0, and Babel plugin 6.0.3. In a minimal fixture containing a decorated ESM class and an imported local .cjs dependency, the exclusion above built successfully; importing the generated bundle confirmed both the decorator's effect and the dependency's value. Babel core was 7.28.5 with the legacy decorator transform, on Node 24.22.1—not your original full application/environment.

Reversing Babel and CommonJS also passed that small fixture, so it isn't inherently invalid for every input. The documented order ensures Babel processes the result of CommonJS conversion too. Filtering the decorated ESM files avoids changing that order for the dependencies that need both plugins.