missing the following properties from type 'Store<unknown, AnyAction>': dispatch, getState, subscribe, replaceReducer

Question

I have defined the redux store in public lib like this:

import { configureStore } from '@reduxjs/toolkit';
import rootReducer from '@/common/combineReducer';
import { createLogger } from 'redux-logger';
import thunk from 'redux-thunk';

const logger = createLogger(); 
const initialState = {
   
};

const store = configureStore({
    reducer: rootReducer,
    middleware: [logger, thunk],
    devTools: process.env.NODE_ENV !== 'production',
    preloadedState: initialState
});

export default store;

then export the store in the index.ts file:

import store from "./store/store";

export { 
    store 
}

when I using the store in another project like this:

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import reportWebVitals from './reportWebVitals';
import Chat from './App';
import { Provider } from 'react-redux';
import store from "rd-component";

const root = ReactDOM.createRoot(
  document.getElementById('root') as HTMLElement
);
root.render(
  <React.StrictMode>
    <Provider store={store}>
    </Provider>
  </React.StrictMode>
);

reportWebVitals();

the visual studio code show error like this:

Type 'typeof import("node_modules/rd-component/dist/index")' is missing the following properties from type 'Store<unknown, AnyAction>': dispatch, getState, subscribe, replaceReducer

what should I do to fixed this issue? I am using microbundle to publish the public lib and this is the public lib package.json config:

{
    "name": "rd-component",
    "type": "module",
    "version": "0.1.15",
    "source": "src/index.ts",
    "types": "dist/index.d.ts",
    "files": [
        "dist"
    ],
    "exports": {
        "require": "./dist/rdc.cjs",
        "types": "./dist/rdc.d.ts",
        "default": "./dist/rdc.modern.js"
    },
    "main": "./dist/rdc.cjs",
    "module": "./dist/rdc.module.js",
    "unpkg": "./dist/rdc.umd.js",
    "scripts": {
        "build": "microbundle",
        "dev": "microbundle watch"
    },
    "devDependencies": {
        "@types/react": "^18.2.0",
        "@types/redux-logger": "^3.0.9",
        "axios": "^1.3.4",
        "js-wheel": "https://github.com/jiangxiaoqiang/js-wheel.git",
        "microbundle": "^0.15.1",
        "react": "^18.2.0",
        "react-dom": "^18.2.0",
        "react-redux": "^8.0.5",
        "redux": "^4.2.1",
        "redux-logger": "^3.0.6",
        "uuid": "^9.0.0"
    },
    "dependencies": {
        "@reduxjs/toolkit": "^1.9.5",
        "antd": "^5.4.6"
    }
}

Answer 1

You are using a named export, but a default import. Use a named import instead:

import { store } from "rd-component";

Although it might generally not be the best idea to have your library export a store - an app using your component will not be able to have it's own store, as Redux is usually meant to be used with only one store.