The error you are encountering indicates that there's a version conflict between redux and redux-devtools-extension. You can use @redux-devtools/extension as suggested.
Solution:
In terminal:
npm install --save @redux-devtools/extension
In code:
import { composeWithDevTools } from "@redux-devtools/extension";
Answer from Joseph on Stack Overflow
» npm install redux-devtools-extension
» npm install @redux-devtools/extension
Videos
The error you are encountering indicates that there's a version conflict between redux and redux-devtools-extension. You can use @redux-devtools/extension as suggested.
Solution:
In terminal:
npm install --save @redux-devtools/extension
In code:
import { composeWithDevTools } from "@redux-devtools/extension";
make npm_dependency_fix.js the code is below make the file and save where the react and redux are loacted
// Import necessary modules
const { execSync } = require('child_process');
const fs = require('fs');
// Function to track and process files during npm installation
function track_and_process_files() {
// Custom logic to track and process files during npm installation
// This function can be customized to perform actions on specific files as needed
}
// Update vulnerable packages and install necessary dependencies
function update_packages() {
try {
// Update node-forge to the latest version
execSync('npm install node-forge@latest', { stdio: 'inherit' });
// Update other vulnerable packages as needed
// Add similar commands for other packages
// Install additional dependencies if required
execSync('npm install react-scripts@latest --save-dev', { stdio: 'inherit' });
} catch (error) {
console.error('Error occurred while updating packages:', error);
}
}
// Get required package version
function get_required_version(packageName) {
try {
const packageJson = JSON.parse(fs.readFileSync('package.json'));
return packageJson.dependencies[packageName];
} catch (error) {
console.error(`Error getting ${packageName} version from package.json:`, error);
return null;
}
}
// Main function to execute the script
function main() {
try {
// Run custom logic to track and process files during npm installation
track_and_process_files();
// Update vulnerable packages
update_packages();
// Check if redux-devtools-extension version is not updated
const requiredVersion = get_required_version('redux-devtools-extension');
if (requiredVersion === '^3.3.0') {
console.log('Redux DevTools Extension version is not automatically updated.');
console.log(`Please manually update redux-devtools-extension to version ${requiredVersion} in package.json`);
}
console.log('Script executed successfully!');
} catch (error) {
console.error('An error occurred in the main script:', error);
}
}
// Call the main function to execute the script
main();
now add the code in your package.json file and save it
"scripts": {
"custom-script": "node npm_dependency_fix.js",
"update-and-fix": "npm run custom-script && npm audit fix --force"
}
Now run the command
npm run update-and-fix
it automatically updates version no in package.json and updates your all packages as well. and if not updated in.js file, it will log the correct version no for you to update it manually and you got right updates.
» npm install redux-devtools
» npm install @redux-devtools/app
npm i --save @redux-devtools/extension did not work when I used it and then tried to import composeWithDevTools.
But when I used npm i @redux-devtools/extension and imported the composeWithDevTools it worked, but I'm not sure why.
Look at the error message, you have redux@5 installed but there's a dependency on redux@"^3.1.0 || ^4.0.0. In other words, your installed version of the redux library is too new for the redux-devtools-extension package.
While you could use the --legacy-peer-deps flag to install redux-devtools-extension I would recommend using the newer version of the dev-tools. redux-devtools-extension is marked as deprecated and hasn't been updated in 3 years, and the project moved to @redux-devtools/extension
Try running npm i --save @redux-devtools/extension instead if you need to add the Redux devtools extension as a project dependency.
To make things easier, you can use the redux-devtools-extension package from npm.
To install it run:
npm install --save-dev redux-devtools-extension
and to use like so:
// @flow
import { createStore, compose, applyMiddleware } from 'redux';
import { createEpicMiddleware } from 'redux-observable';
import { createReducer } from './reducer';
import { epic } from './epic';
import { composeWithDevTools } from 'redux-devtools-extension';
const initialState = {};
const configureStore = () => {
const epicMiddleware = createEpicMiddleware(epic);
const enhancers = composeEnhancers(applyMiddleware(epicMiddleware));
const store = createStore(createReducer(), initialState, composeWithDevTools(
applyMiddleware(epicMiddleware),
// other store enhancers if any
));
return store;
};
export { configureStore };
I was experiencing a similar issue. I just needed to tweak a single line. I went from this:
const composeEnhancers = !__PROD__ ? window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ : compose
To this:
const composeEnhancers = !__PROD__ ? (window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose) : compose
In my case I have the __PROD__ variable available, but tweak that to suit your situation. Logic remains the same.
» npm install @types/redux-devtools-extension