static class property not working with Babel

I am using JSDOC and all it supported npm plugins to create nice documentation. Getting hard time when jsdoc is running and parsing JSX file it always throws error as below near = sign

SyntaxError: unknown: Unexpected token
export default class SaveDesign extends Component {
 static displayName = 'SaveDesign';
}

conf.json file
{
  "source": {
    "include": [ "src/app/test.js", "src/app/components/Modals/Template/SaveDesign.jsx"],
    "exclude": [ "src/fonts", "src/icons", "src/less", "src/vector-icon" ],
    "includePattern": ".+\.js(doc|x)?$",
    "excludePattern": "(^|\/|\\)_"
  },
  "plugins": ["node_modules/jsdoc-babel"],
  "babel": {
    "extensions": ["js", "es6", "jsx"],
    "presets": ["es2015"]
  },
  "jsx": {
    "extensions": ["js", "jsx"]
  }
}

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

Class properties aren’t part of the ES2015 spec, so they’re not part of the ES2015 Babel preset either. The proposal to add class properties to the language is currently at Stage 3 of the standardization process, so you need the Stage 3 preset.

https://babeljs.io/docs/plugins/preset-stage-3/

Alternatively, you could just install the class properties plugin on its own:

https://babeljs.io/docs/en/babel-plugin-proposal-class-properties

Method 2

As stage-2 , stage-3 or any other stage preset are removed in babel 7 or newer so you have to add plugin separately.
Please use “require()” for importing plugin otherwise it wont work.
Here is the .bablerc file –

module.exports = {
  plugins: [
    [require("@babel/plugin-proposal-class-properties"), { loose: false }]
  ],
  presets: ["@babel/preset-env", "@babel/preset-react"]
};

Method 3

@Joe thanks yes the plugin which you mentioned will help to solve the problem. In my case the way I solved it was by making sure to have all .babelrc dependency copied to jsdoc babel property as well I was missing this piece which was giving me all the errors.


All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

0 0 votes
Article Rating
Subscribe
Notify of
guest

0 Comments
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x