JavaScript
JSX
Cygwin
reactjs
babel

CygwinでBabelを使おうとしてハマった - 「cannot write output format!」

初投稿です。

最近フロントエンドを始め、JavaScriptを勉強してます。

ReactJSを入門しようと、@teradonburiさんの「ReactJSで作る今時のSPA入門(基本編)」をやってみたところ、自分の環境のせいでどハマりしてしまいました。

表示されたエラーメッセージを検索しても解決策には至らなかったため、残しておきます。



環境

 Windows 10

 mintty 2.8.5 (x86_64-pc-cygwin)



問題

 Babelでjsxファイルをトランスパイルしようとすると以下のエラーが表示される。


cygwin-console

$ babel --plugins transform-react-jsx test.jsx

babel: cannot write output format!
Open Babel 2.3.2 -- Sep 27 2017 -- 16:47:36
Usage: babel [-i<input-type>] <name> [-o<output-type>] <name>
Try -H option for more information.

最初はプラグインなどが正しくインストールできていないんだろうかと思っていたが、package.json見てみるとちゃんと入ってそう。


package.json

{

"name": "reactjs",
"version": "1.0.0",
"main": "index.js",
"license": "MIT",
"devDependencies": {
"babel-cli": "^6.26.0",
"babel-plugin-transform-react-jsx": "^6.24.1"
}
}



原因

 npm(もしくはyarn)でインストールしたBabelではないBabelにパスが通っていた。


cygwin-console

$ which babel

/usr/bin/babel

えぇぇ~。どうやらCygwinのインストール時に紛れ込んでいた様子。


cygwin-console

$ ./node_modules/.bin/babel --plugins transform-react-jsx test.jsx

ReactDOM.render(React.createElement(
'h1',
null,
'Hello, world!'
), document.getElementById('root'));

node_modulesに入ってるbabelを指定してあげたらちゃんと動いた。



教訓

当たり前のことだけど、まずはバージョン確認すべきですね。

よく見たらエラーメッセージにもバージョン出てきてたし、package.jsonとバージョン違うのが一目瞭然。

ムダに時間を費やしてしまった。。。