How can I import jQuery and other js files to main.js? about starter-bootstrap HOT 6 CLOSED

Did you fixed the issue?

from starter-bootstrap.

Did you fixed the issue?

No, I'm still looking for an answer. Right now, I'm putting my js scripts in the footer. Do you know any other solutions to this?

from starter-bootstrap.

Javascripts should be enqueued via functions.php (wp_enqueue_script) only.

And since jQuery has been dropped in the latest version of the Starter Theme it needs to be activated via the array( 'jquery' ) parameter. It's strongly advised to import the jQuery version that comes with WordPress:
https://them.es/support/2019/07/06/goodbye-jquery/
https://them.es/support/2021/05/10/them-es-starter-v3-released/

Hope this helps?

from starter-bootstrap.

Javascripts should be enqueued via functions.php (wp_enqueue_script) only.

It means that every additional js will not be bundled in main.js right? So I will have additional js loaded on my site.

As for the jQuery, it's ok, I can convert my script to vanilla JS but I still can't import. After I have enqueued my extra js script, inside that file I need to import axios but it's giving me an error:

Uncaught SyntaxError: Cannot use import statement outside a module

in my functions.php file
wp_enqueue_script( 'extras', get_template_directory_uri() . '/assets/Extras.js', array('jquery'), $theme_version, true );

in my Extras.js under /assets

import axios from "../axios"

class Search {
	constructor(){
		alert("I am a search.");
	}
}
const mysearch = new Search();

from starter-bootstrap.

Did you reference "Extras.js" in the Webpack config? https://github.com/them-es/themes-starter-bootstrap/blob/main/webpack.config.js#L7

i.e. main: [ './main.js', './Extras.js' ],

This will incorporate the "Extras" code in main.js and is documented here https://webpack.js.org/concepts/entry-points

from starter-bootstrap.

Axios doesn't seem to be ready for ESM yet (axios/axios#4209) but for now you can try an alternative package (unofficial):
axios/axios#1879 (comment)

...or import the JS source directly:
import '[DIRECTORY_WHERE_AXIOS_IS_LOCATED]/dist/axios.min.js';

But since this issue is not related to the code in this repo it will be closed. Good luck!

from starter-bootstrap.