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

CodePudding user response：

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.

CodePudding user response：

I figured it out.

I recently updated my machine using sudo apt-get update && sudo apt-get upgrade, which for some reason seems to have broken the links to /initrd.img and /initrd.img.old in the root file path(/).

I ran sudo update-grub, which fixed that issue. Afterwards, I noticed that quickly before it (still) couldn't find /initrd.img, it would flash an error saying it couldn't find axios.

I ran npm install axios.

everything works now. Not sure which one fixed it, but hopefully this saves somebody else a 2 day headache!