React Redux is facing difficulties resolving its own modules

Upon running webpack for my project, an error regarding the React-Redux package not being able to resolve some of its internal modules has been encountered:

ERROR in ./node_modules/react-redux/es/index.js
Module not found: Error: Can't resolve './components/Context' in '/home/.../frontend/src/node_modules/react-redux/es'
 @ ./node_modules/react-redux/es/index.js 3:0-57 12:0-179
 @ ./index.tsx

ERROR in ./node_modules/react-redux/es/index.js
Module not found: Error: Can't resolve './components/Provider' in '/home/.../frontend/src/node_modules/react-redux/es'
 @ ./node_modules/react-redux/es/index.js 1:0-45 12:0-179
 @ ./index.tsx

ERROR in ./node_modules/react-redux/es/index.js
Module not found: Error: Can't resolve './components/connectAdvanced' in '/home/.../frontend/src/node_modules/react-redux/es'
 @ ./node_modules/react-redux/es/index.js 2:0-59 12:0-179
 @ ./index.tsx

ERROR in ./node_modules/react-redux/es/index.js
Module not found: Error: Can't resolve './connect/connect' in '/home/.../frontend/src/node_modules/react-redux/es'
 @ ./node_modules/react-redux/es/index.js 4:0-40 12:0-179
 @ ./index.tsx

ERROR in ./node_modules/react-redux/es/index.js
Module not found: Error: Can't resolve './hooks/useDispatch' in '/home/.../frontend/src/node_modules/react-redux/es'
 @ ./node_modules/react-redux/es/index.js 5:0-70 12:0-179 12:0-179
 @ ./index.tsx

ERROR in ./node_modules/react-redux/es/index.js
Module not found: Error: Can't resolve './hooks/useSelector' in '/home/.../frontend/src/node_modules/react-redux/es'
 @ ./node_modules/react-redux/es/index.js 6:0-70 12:0-179 12:0-179
 @ ./index.tsx

ERROR in ./node_modules/react-redux/es/index.js
Module not found: Error: Can't resolve './hooks/useStore' in '/home/.../frontend/src/node_modules/react-redux/es'
 @ ./node_modules/react-redux/es/index.js 7:0-61 12:0-179 12:0-179
 @ ./index.tsx

ERROR in ./node_modules/react-redux/es/index.js
Module not found: Error: Can't resolve './utils/batch' in '/home/.../frontend/src/node_modules/react-redux/es'
 @ ./node_modules/react-redux/es/index.js 8:0-41 11:0-8
 @ ./index.tsx

ERROR in ./node_modules/react-redux/es/index.js
Module not found: Error: Can't resolve './utils/reactBatchedUpdates' in '/home/.../frontend/src/node_modules/react-redux/es'
 @ ./node_modules/react-redux/es/index.js 9:0-79 11:9-14 12:0-179
 @ ./index.tsx

ERROR in ./node_modules/react-redux/es/index.js
Module not found: Error: Can't resolve './utils/shallowEqual' in '/home/.../frontend/src/node_modules/react-redux/es'
 @ ./node_modules/react-redux/es/index.js 10:0-48 12:0-179
 @ ./index.tsx

Is there any way to resolve this issue? Could it be due to the installation of react-redux before redux? If so, how can this be resolved? Attempts such as deleting package-lock.json, removing node_modules, and reinstalling using npm install were made. Additionally, upon inspecting the filesystem, it was found that the unresolved modules do exist on the filesystem; for example, even though ./components/Provider cannot be resolved by webpack, the file 

node_modules/react-redux/es/Provider.js
is present and intact.

Here is the relevant section from package.json. Could a version mismatch be causing this problem?

"devDependencies": {
    "@types/classnames": "^2.2.9",
    "@types/react": "^16.9.9",
    "@types/react-dom": "^16.9.1",
    "@types/react-redux": "^7.1.5",
    "@types/redux": "^3.6.0",
    "@typescript-eslint/eslint-plugin": "^2.4.0",
    "@typescript-eslint/parser": "^2.4.0",
    "eslint": "^6.5.1",
    "eslint-config-airbnb": "^18.0.1",
    "eslint-import-resolver-typescript": "^2.0.0",
    "eslint-plugin-import": "^2.18.2",
    "eslint-plugin-jsx-a11y": "^6.2.3",
    "eslint-plugin-react": "^7.16.0",
    "eslint-plugin-react-hooks": "^1.7.0",
    "prop-types": "^15.7.2",
    "react": "^16.10.2",
    "react-dom": "^16.10.2",
    "react-redux": "^7.1.1",
    "redux": "^4.0.4",
    "source-map-loader": "^0.2.4",
    "ts-loader": "^6.2.0",
    "typescript": "^3.6.4",
    "typescript-eslint": "0.0.1-alpha.0",
    "webpack": "^4.41.0",
    "webpack-cli": "^3.3.9"
  },
  "dependencies": {}
javascriptnpmreact-redux

Answer №1

Success at last! I managed to get it working by taking the drastic step of deleting the entire project folder and reinstalling it from GitHub. It seems there was an issue with the installed node_modules that even a thorough rm -rf couldn't resolve.

UPDATE: Well, it turns out my earlier claim was false. When I wiped the project and pulled it again from GitHub, it inadvertently reversed the commit where I had included all the Redux configurations. Upon restoring it, the error resurfaced. The real culprit was actually an error in my webpack.config.js file:

I originally had "extensions": [".ts", ".tsx"]

What I needed was 

"extensions": [".ts", ".tsx", ".js"]

Despite having the JS files in place, Webpack was not recognizing them due to the absence of the ".js" extension in my configuration file. Adding those four characters resolved the issue. And so concludes several hours spent debugging. Hopefully, this serves as a warning for anyone else who messes up their Webpack setup while attempting to integrate React-Redux.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

