Why can't React find this file?

Question

I'm building my first web app using MERN(MongDb Express React Node) and I'm having an issue understanding why React can't seem to find a file I'm trying to import.

I tried every different version of changing the filepath in the import I could, added/removed .js from all of the attempts, triple checked that there were no spelling errors/capitalization problems, and did an npm update just to try something different. I've hit a wall here.

All the app does currently is change the text in a button using setState . I'm going to do more later based on the db contents, but I'm just figuring out how to display the information from the backend on the frontend first.

The main errors I get are:

[Error: ENOENT: no such file or directory, stat '/initrd.img'] { errno: -2, code: 'ENOENT', syscall: 'stat', path: '/initrd.img' }

./src/App.js Module not found: You attempted to import /components/number.js which falls outside of the project src/ directory. Relative imports outside of src/ are not supported.

I'm thinking it's a problem with how I'm trying to import/export things maybe? Here's the resources I've used to hack together what I have so far:

mongoDB MERN tutorial

geeksforgeeks tutorial

App.js

import logo from './logo.svg';
import './App.css';
import React, { Component } from 'react';
import { Route } from 'react-router-dom';
import Numbers from './components/number.js'; 

class App extends Component {
  constructor(props) {
    super(props)

    this.state = {
      buttonText: "button1"
    }

    this.changeWord = this.changeWord.bind(this);
  }

  changeWord() {
    if (this.state.buttonText === "button2") {
      this.setState({
        buttonText: "button1"
      })
    }
    else {
      this.setState({
        buttonText: "button2"
      })
    }
  }

  render() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
        <Numbers />
        <button className="test-button" onClick={this.changeWord}>{this.state.buttonText}</button>
      </header>
    </div>
  );
  }
}

export default App;

number.js

import React, { Component } from "react";
import axios from "axios";
import { response } from "express";

export default class Numbers extends Component {
    constructor(props) {
        super(props);

        this.state = {
            numbers: []
        };
    }

    componentDidMount() {
        axios
        .get("http://localhost:3000/record/")
        .then((response) => {
            this.setState({
                numbers: response.data
            });

            console.log(this.state.numbers);
        })
        .catch(function(err) {
            console.log(err);
        });
    }

    render() {
        return (
            <div>
                <h3>Numbers</h3>
                <table>
                    <thead>
                        <tr>
                            <th>Number</th>
                        </tr>
                    </thead>
                    <tbody>{this.numbers()}</tbody>
                </table>
            </div>
        );
    }
}

Edit:

Project tree with src as working Directory

├── App.css
├── App.js
├── App.test.js
├── components
│   └── number.js
├── index.css
├── index.js
├── logo.svg
├── reportWebVitals.js
└── setupTests.js

Answer 1

I think that the issue lies in the naming of your component js file 'number.js'. It should be written as 'Number.js' instead (a capital letter N)

According to the react documentation ,

When an element type starts with a lowercase letter, it refers to a built-in component like or and results in a string 'div' or 'span' passed to React.createElement. Types that start with a capital letter like compile to React.createElement(Foo) and correspond to a component defined or imported in your JavaScript file.