Module not found by React

Question

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

Mayank Bansal · Accepted Answer · 2019-01-02 11:49:44Z

1

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.

answered Jan 2, 2019 at 11:49

Mayank Bansal

2,1052 gold badges11 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

pageNotfoUnd · Accepted Answer · 2019-01-02 11:11:30Z

0

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

answered Jan 2, 2019 at 11:11

pageNotfoUnd

67610 silver badges21 bronze badges

Comments

Vikas Singh · Accepted Answer · 2019-01-02 11:11:46Z

0

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

answered Jan 2, 2019 at 11:11

Vikas Singh

1,8651 gold badge18 silver badges27 bronze badges

Comments

Savan Palivela · Accepted Answer · 2019-01-02 11:16:38Z

0

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";

answered Jan 2, 2019 at 11:16

Savan Palivela

1

Collectives™ on Stack Overflow

Module not found by React

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related