Node.js & React -- Cannot use import statement outside a module

I converted my Node.js files into modules and put "type": "module" inside of my package.json. The converted syntax works fine for most files. However, when I try to import my React component into my backend server.js file, it's giving me the error Cannot use import statement outside a module. Specifically, it's pointing to an import statement inside of my component file (that's inside of the client folder).
3 Replies
vince
vince•2y ago
Here is my server/server.js file:
import ConnectToDatabase from './Functions/ConnectToDatabase.js';
import FetchGenres from './Functions/FetchGenres.js';
import Genres from '../client/src/Components/Genres.js';
import ConnectToDatabase from './Functions/ConnectToDatabase.js';
import FetchGenres from './Functions/FetchGenres.js';
import Genres from '../client/src/Components/Genres.js';
The ConnectToDatabase and FetchGenres work great. The Genres import is what's giving me an error. Genres is inside of /client/src/Components. Here is Genres.js inside of /client/src/Components:
import RandomColor from '../Hooks/RandomColor';

const Genres = (props) => {
const genres = props.genres;
const genreList = genres.map((genre) =>
<li className="genre" style={{ backgroundColor: RandomColor('red', 0.75) }}>
<p>{ genre }</p>
</li>
);

return <ul className="genres hide-scrollbar">{ genreList }</ul>;
}

export default Genres;
import RandomColor from '../Hooks/RandomColor';

const Genres = (props) => {
const genres = props.genres;
const genreList = genres.map((genre) =>
<li className="genre" style={{ backgroundColor: RandomColor('red', 0.75) }}>
<p>{ genre }</p>
</li>
);

return <ul className="genres hide-scrollbar">{ genreList }</ul>;
}

export default Genres;
The line it's specifically yelling at me for is the first line, import RandomColor from '../Hooks/RandomColor' Okay, so I just added type: module to my client folder, and now it's telling me "Unexpected token '<'" in Genres.js Looked it up, seems like I need babel (to convert jsx to js??) so I did that, and it's still telling me the same thing I'm so confusewd I'm going to go lie down 😅
Unknown User
Unknown User•2y ago
Message Not Public
Sign In & Join Server To View
vince
vince•2y ago
Yea I found that out, I ended up just saying screw it and using CSR since I didn't want to refractor everything. Thank you for the confirmation though
Want results from more Discord servers?
Add your server