Error “Uncaught SyntaxError: Cannot use import statement outside a module” WordPress theme

I have tried about everything.

  • I tried using the ‘type’: ‘module’ function in the package.json
  • I have tried using .mjs (But that gave me 404 not found errors)
  • I made sure all paths are right
  • At one point I came across a FullySpecified error wich I also gave up upon since I could not fix the error.

I started over and I am now at step 1.
The code as of now is as follows:

package.json:

{
  "name": "fictional-university-theme",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build": "wp-scripts build",
    "start": "wp-scripts start",
    "dev": "wp-scripts start",
    "devFast": "wp-scripts start",
    "test": "echo "Error: no test specified" && exit 1"   
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "@glidejs/glide": "^3.4.1",
    "@wordpress/scripts": "*",
    "axios": "^0.21.1",
    "normalize.css": "^8.0.1"
  }
}

functions.php:

<?php

function swordit_files()
{

    wp_enqueue_script('main_script', get_theme_file_uri('/js/vendor/modernizr-3.5.0.min.js'), array('jquery'), '1.0', true);
    wp_enqueue_script('main_script2', get_theme_file_uri('/js/popper.min.js'), array('jquery'), '1.0', true);
    wp_enqueue_script('main_script3', get_theme_file_uri('/js/bootstrap.min.js'), array('jquery'), '1.0', true);
    wp_enqueue_script('main_script4', get_theme_file_uri('/js/isotope.pkgd.min.js'), array('jquery'), '1.0', true);
    wp_enqueue_script('main_script5', get_theme_file_uri('/js/slick.min.js'), array('jquery'), '1.0', true);
    wp_enqueue_script('main_script6', get_theme_file_uri('/js/jquery.meanmenu.min.js'), array('jquery'), '1.0', true);
    wp_enqueue_script('main_script7', get_theme_file_uri('/js/ajax-form.js'), array('jquery'), '1.0', true);
    wp_enqueue_script('main_script8', get_theme_file_uri('/js/wow.min.js'), array('jquery'), '1.0', true);
    wp_enqueue_script('main_script9', get_theme_file_uri('/js/jquery.scrollUp.min.js'), array('jquery'), '1.0', true);
    wp_enqueue_script('main_script11', get_theme_file_uri('/js/imagesloaded.pkgd.min.js'), array('jquery'), '1.0', true);
    wp_enqueue_script('main_script22', get_theme_file_uri('/js/jquery.magnific-popup.min.js'), array('jquery'), '1.0', true);
    wp_enqueue_script('main_script33', get_theme_file_uri('/js/waypoints.min.js'), array('jquery'), '1.0', true);
    wp_enqueue_script('main_script44', get_theme_file_uri('/js/jquery.counterup.min.js'), array('jquery'), '1.0', true);
    wp_enqueue_script('main_script55', get_theme_file_uri('/js/plugins.js'), array('jquery'), '1.0', true);
    wp_enqueue_script('main_script66', get_theme_file_uri('/js/swiper-bundle.min.js'), array('jquery'), '1.0', true);
    wp_enqueue_script('main_script77', get_theme_file_uri('/js/main.js'), array('jquery'), '1.0', true);
    wp_enqueue_script('main_script88', get_theme_file_uri('/src/index.js'), array('jquery'), '1.0', true);
    wp_enqueue_script('main_script88', get_theme_file_uri('/src/modules/Search.js'), array('jquery'), '1.0', true);



    


    wp_enqueue_style('swordit_swiper_style', get_theme_file_uri('/css/swiper-bundle.min.css'));
    wp_enqueue_style('swordit_slick_style', get_theme_file_uri('/css/slick.css'));
    wp_enqueue_style('swordit_icofont_style', get_theme_file_uri('/css/icofont.min.css'));
    wp_enqueue_style('swordit_magnific_style', get_theme_file_uri('/css/magnific-popup.css'));
    wp_enqueue_style('swordit_aos_style', get_theme_file_uri('/css/aos.min.css'));
    wp_enqueue_style('swordit_animate_style', get_theme_file_uri('/css/animate.min.css'));
    wp_enqueue_style('swordit_bootstrap_style', get_theme_file_uri('/css/bootstrap.min.css'));
    wp_enqueue_style('swordit_main_style', get_theme_file_uri('/css/style.css'));

}
add_action('wp_enqueue_scripts', 'swordit_files');

add_theme_support('menus');

register_nav_menus(
    array(
        'top-menu' => __('Top Menu', 'theme'),
    )
);

function my_theme_setup(){
    add_theme_support('post-thumbnails');
}

add_action('after_setup_theme', 'my_theme_setup');

index.js:

import Search from "./modules/Search";

const search = new Search()

Search.js:

class Search {
    constructor() {
        alert("No")
    }
}

export default Search

I will show the structure in a screenshot below:

enter image description here