#やりたいこと
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
#教訓
チュートリアルの更新が遅れるのは世の常。