How to fix “Support for the experimental syntax <OPERATOR>
isn’t currently enabled”
Problem ❓
I recently played around with the @primer/doctocat-template Gatbsy theme and encountered the following stack trace while building the repository.
It was originating from the @primer/gatsby-theme-doctocat package which was listed as a dependency in the @primer/doctocat-template
project.
Diagnosis ⛑
Upon inspection, I figured out that in the layout.js in the gatsby-theme-doctocat
, the developers have used the Logical Assignment
operator. Hence, the complaints from Babel.
Logical Assignment
seems to be a new proposal that requires an extra babel plugin called @babel/plugin-proposal-logical-assignment-operators
.
The stack trace was really helpful in this scenario since it clearly mentioned what should be done to fix the problem.
When I checked inside the theme-package, I couldn’t find any build
steps or transpile
steps.
Also, someone had already opened up an issue regarding the problem and the suggested solution to @babel/plugin-proposal-logical-assignment-operators
package as a dev dependency did not fix it for me.
The Caveat 🦄
The tricky thing here is that the problem lies in one of the dependencies of the template project. If this was origination from the source code of the project, we could have easily added the respective plugin inside a .babelrc
and get away with it.
Playing around with Babel 🧪
Since the root cause seems to be related to the Logical Assignment
operator transpilation, I decided to see if I can transpile the @primer/gatsby-theme-doctocat
package from inside the template project.
Gatsby already ships with a default babel configuration and it looks to be a .babelrc
as per the official documentation. Which usually skips node_modules
from being transpiled.
For use-cases like this, there are two possible options as per my knowledge.
- Extend the Gatsby webpack config and stop
@primer/gatsby-theme-doctocat
from being excluded from transpilation bybabel-loader
as explained here. - Add a
babel.config.json
(not a.babelrc
check the NOTE below for info) at the root of the template so that Gatsby will pick that instead of the default.
NOTE: A
babel.config.json
should be used instead of a.babelr
since we need thenode_modules
to be transpiled as well. This is suggested for mono-repos in the Babel documentation, but works in our favor in this scenario.
Since the second option seems to be a feasible easy solution, I decided to go ahead with that.
The Fix ⚙️
- As per the instructions from the documentation, I created a
babel.config.json
at the root of the template project.
2. Installed @babel/plugin-proposal-logical-assignment-operators
from npm.
3. Finally, I added @babel/plugin-proposal-logical-assignment-operators
in the plugins
array of the babel.config.json
.
Then I ran
yarn build
from the root and et voila, Success 🎉.
Contributing 🐙
Being a good citizen of the open-source community, I sent a pull request to the @primer/doctocat-template repository, so that my fellow developers can kickstart their documentation journeys with this amazing template easily.
Pull Request: https://github.com/primer/doctocat-template/pull/41
Signing off… ✌️❤️