Reactハンズオンラーニング、ビルド実行時のエラー

Reactハンズオンラーニング　第2版の備忘録です。

以下の全体像としては、JSXを使ってレシピのコンポーネントを実装から、ビルド環境を学習している章立てです。

P 102 ページ、webpackビルド実行時にエラーとなったのでメモを残しておきます。

起こったこと

起こったこと

npx webpack --mode development

を実行すると２つエラーが返されたのでメモです。

エラー1：webpack.config.jsのdevtool

P 102 ページで、ビルド実行時に以下のエラーとなりました。

> npx webpack --mode development

[webpack-cli] Invalid configuration object. Webpack has been initialized using a configuration object that does not match the API schema.
 - configuration.devtool should match pattern "^(inline-|hidden-|eval-)?(nosources-)?(cheap-(module-)?)?source-map$".
   BREAKING CHANGE since webpack 5: The devtool option is more strict.
   Please strictly follow the order of the keywords in the pattern.

解決1

webpack.config.jsのdevtoolをコメントアウトすることで解消できました。

Webpack 5以降では、`devtool`が機能しないようです。

var path = require("path");

module.exports = {
  entry: "./src/index.js",
  output: {
    path: path.join(__dirname, "dist", "assets"),
    filename: "bundle.js",
  },
  // devtool: "#source-map",
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /(node_modules)/,
        loader: "babel-loader",
      },
      {
        test: /\.css$/i,
        use: ["style-loader", "css-loader"],
      },
    ],
  },
};

エラー2：style-loader、css-loaderのインストール

P 102 ページで、ビルド実行時に以下のエラーとなりました。

# 以下のコマンド実行
npx webpack --mode development

# 以下エラー
ERROR in ./src/components/Menu.js 4:0-20
Module not found: Error: Can't resolve 'style-loader' in '{各パス}/531_react'
resolve 'style-loader' in '{各パス}/531_react'
  Parsed request is a module
  using description file: {各パス}/531_react/package.json (relative path: .)
    resolve as module
      looking for modules in {各パス}/531_react/node_modules
        single file module
          using description file: {各パス}/531_react/package.json (relative path: ./node_modules/style-loader)
            no extension
              {各パス}/531_react/node_modules/style-loader doesn't exist
            .js
              {各パス}/531_react/node_modules/style-loader.js doesn't exist
        {各パス}/531_react/node_modules/style-loader doesn't exist
      {各パス}/node_modules doesn't exist or is not a directory
      /{各パス}/05_dev/React/node_modules doesn't exist or is not a directory
      /{各パス}/05_dev/node_modules doesn't exist or is not a directory
      /{各パス}/node_modules doesn't exist or is not a directory
      /{各パス}/node_modules doesn't exist or is not a directory
      /Users/node_modules doesn't exist or is not a directory
      /node_modules doesn't exist or is not a directory
 @ ./src/index.js 4:0-37 5:50-54

webpack 5.75.0 compiled with 1 error in 708 ms