Module not found: Can’t resolve ‘rxjs’ in React – How to fix?

If you don’t know how to fix the error “Module not found: Can’t resolve ‘rxjs'” in React. It took you an hour to find a way to fix it. This article has the solution for you.

The reason of the error Module not found: Can’t resolve ‘rxjs’ in React

Because the terminal shows the error “Module not found: Can’t resolve ‘rxjs'”, the program cannot find the library ‘rxjs’ in the program. It may be because you have not installed rxjs, have not imported rxjs into the program to use it, or temporarily have a software conflict.

Code:

import { useEffect, useState } from 'react';
import { of } from 'rxjs';
 
const array = ['Tom', 'Jack', 'John'];
const listNames = of(array);
export default function App() {
  const [names, setNames] = useState();
  useEffect(() => {
    const subscription = listNames.subscribe(setNames);
    return () => subscription.unsubscribe();
  });
 
  return (
    <div className="container">
      <h2>LearnShareIT</h2>
      <List items={names} />
    </div>
  );
}

Output:

So how do we fix this error? Follow the methods in the next part of the article.

How to fix this error? 

Install the rxjs package to your project

RxJS is a widely used web development library today. This library specializes in event-related problems and includes rich frameworks, libraries, and utilities, making it attractive to the dev community.

The critical feature of RxJS is that it handles events and data streams asynchronously, thanks to observable sequences. Its core is the Observable type, and it has related types (Observers, Schedulers, Subjects).

Here’s how to add the rxjs package with npm and yarn:

Install rxjs with npm :

npm install rxjs

With yarn :

yarn add rxjs

So you have added the rxjs library to your project. Please follow the methods below if the above error is still not resolved.

Delete node_modules and package-lock.json 

This way, we will delete node_modules and the package.lock.json file because we will delete the current Module and package management system and then run the npm start command to let the project re-initialize new files.

Terminal:

rm -rf node_modules
rm -f package-lock.json
npm start

Import module from rxjs package

This approach will fix the error if you use the observables in rxjs without importing them into the code. Here are some import methods used with the rxjs package.

Code:

import { Rx } from 'rxjs/Rx'; This imports the entire library.
import { _______ } from ‘rxjs/_________’; This syntax usually used for main Object like Rx itself or Observable 
import ‘rxjs/add/observable/__________’;
import ‘rxjs/add/operator/_________’;

So you have fixed the error “Module not found: Can’t resolve ‘rxjs'” in React. Hope these methods are helpful to you.

Summary

We have just shown you how to fix the error “Module not found: Can’t resolve ‘rxjs'” in React. You can fix it by installing the rxjs package to your project, deleting node_modules and package-lock.json or importing module from rxjs package. Let’s try these methods. They are helpful for you.

Maybe you are interested:

• Module not found: Can’t resolve ‘react-dom’
• Module not found: Can’t resolve ‘styled-components’
• Module not found: Can’t resolve ‘react-bootstrap’ in React

Nathaniel Kirk

Hi, my name’s Nathaniel Kirk. I’m interested in learning and sharing knowledge about programming languages. My strengths are C, C++, Python, HTML, CSS, Javascript, and Reactjs. If you have difficulty with them, don’t worry. I’m here to support you.

---

Name of the university: PTIT
Major: IT
Programming Languages: C, C++, Python, HTML, CSS, Javascript, Reactjs