CODEWITHSUNDEEP
reactjsbabeljsantd
junlin
junlin

Reputation: 2035

Babel react jsx config not works

I'd configured babel-plugin-transform-react-jsx in .bablerc

{
  "presets": [...],
  "plugins": [
    [
      "@babel/plugin-transform-runtime",
      {
        "corejs": false,
        "helpers": true,
        "regenerator": true,
        "useESModules": false
      }
    ],
    ["@babel/plugin-proposal-decorators", { "legacy": true }],
    ["@babel/plugin-proposal-class-properties", { "loose": true }],
    ["import", { "libraryName": "antd", "libraryDirectory": "es", "style": true }],
    "@babel/plugin-transform-react-jsx"
  ]
}

But the jsx code compiled fail when setting AntD Table locale.emptyText (the property value can be React.Node or Function described in rc-table)

import { Table } in 'antd'
<Table
  locale={{ emptyText=<div><img src="..."></div> }}
>

The error:

Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: /path/to/page.js: Unexpected token (77:31)

  75 |             dataSource={dataSource}
  76 |             loading={false}
> 77 |             locale={{ emptyText=<div><img src=""></div> }}
     |                                ^

Another, I know it works if writing as function:

locale={{ emptyText: () => <div><img src=""></div> }}

Upvotes: 0

Views: 163

Answers (2)

hannad rehman
hannad rehman

Reputation: 4331

locale={{ emptyText=<div><img src=""></div> }}
                   ^

the error message is clear, you are using = instead of :

Upvotes: 0

Shubham Khatri
Shubham Khatri

Reputation: 281686

You have a typo in your code, the locale attribute expects an object and hence key-value pairs separated by : and not =

locale={{ emptyText: <div><img src="..."></div> }}

should work

Upvotes: 1

Related Questions