rollup-plugin-buble version >= 0.19.0: `SyntaxError: Unexpected token in react-dom.development.js`

[kevinfiol]

I am trying to create a simple React project to get started learning React. It seems that for all versions of this plugin 0.19.0 and above, I receive this error. I have made a gist containing the error, my package.json, and my rollup.config.js over here: https://gist.github.com/kevinfiol/86b304a4cd6be2847dcc8662f1aaa724

Curiously enough, when I downgraded rollup-plugin-buble to version 0.18.0, this error disappeared, and everything seemed to work fine! I am using the latest versions of rollup, rollup-plugin-commonjs, rollup-plugin-node-resolve, and rollup-plugin-replace, otherwise.

At the suggestion of someone else, I changed my plugins array to look like this in my config, using rollup-plugin-buble version 0.19.0:

plugins: [
  resolve({ jsnext: true, browser: true }),
  commonjs({ include: ['node_modules/**'] }),
  replace({ 'process.env.NODE_ENV': JSON.stringify('development') }),
  buble()
]

I then received this error instead:

λ yarn run start
yarn run v1.12.3
$ rollup -c -w --environment DEV
rollup v1.1.0
bundles ./src/index.js → public\app.js...
[!] Error: Unexpected token
node_modules\react-dom\cjs\react-dom.development.js (2817:20)
2815:
2816: // These are HTML boolean attributes.
2817: ['allowFullScreen', 'async',
                          ^
2818: // Note: there is a special case that prevents it from being written to the DOM
2819: // on the client side because the browsers are inconsistent. Instead we call focus().
Error: Unexpected token
    at error (C:\.dev\js\.react\dota\node_modules\rollup\dist\rollup.js:3597:30)
    at Module.error (C:\.dev\js\.react\dota\node_modules\rollup\dist\rollup.js:14375:9)
    at tryParse (C:\.dev\js\.react\dota\node_modules\rollup\dist\rollup.js:14038:16)
    at Module.setSource (C:\.dev\js\.react\dota\node_modules\rollup\dist\rollup.js:14094:35)
    at C:\.dev\js\.react\dota\node_modules\rollup\dist\rollup.js:17407:20

1
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

I'm afraid I do not know enough about Buble or bundlers to diagnose the problem myself. All help is appreciated.

[kevinfiol]

I have found that am able to use the latest rollup-plugin-buble 0.19.6 just fine only if I downgrade React & ReactDOM down to version 16.3.0. Using React 16.4.0 with buble 0.19.6 results in the last error I mentioned.

[PepsRyuu]

I just stumbled across the problem as well. For some reason, Buble is removing commas from some of the arrays in ReactDOM:

['allowFullScreen' 'async',

Another example:

// String SVG attributes with the xlink namespace.
['xlink:actuate' 'xlink:arcrole', 'xlink:href', 'xlink:role', 'xlink:show', 'xlink:title', 'xlink:type'].forEach(function (attributeName) {
  var name = attributeName.replace(CAMELIZE, capitalize);
  properties[name] = new PropertyInfoRecord(name, STRING, false, // mustUseProperty
  attributeName, 'http://www.w3.org/1999/xlink');
});

// String SVG attributes with the xml namespace.
['xml:base', 'xml:lang', 'xml:space'].forEach(function (attributeName) {
  var name = attributeName.replace(CAMELIZE, capitalize);
  properties[name] = new PropertyInfoRecord(name, STRING, false, // mustUseProperty
  attributeName, 'http://www.w3.org/XML/1998/namespace');
});

I can't find any pattern. Downgrading React also works for me.

[anttikissa]

It may be because of this rollup bug: https://github.com/Rich-Harris/buble/issues/175

I reduced the code occurring in ReactDOM to:

['x'].forEach(function () { } // this comment causes the bug
);

['x', 'y', 'z'].forEach(console.log)

buble file.js =>

['x'].forEach(function () { } // this comment causes the bug
);

['x' 'y', 'z'].forEach(console.log)

[anttikissa]

While waiting for a proper fix, here's a possible workaround:

Since the bug appears to be caused by comments, I found that adding rollup-plugin-cleanup just before buble plugin fixed the problem in my case:

const rollupCleanup = require('rollup-plugin-cleanup')

    var rollupOptions = {
        input: rollupEntry,
        plugins: [
            /* ... */

            // Strip comments so buble (0.19.6) won't generate invalid code:
            rollupCleanup(),
            rollupBuble({ /* ... */ })
        ]
    }

[mourner]

Note that this was fixed in Buble with https://github.com/bublejs/buble/pull/194, we just need to release a new version that includes the fix and then bump the dependency here.

[adrianheine]

I finally released bublé v0.19.8.

[adrianheine]

09646f040dbb3452ce949d38055c510146372614