webackのCan't resolveが解決できません

Question

お世話になっております。

現在React + reduxで開発を行っており、 reduxの内容を永続的に記録するためredux-localstorageを利用したいと考えております。
そこでredux-localstorageを使用する上でおそらくadapterが必要だと思うのですが、

import adapter from 'redux-localstorage/lib/adapters/localStorage';

上記のインポートにwebpackがエラーを出力します。

ERROR in ./src/index.tsx
Module not found: Error: Can't resolve 'redux-localstorage/lib/adapters/localStorage' in '/myProject/src'
 @ ./src/index.tsx 7:0-67 9:46-53

ちなみにvimにTSの言語サーバーを利用して使っているのですが、 そちらはエラーを表示せず、 インポートを無事解決しているようでした。

色々と調べて(参考: IMPORT PARTS OF NODE PACKAGES WITH SLASH)、 インポートの書き方自体が間違っている感じはなさそうです。また、 'redux-localstorage/lib/adapters/localStorage'もQiitaの記事などで書いている方が多いので、 合っていると思います。

そこでWebpackの設定が怪しいのではないかと思い2時間ほど調べたのですが、 分かりませんでした。
どなたかご存知の方がいらっしゃいましたらご教授いただけますと幸いです。
よろしくお願いいたします。

const fs = require('fs')
const fsExtra = require('fs-extra')
const CopyPlugin = require('copy-webpack-plugin')
const Dotenv = require('dotenv-webpack')

const production = process.env.NODE_ENV === 'production'
let plugins = []
if (production) {
  // reset build directory
  const build = `${__dirname}/build`
  if (fs.existsSync(build)) {
    fsExtra.removeSync(build)
  }
  fs.mkdirSync(build)

  plugins = [
    new CopyPlugin([
      { from: `${__dirname}/public`, to: `${__dirname}/build` }
    ])
  ]
}

plugins.push(new Dotenv({
  path: './.env'
}))

module.exports = {
  mode: production ? "production" : "development",
  entry: "./src/index.tsx",
  output: {
    filename: "index.js",
    path: `${__dirname}/${production ? "build" : "public"}`,
  },
  devtool: "source-map",
  module: {
    rules: [
      {
        test: /.(ts|tsx)$/,
        use: "ts-loader",
        exclude: "/node_modules/",
      },
      {
        test: /.(css|sass)$/,
        use: [
          "style-loader",
          "css-loader",
          "sass-loader"
        ],
        exclude: "/node_modules/"
      },
      {
        test: /.(jpg|png)$/,
        use: "url-loader",
        exclude: "/node_modules/"
      }
    ]
  },
  resolve: {
    extensions: [".js", ".ts", ".tsx"],
    modules: ["node_modules"]
  },
  devServer: {
    contentBase: `${__dirname}/public`,
    watchContentBase: true,
    historyApiFallback: true,
    disableHostCheck: true
  },
  plugins
}

Answer 1

解決をしたわけではありませんが、 redux-localstorage-simpleを利用することで、 adapterをインポートする必要もなく、 簡単にlocalStorageとの同期を実現できました。

redux-localstorageはREADMEやQiita、 海外の記事を参考に色々と試してみましたが、 記事の通りに動作しなかったりして、 adapterがどうしても必要になるのかなという感じでした。

しかし、 adapterをインポートできないので、 adapterを利用したら正常に動作するのかも検証できておりません。webpackの設定について、 create-react-appなどでプロジェクトを作成して試してみたりしましたが、 同じようにエラーを出力しました。

'redux-localstorage/lib/adapters/localStorage'といった感じで読み込むものをsubsetと言うと思うのですが、 こちらのインポートの可能にする設定を知りたいですが、 今回はlocalStorageとの同期が目的だったので、 こちらの質問を閉じることにしました。