#Uncaught SyntaxError: Unexpected token < が直らない

jsx
1const result = {
2    name: 'api/restaurant',
3    title: 'Restaurant',
4    icon: 'store',
5    category: 'common',
6    edit(props) {
7        return (
8            <div className={props.className}>
9                <p>Edit</p>
10            </div>
11        );
12    },
13    save() {
14        return (
15            <div>
16                <p>Save</p>
17            </div>
18        );
19    }
20};
21
22export default result;

コンソールで上記のファイルの <div className={props.className}> の部分で Uncaught SyntaxError: Unexpected token < エラーが発生しています。色々試していますが、直りません。

環境

Wordpress 4.9.8
Gutenberg
React
jsx

やったこと

import React from 'react'; の記述
babel-preset-react のインストール

行動規範の内容に同意します

回答1件

ベストアンサー

transform-react-jsxが入ってないんじゃないですかね

どっかでパクってきたのまんまですが
うちの使ってる.babelrc載せときます

json
1{
2	"presets": [
3		[ "env", {
4			"modules": false,
5			"targets": {
6				"browsers": [
7					"last 2 Chrome versions",
8					"last 2 Firefox versions",
9					"last 2 Safari versions",
10					"last 2 iOS versions",
11					"last 1 Android version",
12					"last 1 ChromeAndroid version",
13					"ie 11"
14				]
15			}
16		} ]
17	],
18	"plugins": [
19		[ "transform-react-jsx", {
20			"pragma": "wp.element.createElement"
21		} ]
22	]
23}