Hi i'm building an app using express and node. When I compile my project with webpack either in prod or dev mode I get the error : "Uncaught Error: Module parse failed: Unexpected token (8:20). You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file."

Now I don't know what type of file needs the loaders so I can't figure out what kind of loader I need to install in webpack. I've been trying to search here and done some googling but to no avail. If you can help me out with this I'd be really grateful!

My server.js:

const dotenv = require('dotenv');

dotenv.config();

function MeaningCloud(obj) {

    return obj;

}

var textapi = new MeaningCloud({

    application_key: process.env.API_KEY

});

projectData = {};



// Setup empty JS object to act as endpoint for all routes

projectData = {};



// Require Express to run server and routes

const express = require('express');

const bodyParser = require('body-parser');

const cors = require('cors');



// Start up an instance of app

const app = express();



/* Middleware*/

//Here we are configuring express to use body-parser as middle-ware.

app.use(bodyParser.urlencoded({ extended: false }));

app.use(bodyParser.json());



// Cors for cross origin allowance

app.use(cors())

// Initialize the main project folder

app.use(express.static('client'));



app.get("/all", function sendData(req, res) {

    res.send(projectData);

})



app.post("/add", (req, res) => {

    projectData['lat'] = req.body.lat;

    projectData['lng'] = req.body.lng;

    projectData['countryCode'] = req.body.countryCode;

    projectData['image'] = req.body.image;

    res.send(projectData);

})



app.get("/", (req, res) => {

    res.sendFile("index.html", { root: "src/client/views" })

})



// Setup Server

app.listen(3000, () => {

    console.log("Listening on port 3000")

    console.log("Go to http://localhost:3000")

})

My index.js:

const geoURL = "http://api.geonames.org/searchJSON?";

const geoUsername = `${process.env.GEO_USERNAME}`;

const weatherKey = `${process.env.WEATHER_KEY}`;

const weatherURL = "https://api.weatherbit.io/v2.0/current?";

const pixabayKey = `${process.env.PIXABAY_KEY}`;

const pixabayURL = "https://pixabay.com/api/?";



import getCity from getCity;

import getWeather from getWeather;

import getImage from getImage;

import postData from postData;

import receiveData from receiveData;



let d = new Date();

let newDate = d.getMonth() + 1 + "." + d.getDate() + "." + d.getFullYear();



const submitBtn = document.getElementById("submitBtn");



submitBtn.addEventListener("click", (e) => {

    const city = document.getElementById("city");



    if (city !== "") {

        getCity(geoURL, city, geoUsername)

            .then(city => getImage(pixabayURL, city, pixabayKey))

            .then(cityData => getWeather(weatherKey, weatherURL, cityData))

            .then(function (data) {

                postData("/add", { lat: data.lat, lng: data.lng, countryCode: data.countryCode, image: data.image })

            }).then(function () {

                receiveData()

            }).catch(function (error) {

                console.log(error);

                alert("Invalid city");

            })

    }

})

The error occurs at line 8 of the above file

so my getCity.js:

const getCity = async (geoURL, city, geoUsername) => {

    const res = await fetch(`${geoURL}q=${city}&username=${geoUsername}`);

    try {

        const cityData = await res.json();

        return cityData;

    }

    catch (error) {

        console.log("error", error);

    }

}



module.exports(getCity)

Also my webpack.config.js file! Sorry about that before!

const path = require('path')

const webpack = require('webpack')

const HtmlWebPackPlugin = require("html-webpack-plugin")

const { CleanWebpackPlugin } = require('clean-webpack-plugin')



module.exports = {

    entry: './src/client/index.js',

    output: {

        path: path.resolve(__dirname, 'dist'),

        filename: '[name][contenthash].js',

        clean: true,

    },

    mode: 'development',

    devtool: 'source-map',

    stats: 'verbose',

    module: {

        rules: [

            {

                test: '/.js$/',

                exclude: /node_modules/,

                loader: "babel-loader"

            }

        ]

    },

    plugins: [

        new HtmlWebPackPlugin({

            template: "./src/client/views/index.html",

            filename: "./index.html",

        }),

        new CleanWebpackPlugin({

            // Simulate the removal of files

            dry: true,

            // Write Logs to Console

            verbose: true,

            // Automatically remove all unused webpack assets on rebuild

            cleanStaleWebpackAssets: true,

            protectWebpackAssets: false

        })

    ]

}

Update: So I thought it was something to do with images. So I updated the config.js to include that loader. But it still gives me the same error on the same line.