React + Redux + Typescript Chrome Extension Popup Script - Redux Devtools Shows "No Store Found"

Question

I am creating a chrome extension that is mainly served in a popup script.

Manifest.json

// public/manifest.json

{
  "manifest_version": 3,
  "version": "3.0.0",
  "name": "__MSG_appName__",
  "description": "__MSG_appDesc__",
  "default_locale": "en",
  "author": "lbragile",
  "homepage_url": "some_url_not_relevant_to_question_at_hand",
  "permissions": ["tabs", "storage"],
  "optional_permissions": ["contextMenus", "alarms", "downloads", "downloads.shelf"],
  "icons": {
    "16": "images/logo16.png",
    "48": "images/logo48.png",
    "128": "images/logo128.png"
  },
  "action": {
    "default_icon": {
      "16": "images/logo16.png",
      "48": "images/logo48.png",
      "128": "images/logo128.png"
    },
    "default_popup": "index.html",
    "default_title": "title"
  },
  "background": {
    "service_worker": "background.js"
  },
  "incognito": "split"
}

Package.json

// package.json

{
  "name": "name",
  "version": "0.0.1",
  "description": "description",
  "author": "lbragile",
  "private": true,
  "dependencies": {
    "nanoid": "^3.1.30",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-redux": "^7.2.5",
    "react-router-dom": "^5.3.0",
    "react-scripts": "4.0.3",
    "redux": "^4.1.1"
  },
  "devDependencies": {
    "@babel/core": "^7.13.14",
    "@babel/preset-env": "^7.13.12",
    "@babel/preset-react": "^7.13.13",
    "@fortawesome/fontawesome-svg-core": "^1.2.36",
    "@fortawesome/free-regular-svg-icons": "^5.15.4",
    "@fortawesome/free-solid-svg-icons": "^5.15.4",
    "@fortawesome/react-fontawesome": "^0.1.15",
    "@types/chrome": "0.0.159",
    "@types/express": "^4.17.13",
    "@types/node": "^16.10.3",
    "@types/react": "^17.0.15",
    "@types/react-dom": "^17.0.9",
    "@types/react-redux": "^7.1.19",
    "@types/react-router-dom": "^5.1.8",
    "@types/redux-immutable-state-invariant": "^2.1.2",
    "@types/remote-redux-devtools": "^0.5.5",
    "@types/styled-components": "^5.1.12",
    "@typescript-eslint/eslint-plugin": "^5.0.0",
    "@typescript-eslint/parser": "^5.0.0",
    "babel-loader": "^8.2.3",
    "babel-plugin-styled-components": "^1.13.2",
    "copy-webpack-plugin": "^9.0.1",
    "eslint": "^7.11.0",
    "eslint-plugin-react": "^7.24.0",
    "eslint-plugin-react-hooks": "^4.2.0",
    "eslint-plugin-styled-components-a11y": "0.0.34",
    "redux-devtools-extension": "^2.13.9",
    "styled-components": "^5.3.0",
    "stylelint": "^13.13.1",
    "stylelint-config-standard": "^22.0.0",
    "ts-loader": "^9.2.6",
    "typescript": "^4.3.5",
    "url-loader": "^4.1.1",
    "webpack": "^5.59.1",
    "webpack-cli": "^4.9.1"
  },
  "scripts": {
    "lint": "npx eslint {src,public}/**/**/*.[jt]s -c config/.eslintrc.js --ignore-path .gitignore .",
    "lint:style": "npx stylelint {src,public}/**/**/*.css --config config/.stylelintrc.json",
    "start": "webpack --config config/webpack.config.js --watch --progress"
  },
  "babel": {
    "extends": "./config/.babelrc.json"
  },
  "eslintConfig": {
    "extends": "./config/.eslintrc.js"
  },
  "stylelint": {
    "extends": "./config/.stylelintrc.json"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

Webpack

// config/webpack.config.js

const path = require("path");
const CopyPlugin = require("copy-webpack-plugin");

module.exports = {
  entry: {
    popup: path.resolve(__dirname, "../src/index.tsx"),
    background: path.resolve(__dirname, "../src/background.ts"),
  },
  plugins: [
    new CopyPlugin({
      patterns: [{ from: "public", to: "." }],
    }),
  ],
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        use: "babel-loader",
        exclude: /node_modules/,
      },
      {
        test: /\.ts(x)?$/,
        loader: "ts-loader",
        exclude: /node_modules/,
      },
      {
        test: /\.png$/,
        use: [
          {
            loader: "url-loader",
            options: {
              mimetype: "image/png",
            },
          },
        ],
      },
    ],
  },
  resolve: {
    extensions: [".js", ".jsx", ".ts", ".tsx"],
  },
  mode: "production",
  output: {
    path: path.resolve(__dirname, `../dist`),
    filename: "[name].js",
  },
};

Problem

I've tried redux-devtools-extension:

// src/index.tsx

import React from "react";
import ReactDOM from "react-dom";
import App from "./components/App";
import { Provider } from "react-redux";
import { createStore } from "redux";
import { composeWithDevTools } from "redux-devtools-extension";
import rootReducer from "./store/reducers";

export const store = createStore(rootReducer, composeWithDevTools());

ReactDOM.render(
  <React.StrictMode>
    <Provider store={store}>
      <App />
    </Provider>
  </React.StrictMode>,
  document.getElementById("root")
);

which shows:

I've also tried using remote-redux-devtools:

// src/index.tsx

import React from "react";
import ReactDOM from "react-dom";
import App from "./components/App";
import { Provider } from "react-redux";
import { createStore } from "redux";
import devToolsEnhancer from "remote-redux-devtools";
import rootReducer from "./store/reducers";

export const store = createStore(rootReducer, devToolsEnhancer());

ReactDOM.render(
  <React.StrictMode>
    <Provider store={store}>
      <App />
    </Provider>
  </React.StrictMode>,
  document.getElementById("root")
);

which seems more promising, but has no data in the store:

When I run in the browser, using npm start (react-scripts start), I do see the store in the Redux DevTools extension, so I am not sure what the problem is.

Possible Idea

When I build with React (react-scripts build), I can see the store just fine. The issue is that I cannot use react as it's build times are too slow and using webpack seems like the most logical alternative. Here is the build output:

Any ideas?

Answer 1

Note: this answer was originally added by OP as an edit to their original question, I have just reposted it as an answer.

A server needs to be running and remote redux devtools should be used rather than redux devtools extension.

The best approach would be the following:

1. Install npmjs.com/package/remotedev-server
2. Add "remotedev": "remotedev --hostname=localhost --port=8080" npm script
3. Run the above script to start a server
4. Right click on popup, Redux DevTools > Open Remote DevTools (not inspect)
5. Settings > Use Custom Local Server > Type in the hostname and port specified in the npm script.

Here is what my store looks like:

import { createStore } from "redux";
import { composeWithDevTools } from "remote-redux-devtools";
import rootReducer from "./store/reducers";

const composeEnhancers = composeWithDevTools({
  realtime: true,
  hostname: "localhost",
  port: 8080
});

export const store = createStore(rootReducer, composeEnhancers());

ReactDOM.render(
  <React.StrictMode>
    <Provider store={store}>
      <App />
    </Provider>
  </React.StrictMode>,
  document.getElementById("root")
);