ERROR in ./src/App.js 5:0-38
Module not found: Error: You attempted to import …/backend/Models/PartSchema which falls outside of the project src/ directory. Relative imports outside of src/ are not supported.
You can either move it inside src/, or add a symlink to it from project’s node_modules/.
@ ./src/index.js 7:0-24 11:33-36
^^ Above Error…
So I got my backend connected to MongoDB and running, and I think I got the proper schema for my collection in MongoDB…
Now I am trying to map() through my collection (collection named “part” in MongoDB) and throw the result on a table on my frontend in App.js
… But I am getting the error shown above…
How do I properly fetch the schema from the backend folder to map it on the frontend?
The code I have is this:
in the server.js in my backend folder:
const express = require("express");
const cors = require("cors");
const mongoose = require("mongoose");
require("dotenv").config();
const app = express();
const port = process.env.PORT || 5000;
app.use(cors());
app.use(express.json());
const uri = process.env.ATLAS_URI;
mongoose.connect(uri, { useNewUrlParser: true });
const connection = mongoose.connection;
connection.once("open", () => {
console.log("MongoDB database connection established successfully");
});
app.listen(port, () => {
console.log(`Server is running on port: ${port}`);
});
In my Backend folder / Models folder I got:
I think this will connect me to the “part” collection in the MongoDB connection that is working good from the proper database.
import mongoose from "mongoose";
const { schema } = mongoose;
const partSchema = new schema({
Reference: String,
Description: String,
Replacements: String,
});
const part = mongoose.model("part", partSchema);
module.exports = part;
Now I want to catch the information and print it on my frontend in App.js under the src folder… trying to do something like this which is not working.
import "./App.css";
import "../backend/Models/PartSchema";
function App() {
return (
<div className="App">
<h1>Here is a table </h1>
<table>
<thead>
<tr>
<th>Reference </th>
<th> Description </th>
<th>Replacements </th>
</tr>
</thead>
<tbody>
{Part.map((item) => (
<tr>
<td>{item.reference}</td>
<td>{item.description}</td>
<td>{item.replacements}</td>
</tr>
))}
</tbody>
</table>
</div>
);
}
export default App;
