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

Answer 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 .

Answer 2

尝试从文件结构中import Cache from '../xx(where cache is located)';例如import Cache from '../xx(where cache is located)';

Answer 3

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

Answer 4

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