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: