TypeScript error: Type 'undefined' is not assignable to type 'StoreEnhancer'.ts(2719)

[zakwalters]

When using the recommended setup with configureStore from here, there's a TypeScript error:

Type '(getDefaultEnhancers: import("<rootDir>/node_modules/@reduxjs/toolkit/dist/getDefaultEnhancers").GetDefaultEnhancers<import("<rootDir>/node_modules/@reduxjs/toolkit/dist/utils").Tuple<[import("<rootDir>/node_modules/@r...' is not assignable to type '(getDefaultEnhancers: import("<rootDir>/node_modules/@reduxjs/toolkit/dist/getDefaultEnhancers").GetDefaultEnhancers<import("<rootDir>/node_modules/@reduxjs/toolkit/dist/utils").Tuple<[import("<rootDir>/node_modules/@r...'. Two different types with this name exist, but they are unrelated.
  Type 'Tuple<[StoreEnhancer<{ dispatch: ThunkDispatch<{ user: User | UnauthenticatedUser; event: EventSlice; }, undefined, UnknownAction>; }>, StoreEnhancer | undefined]>' is not assignable to type 'Tuple<Enhancers>'.
    Type '[StoreEnhancer<{ dispatch: ThunkDispatch<{ user: User | UnauthenticatedUser; event: EventSlice; }, undefined, UnknownAction>; }>, StoreEnhancer | undefined]' is not assignable to type 'Enhancers'.
      Type 'StoreEnhancer<...> | StoreEnhancer | undefined' is not assignable to type 'StoreEnhancer'.
        Type 'undefined' is not assignable to type 'StoreEnhancer'.ts(2719)

You can see that the comment below has to include @ts-ignore to resolve this.

Potential Solution

I think it can be fixed by providing a no-op enhancer in non-production environments. I've tested that my tsc error goes away if I yarn link this version into my app, but I haven't actually run it. Seems like (next) => next should be the right form of a no-op enhancer though.

diff --git a/src/devtools.ts b/src/devtools.ts
index 9045a5c..7e9200c 100644
--- a/src/devtools.ts
+++ b/src/devtools.ts
@@ -507,7 +507,7 @@ class DevToolsEnhancer<S, A extends Action<string>> {
 
 export default <S, A extends Action<string>>(
   options?: Options<S, A>,
-): StoreEnhancer | undefined => new DevToolsEnhancer<S, A>().enhance(options);
+): StoreEnhancer => new DevToolsEnhancer<S, A>().enhance(options);
 
 const compose =
   (options: Options<unknown, Action<string>>) =>
diff --git a/src/index.ts b/src/index.ts
index f8dcc83..e4590d1 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -15,7 +15,7 @@ if (process.env.NODE_ENV !== "production") {
   devtoolsEnhancer = require("./devtools").default;
   composeWithDevTools = require("./devtools").composeWithDevTools;
 } else {
-  devtoolsEnhancer = () => undefined;
+  devtoolsEnhancer = () => (next) => next;
   composeWithDevTools = compose;
 }

[matt-oakes]

Thanks for reporting this. I have resolved this in v0.2.1.

[Maker-Mark]

@matt-oakes I'm seeing a similar issue

Argument of type 'StoreEnhancer | ((...funcs: StoreEnhancer[]) => (...args: unknown[]) => StoreEnhancerStoreCreator<{}, {}>) | ((...args: unknown[]) => StoreEnhancerStoreCreator<{}, {}>)' is not assignable to parameter of type 'StoreEnhancer<{}, {}> | undefined'.
      Type '(...funcs: StoreEnhancer[]) => (...args: unknown[]) => StoreEnhancerStoreCreator<{}, {}>' is not assignable to type 'StoreEnhancer<{}, {}>'

This seems to be fixed by changing the signature of the ComposeWithDevtools

diff --git a/node_modules/redux-devtools-expo-dev-plugin/build/devtools.d.ts b/node_modules/redux-devtools-expo-dev-plugin/build/devtools.d.ts
index 7a35a88..e658fd4 100644
--- a/node_modules/redux-devtools-expo-dev-plugin/build/devtools.d.ts
+++ b/node_modules/redux-devtools-expo-dev-plugin/build/devtools.d.ts
@@ -47,5 +47,5 @@ interface Options<S, A extends Action<string>> {
 }
 declare const _default: <S, A extends Action<string>>(options?: Options<S, A>) => StoreEnhancer;
 export default _default;
-export declare function composeWithDevTools(...funcs: [Options<unknown, Action<string>>] | StoreEnhancer[]): StoreEnhancer | ((...funcs: StoreEnhancer[]) => (...args: unknown[]) => StoreEnhancerStoreCreator<{}, {}>) | ((...args: unknown[]) => StoreEnhancerStoreCreator<{}, {}>);
+export declare function composeWithDevTools(...funcs: StoreEnhancer[] | [Options<unknown, Action<string>>]): StoreEnhancer;
 //# sourceMappingURL=devtools.d.ts.map
\ No newline at end of file

Edit; i posted a separate issue