utilize a Node module in React

After installing react-awesome-query-builder from branch antd-3, I encountered an error upon importing it in my React file. The error message reads: import {Query, Builder, Utils as QbUtils} from 'react-awesome-query-builder'; Error : Failed to ...

node.jsreactjsnpmquery-builderantd

Is it possible to send emails from a local server to Gmail, Yahoo, or Rediff?

Currently, I am developing a feature that allows users to send emails to any recipient including Yahoo and Gmail. Below is the code snippet for my contact form: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1 ...

phpjavascript

Utilize Object literal manipulation to include properties in a specific sequence

Working on a tool to generate Nassi-Shneiderman diagrams online, where each diagram is represented as an object literal with unlimited possible children. As I aim to add a sequence into the while loop following the first sequence, I encounter the challeng ...

javascriptjsonobjectproperties

Ways to position cursor at the end in the Froala Editor

My current dilemma involves the need to position the focus/cursor at the end of text that is loaded within the Froala editor. I attempted to accomplish this using the focus event of Froala (events.focus), but unfortunately, it did not yield the desired out ...

javascriptjquerycursoreditorfroala

Is there a way to eliminate the blue border from a Material React Modal?

I am currently using the React Material Modal and noticed that in the demo examples, there is a blue border when the modal is opened. Is there a way to remove this blue border? I have tried setting the disableAutoFocus property to "true" in the Modal Api ...

javascriptreactjsmaterial-ui

Jquery Plugin fails to generate dynamic elements effectively

I developed a masking jQuery script that dynamically adds elements to an existing input element. var link = $('<a title="show" role="link" href="#" class="masker-value">show</a>'); wrapper: function() { container = $(container) ...

javascriptjqueryjquery-plugins

Iterate through a large JavaScript object using setTimeout

What is the most efficient way to iterate through large object elements without freezing the browser? I have successfully looped through arrays using setTimeout/setInterval in this manner: var i = 0; var l = arr.length; var interval = window.setInterval( ...

javascriptarraysloopsobject

Using ThreeJS/WebGL to Send Functions to Shaders

I have created a custom noise function that accepts a 3D coordinate (x, y, z) and returns a noise value between 0 and 1. I am interested in incorporating this function into my vertex shader to animate vertex positions. Can I access this external function f ...

javascriptthree.jswebgl

What's preventing me from utilizing Leaflet Map on Next.js despite attempting Dynamic Import?

When using Leaflet, it requires the global window object which is not available on SSR (Server-Side Rendering) and can cause an error stating "window is not defined". I have tried extensively to find a solution, and the only method I found was to use dyna ...

javascriptreactjsnext.jsleafletreact-leaflet

Refresh the array object following a personalized filter

I am currently using a custom filter to aggregate a $scope object within an ng-repeat block. Here is my code snippet: $scope.myobj = isSelected ? $filter('customFilter')($scope.origObj) : $scope.origObj In the above code, $scope.myobj is util ...

javascriptangularjsangularjs-directiveangularjs-scope

Expanding a responsive HTML background image using Javascript

I've spent countless hours grappling with this code, attempting to dynamically resize the background of HTML based on the browser window size using JavaScript. Here's what I have so far (I'm using Firefox for this): GM_addStyle('body ...

javascripthtmlcssfirefoxgreasemonkey

Encountering an authentication issue in Active Directory while using Express.js

I've encountered a unique issue while using the activedirectory module for user authentication with AD. While most users authenticate without any problems, users within a specific OU are constantly facing authentication failures. Below is the code sni ...

node.jsexpressnpmactive-directory

A more intelligent approach for generating JSON responses using Mysql

Here is the code I have on my server side using Node.js: var mysql = require('mysql'); var connection = mysql.createConnection({ host: 'localhost', user: 'SOMEUSER', password: 'SOMEPASSWD', database: 'SOMED ...

javascriptmysqljsonnode.js

Associate the callback function with a directive that does not have an isolated scope

Ensuring the correct context when binding a callback function to a directive is crucial. When working with an isolated scope, this task is easily accomplished. <bar-foo callback="mycontroller.callback()"></bar-foo> The directive code: ... ...

javascriptangularjsangularjs-directive

Forming a JSON structure using input variables

Currently, I am attempting to construct a JSON object using variables extracted from a form. var firstName = $('#firstName').val(); var lastName = $('#lastName').val(); var phone = $('#phoneNumber').val(); var address ...

javascriptjqueryjsonobject

Is there a way for me to retrieve the name and extension of an attached file in an input field of type "text"?

Could you assist me with a task? I have a table and I would like to extract the name and extension of each file and insert it into an input field below each "file" type input. This information will then be saved into a MySQL database, allowing me to create ...

javascriptjquery

Object Literal vs Object-Oriented Javascript: Comparing the Two

When it comes to using Object-Oriented Programming (OOP) in JavaScript, I often find myself not utilizing it much. For instance, instead of defining a constructor function and setting up prototypes like this: function Person(name){ return this.name = name ...

javascriptoop

Looking for assistance with creating a D3 bar chart that involves selecting a specific year and crime category? Let me help

I am still learning D3 and I'm facing a challenge while trying to create a bar chart. My idea is to first select the YEAR radio button, then choose the CRIMEHEAD option, and finally the bar chart should be displayed. Here's my thought process: I ...

javascriptjqueryd3.js

Using ReactJS to search for and replace strings within an array

A feature of my tool enables users to input a string into a textfield and then checks if any words in the input match with a predetermined array. If the user's string contains a specific name from the array, I aim to replace it with a hyperlink. I&a ...

javascripthtmlnode.jsreactjsjavascript-objects