React - 找不到模块 - 好像目录不存在

Question

I'm a beginner in react and I'm not able to resolve this error at all. I have no idea what to do, I've tried to recreate, look for an answer and this error always appears as if the directory did not exist.

Can someone help me?

Error:

Failed to compile
./src/components/MenuComponent.js
Module not found: Can't resolve './components/DishDetailComponent'

MenuComponent.js

import React, { Component } from 'react';
import { Card, CardImg, CardImgOverlay, CardText, CardBody, CardTitle } from 'reactstrap';
import DishDetail from './components/DishDetailComponent';

class Menu extends Component {

    constructor(props) {
        super(props);

        this.state = {
            selectedDish: null
        };
    }
    ...
}

export default Menu;

DishDetailComponent.js

import React, { Component } from 'react';

class DishDetail extends Component {

    constructor(props) {
        super(props);
    }

    render(){
        return(
            <div></div>
        );
    }
}

export default DishDetail;

Folder Click for image

Answer 1

Paths are relative from the module where they are imported. Both your files are in the components directory, but MenuComponent.js is trying to import from ./components/DishDetailComponent , which actually results in ./components/components/DishDetailComponent .

Change your import to be just ./DishDetailComponent and it should be fine.