rollup-plugin-buble version >= 0.19.0: `SyntaxError: Unexpected token in react-dom.development.js`
Closed this issue · 7 comments
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.
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.
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.
It may be because of this rollup bug: bublejs/buble#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)
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({ /* ... */ })
]
}
Note that this was fixed in Buble with bublejs/buble#194, we just need to release a new version that includes the fix and then bump the dependency here.
I finally released bublé v0.19.8.