Rollup and optional chaining

[marie-j]

Describe the bug When using optional chaining in a module bundled with rollup, an error is thrown (plugin commonjs) SyntaxError: Unexpected token

Additional context Looks like this issue was fixed in version 2.11.0 of rollup (https://github.com/rollup/rollup/blob/master/CHANGELOG.md#pull-requests-51)

[antleblanc]

Hi @marie-j!

Yup! We will bump rollup on our shared rollup configuration package located here:

• https://github.com/ovh/manager/tree/master/packages/manager/tools/component-rollup-config

Currently:

$ yarn why rollup | grep Found
=> Found "[email protected]"

Pending branch:

• https://github.com/ovh/manager/compare/develop...bugfix/upgrade-rollup-config?expand=1#diff-055d85d1d80602832dc33d851fc197cc1d6d30381fd10d79448f19012d02f13eR57

[antleblanc]

package.json:

{
  "name": "foo",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "devDependencies": {
    "@ovh-ux/component-rollup-config": "^9.0.1"
  },
  "scripts": {
    "build": "rollup -c"
  }
}

rollup.config.js:

import rollupConfig from '@ovh-ux/component-rollup-config';

const config = rollupConfig({
  input: './src/index.js',
});

const outputs = [
  config.es({
    output: {
      sourcemap: false,
    },
  }),
];

export default outputs;

src/index.js:

const adventurer = {
  name: 'Alice',
  cat: {
    name: 'Dinah'
  }
};

const dogName = adventurer.dog?.name;
console.log(dogName);
// expected output: undefined

console.log(adventurer.someNonExistentMethod?.());
// expected output: undefined

dist/esm/index.js:

function ___$insertStyle(css) {
  if (!css) {
    return;
  }
  if (typeof window === 'undefined') {
    return;
  }

  var style = document.createElement('style');

  style.setAttribute('type', 'text/css');
  style.innerHTML = css;
  document.head.appendChild(style);
  return css;
}

var _adventurer$dog, _adventurer$someNonEx;

var adventurer = {
  name: 'Alice',
  cat: {
    name: 'Dinah'
  }
};
var dogName = (_adventurer$dog = adventurer.dog) === null || _adventurer$dog === void 0 ? void 0 : _adventurer$dog.name;
console.log(dogName); // expected output: undefined

console.log((_adventurer$someNonEx = adventurer.someNonExistentMethod) === null || _adventurer$someNonEx === void 0 ? void 0 : _adventurer$someNonEx.call(adventurer)); // expected output: undefined

@marie-j Issue seems to be fixed.

[marie-j]

Hello @antleblanc,

After some checks I still can't make it work. Issue is not directly in a rollup built dist but in a non built module used by rollup as you can see with https://github.com/ovh/manager/tree/test/rollup-chaining. If I try to build the navbar it will fail due to some optional chaining in the models module Maybe the module needs to be processed first

[antleblanc]

(...) a non built module used by rollup

Isn't supposed to the be same as src/index.js where optional chaining is used?

I'll try to get a more in-depth look at the following branch test/rollup-chaining.

[JeremyDec]

Hi @marie-j,

Issue should now be fixed.

Thanks