0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

Truffle Boxの「React」でアプリを起動できない時の解消方法

Last updated at Posted at 2018-09-11

#やりたいこと
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
React_App.png

#原因
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

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

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?