DRYな備忘録

Don't Repeat Yourself.

webpackでjsx記法(HTMLっぽいの)がsyntax errorになる問題

毎回つまづくのでメモ

問題

% npm run build

> myproject@1.0.0 build /Users/otiai10/proj/web/react-examples/myproject
> webpack

Hash: bbba9acdc8b879c1ad6d
Version: webpack 1.13.0
Time: 402ms
    + 1 hidden modules

ERROR in ./src/js/app.jsx
Module build failed: SyntaxError: /Users/otiai10/proj/web/react-examples/myproject/src/js/app.jsx: Unexpected token (6:7)
  4 | import 'font-awesome-webpack';
  5 |
> 6 | Render(<h1>hoge</h1>, document.getElementById('main'))
    |        ^
  7 |

調査

解決

@@ .babelrc
{
-  "presets": ["es2015"]
+  "presets": ["es2015", "react"]
 }
@@ package.json
  "devDependencies": {
    "babel": "*",
    "babel-core": "*",
    "babel-loader": "*",
+   "babel-preset-react": "*",
    "babel-preset-es2015": "*",

雑感

  • うつりかわりがはげしいですね
  • oreshinyaさんありがとうございます

DRY