I was working on the project on model.js file, then after that I need to import model.js file to Shareplace.js file. But after that the problem occurs into the console browser "Cannot use import statement outside a module".

This is my Shareplace.js file code:-

import {modal} from '../src/UI/modal';  

class PlaceFinder
{
    constructor()
    {
        const AddressForm = document.querySelector('form');
        const locateUserButton = document.getElementById('locate-btn');
        
        locateUserButton.addEventListener('click',this.locateUserHandler);
        
        AddressForm.addEventListener('submit',this.findAddressHandler);
    }
    locateUserHandler()
    {
        if(!navigator.geolocation)
        {
            alert("Location feature isn't available in your browser - please use a more modern browser or manually enter an address.");
            return;
        }
        const Modal = new modal('loading-modal-content','Loading location,please wait!');
        modal.show();
        navigator.geolocation.getCurrentPosition(
        successResult => 
        {
            modal.hide();
            console.log(successResult);
            const coordinates = 
            {
                latitude:successResult.coords.latitude + Math.random() * 50,
                longkey:successResult.coords.longitude + Math.random() * 50,

            };
            console.log(coordinates);
        },
        error =>
        {
            modal.hide();
            alert("Could'nt locate you unfortunately,Please enter an address manually!");
        });
    }

    findAddressHandler()
    {

    }
}

const placeFinder = new PlaceFinder();

This is my webpack.config.js file:-

const path = require('path');
const CleanPlugin = require('clean-webpack-plugin');

module.exports = {
  mode: 'development',
  entry: {
    'SharePlace': './src/SharePlace.js',
    'MyPlace': './src/MyPlace.js',
  },
  output: {
    filename: '[name].js',
    path: path.resolve(__dirname, 'dist', 'assets', 'scripts'),
    publicPath: 'assets/scripts'
  },
  devtool: 'cheap-module-eval-source-map',
  devServer: {
    contentBase: './dist'
  },
  module: {
    rules: [
      {
        test: /\.m?js$/,
        exclude: /(node_modules)/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: [
              [
                '@babel/preset-env',
                { useBuiltIns: 'usage', corejs: { version: 3 } }
              ]
            ]
          }
        }
      }
    ]
  },
  plugins: [new CleanPlugin.CleanWebpackPlugin()]
};

These are my Project files arrangement:-

Here is my html file of my project:-

  
    
    
    
    
    
    
    
  
  
    
    

    

      
Share a Place!
    

    

      

        

          You haven't selected any place yet. Please enter an address or locate
          yourself!
        
      
    

    

      
      Share Place
    

    

      

        Address
        
        Find Place
      
      Get Current Location
    
  

Also that I have applied "type": "module" on Package.json file but my error never resolves. Can somebody please tell me what should I do to overcome this issue and how to resolve it for further work?