CODEWITHSUNDEEP
javascriptreactjs
貝原匠
貝原匠

Reputation: 111

Module not found by React

I am making calculator by react.
An error occurred trying to separate code into module.
Please let me know why the error occurred and how to solve it.

Error:
./src/App.js Module not found: Can't resolve 'Cache' in '$HOME/calculator/src'

App.js

import React, { Fragment, Component } from "react";
import Cache from "Cache";

class App extends Component {
  render() {
return <Calculator />;
  }
}

class Calculator extends Component {
  return (
    <Fragment>
      <Cache />
    </Fragment>
  );
}

export default App;

Cache.js

import React, { Fragment, Component } from "react";

class Cache extends Component {
  render() {
    return (
      <Fragment>
        <h2>Cache</h2>
      </Fragment>
    );
  }
}

export default Cache;

This is my Github URL:
https://github.com/kaibara/calculator/pull/4/files

Thank you

Upvotes: 1

Views: 213

Answers (4)

Mayank Bansal
Mayank Bansal

Reputation: 2075

When you import a file in react, you need to give relative path of the file you are importing with respect to the current component in which you are importing the file.

Since your app.js and cache.js are in the same folder, so you need to import it like

import Cache from './Cache.

Upvotes: 1

Savan Palivela
Savan Palivela

Reputation: 1

The issue is with import Cache from "Cache";

You are trying to load installed npm module called Cache. Since you are importing a module from file, you need to use the following:

import Cache from "./Cache";

Upvotes: 0

Vikas Singh
Vikas Singh

Reputation: 1847

if your app.js and Cache.js are in the same folder then add import Cache from "./Cache"; before Cache.js.

if Cache.js is in another folder then write the relative path of Cache.js into app.js

Upvotes: 0

pageNotfoUnd
pageNotfoUnd

Reputation: 666

try like importing from the file structure like import Cache from '../xx(where cache is located)';

Upvotes: 0

Related Questions