週刊人生詰んだマガジン

フリーランスフロントエンドエンジニアTinyKittenのブログ

create-react-appで作ったReact Appでdecolatorを使う

mobx-reactを使おうと思ったら@observerの部分でSyntax error: Unexpected token。

どうやらcreate-react-appで作ったReactアプリケーションではデコレータが使えないらしい。

どうするかって言うとejectしてbabeればいいらしい。

yarn eject

yarn add -D babel-plugin-transform-decorators-legacy

からの

/config/webpack.config.{dev,prod}.jsに対して

// Process JS with Babel.
{
test: /\.(js|jsx)$/,
include: paths.appSrc,
loader: require.resolve(‘babel-loader’),
options: {
plugins: [‘transform-decorators-legacy’],
// This is a feature of `babel-loader` for webpack (not Babel itself).
// It enables caching results in ./node_modules/.cache/babel- loader/
// directory for faster rebuilds.
cacheDirectory: true
}
},

みたいな感じに変えればいいらしい。これはこれはdev.jsなのでprod.jsもよしなに変える。

 ただ、

f:id:tinykitten:20180920144842p:plain

やっぱりTypeError: Cannot read property 'bind' of undefinedが出てしまう。

うーん、どうにかしてmobx使えないかな?