Kevin Powell - Community•2y ago

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•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•2y ago

Message Not Public

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

Gaming

Programming

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