/*#__PURE__*/ comment throws warning in Rollup

[andyford]

My team recently switched from Rollup 2.x to 4.x and now get the following warning when running rollup with the "watch" flag (rollup -c -w)

[0] [1:14:00 PM] Found 0 errors. Watching for file changes.
[0]
[1] (!) A comment
[1] 
[1] "/*#__PURE__*/"
[1]
[1] in "node_modules/@example/ui-components/dist/es/node_modules/react-focus-lock/dist/es2015/Lock.js" contains an annotation that Rollup cannot interpret due to the position of the comment. The comment will be removed to avoid issues.
[1] https://rollupjs.org/https://rollupjs.org/configuration-options/#pure
[1] node_modules/@example/ui-components/dist/es/node_modules/react-focus-lock/dist/es2015/Lock.js (130:2)
[1] 128:   var mergedRef = useMergeRefs([parentRef, setObserveNode]);
[1] 129:   return /*#__PURE__*/React.createElement(React.Fragment, null, hasLeadingGuards && [
[1] 130:   /*#__PURE__*/
[1]        ^
[1] 131:   // nearest focus guard
[1] 132:   React.createElement("div", {

I found a couple other threads discussing a similar issue and they seem to agree with the warning message that the /*#__PURE__*/ comment is misplaced in the source code https://github.com/swc-project/swc/issues/8199 https://github.com/intlify/vue-i18n-next/issues/1599

[theKashey]

Sounds like the problem is related to /*#__PURE__*/React.createElement, not /*#__PURE__*/createElement as it expected using modern transpilers/React 18

[mrm007]

The problem is actually the comment // nearest focus guard: https://github.com/theKashey/react-focus-lock/blob/1566a55fcb058686344b335f89a26e4ac1846fe0/src/Lock.js#L141-L142

When Babel runs, it retains the comment and adds the /*#__PURE__*/ on the line above the comment, triggering Rollup. See https://github.com/theKashey/react-focus-lock/pull/275 for a solution.

[theKashey]

Fixed in v2.9.7