問題

react-datepickerを使用したいが、webpackでエラーが出て、表示できない。

webpack.config.js

修正前のwebpack.config.js

const path = require("path");

module.exports = {
  entry: "./src/index.jsx",
  output: {
    path: path.join(__dirname, "public/js"),
    filename: "bundle.js"
  },
  resolve: {
    modules: ["node_modules"],
    extensions: ["", ".js", ".jsx", ".css"]
  },
  module: {
    rules: [
      {
        test: /(\.js|\.jsx)$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader",
          options: {
            presets: [
              [
                "@babel/preset-env",
                {
                  targets: {
                    node: "current"
                  }
                }
              ],
              "@babel/preset-react"
            ],
            plugins: [
              [
                "babel-plugin-import",
                {
                  libraryName: "@material-ui/icons",
                  libraryDirectory: "",
                  camel2DashComponentName: false
                }
              ]
            ]
          }
        }
      },
      {
        test: /\.(sass|scss|css)$/,
        exclude: /node_modules/,
        use: [
           "style-loader",
          {
            loader: "css-loader",
            options: {
              localsConvention: "camelCase",
              modules: {
                localIdentName: "[path][name]__[local]--[hash:base64:5]"
              }
            }
          },
          'sass-loader'
        ]
      }
    ]
  }
};

警告文

ERROR in ./node_modules/react-datepicker/dist/react-datepicker.css 1:0
Module parse failed: Unexpected character '@' (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
> @charset "UTF-8";
| .react-datepicker__year-read-view--down-arrow,
| .react-datepicker__month-read-view--down-arrow,
 @ ./src/components/Navigation/presentation.jsx 7:0-52
 @ ./src/components/Navigation/container.jsx 4:0-40 29:72-82
 @ ./src/index.jsx 9:0-59 17:36-46

webpack 5.73.0 compiled with 1 error in 3400 ms

@が予期せぬ文字とか言ってくる

ダメだったこと

よく考えたら、webpack.config.jsでnode_moduleはexcludeをしていたから、webpackでreact-datepickerの中身のcssを読み込めていない

修正前のwebpack.config.js

{
        test: /\.(sass|scss|css)$/,
       // ---------ここ----------
        exclude: /node_modules/,
       // ----------------------
        use: [
           "style-loader",
          {
            loader: "css-loader",
            options: {
              localsConvention: "camelCase",
              modules: {
                localIdentName: "[path][name]__[local]--[hash:base64:5]"
              }
            }
          },
          'sass-loader'
        ]
      }

解決方法

node_moduleの中にあるreact-datepicker.cssをwebpackに認識してもらう必要があるため、以下を追加

追加するwebpack.config.js

      {
        test: /react-datepicker.css/,
        use: [{ 
            loader: "style-loader"
        }, {
            loader: "css-loader"
        }],
        exclude: /src/
      },

ついでに、最終的なwebpack.config.jsも掲載

webpack.config.js

const path = require("path");

module.exports = {
  entry: "./src/index.jsx",
  output: {
    path: path.join(__dirname, "public/js"),
    filename: "bundle.js"
  },
  resolve: {
    modules: ["node_modules"],
    extensions: ["", ".js", ".jsx", ".css"]
  },
  module: {
    rules: [
      {
        test: /(\.js|\.jsx)$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader",
          options: {
            presets: [
              [
                "@babel/preset-env",
                {
                  targets: {
                    node: "current"
                  }
                }
              ],
              "@babel/preset-react"
            ],
            plugins: [
              [
                "babel-plugin-import",
                {
                  libraryName: "@material-ui/icons",
                  libraryDirectory: "",
                  camel2DashComponentName: false
                }
              ]
            ]
          }
        }
      },
      {
        test: /react-datepicker.css/,
        use: [{ 
            loader: "style-loader"
        }, {
            loader: "css-loader"
        }],
        exclude: /src/
      },
      {
        test: /\.(sass|scss|css)$/,
        exclude: /node_modules/,
        use: [
           "style-loader",
          {
            loader: "css-loader",
            options: {
              localsConvention: "camelCase",
              modules: {
                localIdentName: "[path][name]__[local]--[hash:base64:5]"
              }
            }
          },
          'sass-loader'
        ]
      }
    ]
  }
};