Docz: Unable to customize babel plugins with actions.setBabelPlugin

[VigMed01]

Question

Unable to use any form of DocZ or Gatsby configuration to get an experimental syntax into my project (optionalChaining).

Description
I am trying to standup a new project and moving some existing components over to use DocZ. When I run yarn docz:dev I get the following error:

Syntax Error: SyntaxError: Support for the experimental syntax 'optionalChaining
' isn't currently enabled

What I've tried:

• https://www.gatsbyjs.org/docs/babel/ and https://www.docz.site/docs/powered-by-gatsby
  Here I created a gatsby-node.js file in the root of my docZ project with the following content:
  exports.onCreateBabelConfig = ({ actions }) => { actions.setBabelPlugin({ name: '@babel/plugin-proposal-optional-chaining', }); };

My package.json contains the the proper babel plugins used in other repos which correctly are bringing in the support for optionalChaining syntax.

I also have a .babelrc file in the root of my project which tries to bring in the optionalChaining plugin.

After running the yarn decz:dev command I get the same error, and searching through the entire built .docz folder I can't find any reference to @babel/plugin-proposal-optional-chaining other than in the gatsby-node.custom.js, I would expect it to get written into other places if it were applied correctly.

If you have any suggestions or ideas for me to try this other ways I'd love your feedback.

If nothing else, thank you for taking time out of your life to make this application and to answer questions and concerns.

[rakannimer]

Hey @vigmed01

Thanks for reporting the issue.

Any chance you can provide a repo with a small repro of the problem so we can help debug/fix ?

[VigMed01]

Hi @rakannimer, here is a stripped down repo I just created to show the same issue. Thanks!
https://github.com/VigMed01/docz-issue-sample

[leggomuhgreggo]

FWIW I was able to recreate the issue.

From the demo repo

exports.onCreateBabelConfig = ({ actions }) => {
    actions.setBabelPlugin({
        name: `plugin-proposal-optional-chaining`,
    });
};

I tried changing the name to use the @babel/ prefix so:

exports.onCreateBabelConfig = ({ actions }) => {
  actions.setBabelPlugin({
    name: `@babel/plugin-proposal-optional-chaining`
  });
};

But no dice

Hope that's helpful

[rakannimer]

Thanks @VigMed01 and @leggomuhgreggo for the repro.

The issue should be fixed in version 2.0.0-rc.43.

Could you try it out with the change @leggomuhgreggo suggested ?

[VigMed01]

It works! Thank you very much for fixing! Thank you @leggomuhgreggo for confirming the issue.
Closing this with my comment.