「いまどきのJSプログラマーのための Node.jsとReactアプリケーション開発テクニック」で引っかかったところ

ググっても見つからなかったので、ちょっとメモで。
「いまどきのJSプログラマーのための Node.jsとReactアプリケーション開発テクニック」　をやっていたのですが、いくつかつまづいたのでそのお話です。環境は



node -v

v10.14.2

第２章「React 入門」「08 WEbpackでリソースファイルを変換する」(P.136~P.137)

エラー内容



npx webpack main.js out/test.js

上記実行したところ
↓



ERROR in multi ./main.js out/test.js

Module not found: Error: Can't resolve 'out/test.js' in '/Users/xxx/xxx/xxx'

 @ multi ./main.js out/test.js main[1]

自分の進め方

まあ書籍内のコマンドに沿ってやっていないからかもなんですが。
というのも、１つ目「Webpackをインストールしよう」について、



npm install -g webpack

が紹介されていて、いやああまりグローバルにインストールしたくないかも、と思って、



npm install --save webpack

で済ましたんですよ。
なので、続く書籍内の案内のコマンド



webpack main.js out/test.js

についても、



npx webpack main.js out/test.js

とやったわけです。それで先のエラーと言う感じです。

解決法

こちらにありました。
https://stackoverflow.com/questions/48973277/webpack-error-in-multi-module-not-found/49200185#49200185 ポイントは



--output

ですね。ということで、こういう感じでやりました。



npx webpack main.js --output out/test.js

これでうまくいきました。

第２章「React 入門」「08 WEbpackでリソースファイルを変換する」(P.１４１)

エラー内容



npx webpack

実行時に下記の内容
↓



ERROR in ./src/main.js

Module build failed (from ./node_modules/babel-loader/lib/index.js):

Error: Plugin/Preset files are not allowed to export objects, only functions. In /Users////node_modules/babel-preset-es2015/lib/index.js

    at createDescriptor (/Users////node_modules/@babel/core/lib/config/config-descriptors.js:178:11)

    at items.map (/Users////node_modules/@babel/core/lib/config/config-descriptors.js:109:50)

    at Array.map ()

    at createDescriptors (/Users////node_modules/@babel/core/lib/config/config-descriptors.js:109:29)

    at createPresetDescriptors (/Users////node_modules/@babel/core/lib/config/config-descriptors.js:101:10)

    at passPerPreset (/Users////node_modules/@babel/core/lib/config/config-descriptors.js:58:96)

    at cachedFunction (/Users////node_modules/@babel/core/lib/config/caching.js:33:19)

    at presets.presets (/Users////node_modules/@babel/core/lib/config/config-descriptors.js:29:84)

    at mergeChainOpts (/Users////node_modules/@babel/core/lib/config/config-chain.js:320:26)

    at /Users////node_modules/@babel/core/lib/config/config-chain.js:283:7

    at buildRootChain (/Users////node_modules/@babel/core/lib/config/config-chain.js:68:29)

    at loadPrivatePartialConfig (/Users////node_modules/@babel/core/lib/config/partial.js:85:55)

    at Object.loadPartialConfig (/Users////node_modules/@babel/core/lib/config/partial.js:110:18)

    at Object. (/Users////node_modules/babel-loader/lib/index.js:140:26)

    at Generator.next ()

    at asyncGeneratorStep (/Users////node_modules/babel-loader/lib/index.js:3:103)

    at _next (/Users////node_modules/babel-loader/lib/index.js:5:194)

    at /Users////node_modules/babel-loader/lib/index.js:5:364

    at new Promise ()

    at Object. (/Users////node_modules/babel-loader/lib/index.js:5:97)

    at Object._loader (/Users/***/***/***/node_modules/babel-loader/lib/index.js:220:18)

    at Object.loader (/Users/***/***/***/node_modules/babel-loader/lib/index.js:56:18)

    at Object. (/Users/***/***/***/node_modules/babel-loader/lib/index.js:51:12)

原因(おそらく)

ちゃんと見ていないですが、
案内されているbabel-preset-es2015とか、babel-preset-reactなどが古そうです。

対応方法

それぞれ、
babel-preset-es2015　→　@babel/preset-env
babel-preset-react → @babel/preset-react
をinstall



npm install --save-dev @babel/preset-env @babel/preset-react

そのあとwebpack.config.js内の該当箇所を



                options: {

                    presets: ['@babel/preset-env', '@babel/preset-react']

                }

に変更したら通るようになりました。