So I’m working on a MERN project with Vite that requires rendering data from a cluster out to the page. No matter what I do, I keep getting uncaught syntaxerror ambiguous indirect export. The errors get logged in App.jsx, and I’m importing from a module in my conn.js file. I’ve been reading everything I can on why this error might happen, but nothing seems to work. So I’m hoping some other eyes on the code will help.
This is my App.jsx
import { useState, useEffect } from 'react'
import React from 'react'
import { connectToServer, getDb } from "../../server/db/conn";
import Menu from './components/Menu'
import Traits from './components/Traits'
import Levels from './components/Levels'
function App() {
const [data, setData] = useState([]);
useEffect(() => {
connectToServer((err) => {
if (err) {
console.error(err);
} else {
const db = getDb();
console.log(db)
const usersCollection = db.collection("users");
usersCollection
.find()
.toArray()
.then((result) => {
setData(result);
})
.catch((err) => {
console.error(err);
});
}
});
}, []);
return (
<div className="App">
<Menu />
<div className="main-container">
<div className="main-column-left">
<Traits />
<Levels />
</div>
<div className="main-column-right">
<div className="main-right-upper">
<div className="Stats-container">
{/* Stats component*/}
</div>
<div className="Conditions-container">
{/* Conditions component */}
</div>
</div>
<div className="main-right-lower">
<div className="Skills-container">
{/* Skills component */}
</div>
<div className="Inventory-container">
{/* Inventory component */}
</div>
</div>
</div>
</div>
</div>
)
}
export default App
And this is the conn.js file
const { MongoClient } = require("mongodb");
const Db = process.env.ATLAS_URI;
const client = new MongoClient(Db, {
useNewUrlParser: true,
useUnifiedTopology: true,
});
let _db;
module.exports = {
connectToServer: function (callback) {
client.connect(function (err, db) {
if (db)
{
_db = db.db("testdb");
console.log("Successfully connected to MongoDB.");
}
return callback(err);
});
},
getDb: function () {
return _db;
},
};
And the server.js file for good measure.
const express = require("express");
const app = express();
const cors = require("cors");
require("dotenv").config({ path: "./config.env" });
const port = process.env.PORT || 5000;
app.use(cors());
app.use(express.json());
const dbo = require("./db/conn");
app.listen(port, () => {
dbo.connectToServer(function (err) {
if (err) console.log(err);
});
console.log(`Server is running on port: ${port}`);
});
I’ve tried renaming / changing the way they’re exported / exporting them one at a time, but nothing is working.