Home / Questions / 350703
Accepted
Cristian Budzicz
Asked: 2020-04-30 07:56:44 +0800 CST 2020-04-30 07:56:44 +0800 CST

React routing problem with babel in navbar

  • 772

I am learning the use of routing following the following tutorial . Where bootstrap is imported and a navbar is used to navigate between pages. The component and the following function are declared:

getNavLinkClass = (path) => {
    return this.props.location.pathname === path ? 'active' : '';
}

But when transpiling I get the following error:

getNavLinkClass = (path) => {
|                     ^
|         return this.props.location.pathname === path 
              ?  'active' : '';
|     }
|     render() {

Add @babel/plugin-proposal-class-properties (https://git.io/vb4SL)
to the 'plugins' section of your Babel config to enable transformation.
at parser.next (<anonymous>)
at normalizeFile.next (<anonymous>)
         at run.next (<anonymous>)
      at transform.next (<anonymous>)


 @ ./assets/js/app.js 25:0-56

In my package.json I have the following configured:

{
"devDependencies": {
  "@babel/plugin-proposal-class-properties": "^7.8.3",
  "@babel/preset-env": "^7.9.5",
"@babel/preset-react": "^7.9.4",
"@symfony/webpack-encore": "^0.29.1",
"babel-preset-react": "^6.24.1",
"bootstrap": "^4.4.1",
"prop-types": "^15.7.2",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"webpack-notifier": "^1.8.0"
 },
"dependencies": {
"node-sass": "^4.14.0"
}
}

Edit Add the following .babel file

{
 "plugins": [
   ["@babel/plugin-proposal-class-properties"]
 ]
}

Because it was not incorporated. It does not show the first error but now it generates the following:

Syntax Error: C:\xampp\htdocs\web_cotizacion_repuestos\assets\js\app.js:
  Unexpected token (17:8)

  15 |        render() {
  16 |         return (
> 17 |           <div>
     |             ^

If you can guide me how to solve it, or throw me a line. In my project I don't have a specific babel config file, could it be that???

reactjs

1 Answers

  1. Best Answer

    Install the plugin on dev in the package.json file

     * npm install @babel/plugin-proposal-class-properties --save-dev

    and edit your .babelrc file or create it in the root along with your package.json, copy and paste this

    {
  "presets": [
      "@babel/preset-env",
      "@babel/preset-react"
  ],
  "plugins": [
      [
        "@babel/plugin-proposal-class-properties"
      ]
  ]
}

    Also don't forget to edit your webpack.config.js file by adding this

    'plugins': ['@babel/plugin-proposal-class-properties']}]

    You can see more details about the solution in this link

    https://stackoverflow.com/questions/52237855/support-for-the-experimental-syntax-classproperties-isnt-currently-enabled/52504340#52504340

    • 1