やりたいこと

Truffle Boxの「React」のチュートリアルを試したい。

問題

公式チュートリアルの手順に従うと、5番目のアプリ起動でエラーが生じる（2018/9現在）。

$ npm run start

> Bagspace@0.0.1 start /Users/masahiro
> nodemon bin/www

[nodemon] 1.12.1
[nodemon] to restart at any time, enter `rs`
[nodemon] watching: *.*
[nodemon] starting `node bin/www`
sequelize deprecated String based operators are now deprecated. Please use Symbol based operators for better security, read more at http://docs.sequelizejs.com/manual/tutorial/querying.html#operators node_modules/sequelize/lib/sequelize.js:237:13
[devServer] yarn run v1.1.0

[devServer] $ node build/dev-server.js

[devServer] [HPM] Proxy created: /api  ->  http://127.0.0.1:3000

[devServer] > Starting dev server...

[devServer] (node:16007) DeprecationWarning: Tapable.plugin is deprecated. Use new API on `.hooks` instead

[devServer] (node:16007) DeprecationWarning: Tapable.apply is deprecated. Call apply on the plugin directly instead

[devServer] /Users/masahiro/node_modules/html-webpack-plugin/lib/compiler.js:81
        var outputName = compilation.mainTemplate.applyPluginsWaterfall('asset-path', outputOptions.filename, {
                                                  ^

TypeError: compilation.mainTemplate.applyPluginsWaterfall is not a function
    at /Users/masahiro/node_modules/html-webpack-plugin/lib/compiler.js:81:51
    at compile (/Users/masahiro/node_modules/webpack/lib/Compiler.js:243:11)
    at hooks.afterCompile.callAsync.err (/Users/masahiro/node_modules/webpack/lib/Compiler.js:488:14)
    at AsyncSeriesHook.eval [as callAsync] (eval at create (/Users/masahiro/node_modules/webpack/node_modules/tapable/lib/HookCodeFactory.js:24:12), <anonymous>:6:1)
    at AsyncSeriesHook.lazyCompileHook [as _callAsync] (/Users/masahiro/node_modules/webpack/node_modules/tapable/lib/Hook.js:35:21)
    at compilation.seal.err (/Users/masahiro/node_modules/webpack/lib/Compiler.js:485:30)
    at AsyncSeriesHook.eval [as callAsync] (eval at create (/Users/masahiro/node_modules/webpack/node_modules/tapable/lib/HookCodeFactory.js:24:12), <anonymous>:6:1)
    at AsyncSeriesHook.lazyCompileHook [as _callAsync] (/Users/masahiro/node_modules/webpack/node_modules/tapable/lib/Hook.js:35:21)
    at hooks.optimizeAssets.callAsync.err (/Users/masahiro/node_modules/webpack/lib/Compilation.js:966:35)
    at AsyncSeriesHook.eval [as callAsync] (eval at create (/Users/masahiro/node_modules/webpack/node_modules/tapable/lib/HookCodeFactory.js:24:12), <anonymous>:6:1)
    at AsyncSeriesHook.lazyCompileHook [as _callAsync] (/Users/masahiro/node_modules/webpack/node_modules/tapable/lib/Hook.js:35:21)
    at hooks.optimizeChunkAssets.callAsync.err (/Users/masahiro/node_modules/webpack/lib/Compilation.js:957:32)
    at _err0 (eval at create (/Users/masahiro/node_modules/webpack/node_modules/tapable/lib/HookCodeFactory.js:24:12), <anonymous>:11:1)
    at /Users/masahiro/node_modules/webpack/node_modules/uglifyjs-webpack-plugin/dist/index.js:334:11
    at _class.runTasks (/Users/masahiro/node_modules/webpack/node_modules/uglifyjs-webpack-plugin/dist/uglify/index.js:63:9)
    at UglifyJsPlugin.optimizeFn (/Users/masahiro/node_modules/webpack/node_modules/uglifyjs-webpack-plugin/dist/index.js:253:16)

[devServer] error Command failed with exit code 1.

[devServer] info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

devServer exited with code 1

解決方法

Reactについてまとめられた client フォルダに移動の上、起動する。

$ cd client
$ npm run start

原因

Truffle Boxのアップデートにチュートリアルが追いついていない。

以前は client というフォルダはなく、ルートディレクトリにReactの中身が展開されていた。

旧版

├── box-img-lg.png
├── box-img-sm.png
├── build
├── config
├── contracts
├── migrations
├── node_modules
├── package-lock.json
├── package.json
├── public
├── scripts
├── src
├── test
├── truffle-config.js
└── truffle.js

新版

├── build
├── client # <- ここにReactがまとめられた
├── contracts
├── migrations
├── test
├── truffle-config.js
└── truffle.js

教訓

チュートリアルの更新が遅れるのは世の常。