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

Changing the Class of an Element in a Different Component with Angular 2+

Currently in a project utilizing Angular 4, I have implemented two components: app.component and other.component Within app.component.html, there exists a div with the name attribute myClass. <div class="myClass"></div> In the other.componen ...

javascriptangulartypescript

Step-by-step guide to implementing a sticky header while scrolling

How can I implement a fixed header on scroll, like the one seen on this website: www.avauntmagazine.com Here is the HTML for my header: <div class="bloc bgc-wild-blue-yonder l-bloc " id="bloc-1"> <div class="container bloc-sm"> &l ...

javascripthtmlcss

Can you provide some insight on how to store XMLHttpRequest response in Javascript for future

I have a function in my codebase that is responsible for loading HTML templates asynchronously: loadTemplate: function(url) { return new Promise(function(resolve, reject) { var xhr = new XMLHttpRequest(); xhr.open("GET" ...

javascriptajaxtemplatescaching

Issues with the Textarea StartsWith Function Being Unresponsive

Attempting to use the startsWith function on a textarea, but it seems like there may be an error in my code. Since I am not well-versed in Javascript, please forgive any obvious mistakes. I did try to implement what made sense to me... View the Fiddle here ...

javascriptjqueryhtmltextareastartswith

Guide to implementing server-side data loading in App.js using Next.js

Is there a way to fetch the layout data along with the page without adding it to every individual page? The issue I'm facing is that my layout component, loaded once on App.jsx, remains consistent throughout the session. However, due to SSRed page loa ...

javascriptnext.jsserver-side-rendering

Rearrange the sequence of numbers using JQuery when an HTML element is deleted

I'm currently working on a simple functionality where I have 5 rows, each with its own number. So initially, the rows are numbered from 5 to 1. If I remove a value like 3, the sequence should adjust to 4, 2, 1, indicating that I now have only 4 rows ...

javascriptjqueryhtmlcss

Combine several items to form a single entity

When I have two objects returned from the database, my goal is to combine them into one object. Here are the examples: { "id": 4, "first_name": "s", "last_name": "a", ...

javascriptarraysnode.js

performing a query on two tables with sequelize

There must be a more efficient way to accomplish this task with fewer lines of code. I am not very experienced with databases and I am new to sequelize and node. The user id is passed as a parameter and I need to check if there is a corresponding user in ...

javascriptnode.jssequelize.js

What are the steps to implement infinite scrolling in a Vue.js application?

Currently, I am attempting to implement an infinite horizontal scroll section in vuejs for a selection of products. However, I am facing difficulties achieving the infinite effect. My approach so far involved removing the card that goes out of view and add ...

javascriptcssvue.jsnuxt.jscarousel

Is it better to specify one root element or render the entire layout in ReactDOM.render()?

Currently in the process of learning React.js and I have a question. Is it more beneficial to keep my ReactDOM.render() as it is currently set up: ReactDOM.render( <div className="container"> <div className="row"> <div className ...

javascriptreactjs

The Node API is unresponsive when using Postman or accessing through the browser, as it is not returning any status code. However, no errors are displayed when

I am currently working on developing a Node API for an employee department model. I have created various requests such as 'GET', 'PUSH', 'PATCH', and 'DELETE' for both the employee and department endpoints. This deve ...

javascriptnode.jsexpresspostmanbody-parser

Unable to proceed due to lint errors; after conducting research, the issue still remains

I'm still getting the hang of tslint and typescript. The error I'm encountering has me stumped. Can someone guide me on resolving it? I've searched extensively but haven't been able to find a solution. Sharing my code snippet below. (n ...

javascriptjqueryangularjstypescripttslint

Sending the ID of a mapped button to a component

I need help with my React mapping function that displays a series of cards, each with its own button to open up a dialog box. Right now, I'm struggling to pass the unique ID from each object to the correct dialog box. Instead, all IDs are being passed ...

javascriptreactjsmaterial-ui

Strange glitches and slow loading problems plaguing website. (GoDaddy)

TackEmporium.com Lately, I have been revamping my website, which was originally given to me by a friend. I have been making slight adjustments to update its appearance while keeping its classic look with enhanced resolution and cleaned-up HTML5 code. Rec ...

javascripthtmlcss

At what point does IE7 recalculate styles? It seems to have difficulty functioning consistently when a class is applied to the body

Currently facing a peculiar issue. I'm utilizing a class on the element as a toggle switch to control various layout behaviors on my website. When the class is active, specific actions occur; when it's inactive, these actions do not take place. ...

javascriptcssinternet-explorerinternet-explorer-7

When using the GET method to load a PHP file via AJAX, the page may not display certain jQuery plugins even after the file

Hello, I am a beginner learning AJAX and JQuery. Maybe this is a silly question, but please bear with me. I am trying to dynamically show data without refreshing the page using AJAX. I have a function loaded in the body tag which handles this. Everything ...

javascriptphpjqueryhtmlajax

Having trouble accessing the Ajax "data" parameter in Twisted

An ajax request is made using the "POST" method with these parameters: function sendDataToServer(portNumber){ console.log(portNumber) $.ajax({url: "action", dataType : 'html', type: "POST", data: portN ...

javascriptajaxtwisted

Downloading Several Files Simultaneously in Chrome

Since the last Chrome update, my website has encountered an issue. The code snippet below, which was designed to download multiple files, is now only opening the last file in the same tab. I have ensured that my Chrome settings still allow for multiple dow ...

javascriptgoogle-chromedownload

Create an Android application using Node.js

While developing my mobile application, I am utilizing html5 with node.js to create a chat box for users connected on the same wireless network. However, I encounter an issue when coding on my desktop using node.js software. How can I overcome this challen ...

javascriptandroidjquerynode.jsapk

Can Jquery be used to swap out specific li content?

<div class="widget_ex_attachments"> <ul> <li> <i class="fa fa-file-word-o"></i> <a href="uploads/2014/09/Parellel-universe.docx">Parellel universe</a> </li> ...

javascriptjqueryhtml